Objetos en Javascript

Los objetos, en JavaScript, son el tipo de datos más importante y constituyen los componentes básicos del JavaScript moderno. Estos objetos son bastante diferentes de los tipos de datos primitivos de JavaScript (Número, String, Booleano, nulo, indefinido y símbolo) en el sentido de que estos tipos de datos primitivos almacenan un solo valor cada uno (dependiendo de sus tipos).

• Los objetos son más complejos y cada objeto puede contener cualquier combinación de estos tipos de datos primitivos, así como tipos de datos de referencia.
• Un objeto, es un tipo de datos de referencia. Las variables a las que se les asigna un valor de referencia reciben una referencia o un puntero a ese valor. Esa referencia o puntero apunta a la ubicación en la memoria donde se almacena el objeto. Las variables en realidad no almacenan el valor.
• En términos generales, los objetos en JavaScript pueden definirse como una colección desordenada de datos relacionados, de tipos primitivos o de referencia, en forma de pares «clave: valor». Estas claves pueden ser variables o funciones y se denominan propiedades y métodos, respectivamente, en el contexto de un objeto.

Se puede crear un objeto con corchetes {…} con una lista opcional de propiedades. Una propiedad es un par «clave: valor», donde una clave es una string (también llamada «nombre de propiedad»), y el valor puede ser cualquier cosa. Visualicemos esto con la siguiente sintaxis para crear un objeto en JavaScript.

Sintaxis:

let object_name = {
    key_name : value,
    ...
}

Ahora, después de comprender y visualizar la sintaxis de creación de objetos, veamos un ejemplo de un objeto de JavaScript a continuación:

let school = {
    name : "Vivekananda School",
    location : "Delhi",
    established : "1971"
}

En el ejemplo anterior , «nombre», «ubicación», «establecido» son todos «claves» y «Vivekananda School», «Delhi» y 1971 son valores de estas claves respectivamente. Cada una de estas claves se conoce como propiedades del objeto. Un objeto en JavaScript también puede tener una función como miembro, en cuyo caso será conocido como un método de ese objeto. Veamos un ejemplo de este tipo: 

// javascript code demonstrating a simple object
let school = {
    name: 'Vivekananda School',
    location : 'Delhi',
    established : '1971',
    displayInfo : function(){
        console.log(`${school.name} was established
              in ${school.established} at ${school.location}`);
    }
}
school.displayInfo();  

Salida: En el ejemplo anterior, «displayinfo» es un método del objeto de la escuela que se utiliza para trabajar con los datos del objeto, almacenados en sus propiedades.

Propiedades del objeto JavaScript

Los nombres de propiedad pueden ser strings o números. En caso de que los nombres de las propiedades sean números, se debe acceder a ellos utilizando la «notación de paréntesis» como esta: 

let school = {
    name: 'Vivekananda School',
    location : 'Delhi',
    established : '1971',
    20 : 1000,
    displayInfo : function(){
        console.log(`The value of the key 20 is ${school['20']}`);
    }
}
school.displayInfo();  

Salida: Pero más sobre la notación de paréntesis más adelante. Los nombres de propiedades también pueden ser strings con más de una palabra separada por espacios. En cuyo caso, estos nombres de propiedad deben ir entre comillas:

let school = {
    "school name" : "Vivekananda School",
}

Al igual que los nombres de propiedades que son números, también se debe acceder a ellos mediante la notación de corchetes. Por ejemplo, si queremos acceder a ‘Vivekananda’ desde ‘Vivekananda School’, podemos hacer algo como esto: 

// bracket notation
let school = {
    name: 'Vivekananda School',
    displayInfo : function(){
        console.log(`${school.name.split(' ')[0]}`);
    }
}
school.displayInfo(); // Vivekananda

Salida: en el código anterior, utilizamos la notación de paréntesis y también el método de división proporcionado por JavaScript, sobre el cual aprenderá en el artículo de strings.

Propiedades heredadas

Las propiedades heredadas de un objeto son aquellas propiedades que se han heredado del prototipo del objeto, en lugar de estar definidas para el objeto mismo, lo que se conoce como la propiedad Propia del objeto. Para verificar si una propiedad es propiedad de un objeto, podemos usar el método hasOwnProperty . Atributos de propiedad Las propiedades de datos en JavaScript tienen cuatro atributos.

• valor: El valor de la propiedad.
• escribible: cuando es verdadero, el valor de la propiedad se puede cambiar
• enumerable: cuando es verdadero, la propiedad se puede iterar mediante la enumeración «for-in». De lo contrario, se dice que la propiedad es no enumerable.
• configurable: si es falso, los intentos de eliminar la propiedad, cambiar la propiedad para que sea un acceso o propiedad, o cambiar sus atributos (que no sean [[Valor]], o cambiar [[Escribible]] a falso) fallarán.

// hasOwnProperty code in js
const object1 = new Object();
object1.property1 = 42;
 
console.log(object1.hasOwnProperty('property1')); // true

Producción:

Crear objetos

Hay varias formas o sintaxis para crear objetos. Uno de los cuales, conocido como la sintaxis literal de Objeto, ya lo hemos usado. Además de la sintaxis literal del objeto, los objetos en JavaScript también se pueden crear utilizando los constructores, Object Constructor o el patrón prototipo.

1. Uso de la sintaxis literal de objeto: la sintaxis literal de objeto utiliza la notación {…} para inicializar un objeto y sus métodos/propiedades directamente. Veamos un ejemplo de creación de objetos usando este método:

var obj = {
    member1 : value1,
    member2 : value2,
};

1. Estos miembros pueden ser cualquier cosa: strings, números, funciones, arrays o incluso otros objetos. Un objeto como este se denomina literal de objeto. Esto es diferente de otros métodos de creación de objetos que implican el uso de constructores y clases o prototipos, que se analizan a continuación.
2. Constructor de objetos: otra forma de crear objetos en JavaScript implica usar el constructor «Objeto». El constructor de objetos crea un contenedor de objetos para el valor dado. Esto, usado junto con la palabra clave «nuevo» nos permite inicializar nuevos objetos. Ejemplo : 

const school = new Object();
school.name = 'Vivekanada school';
school.location = 'Delhi';
school.established = 1971;
 
school.displayInfo = function(){
    console.log(`${school.name} was established
          in ${school.established} at ${school.location}`);
}
 
school.displayInfo();

1. Salida: Los dos métodos mencionados anteriormente no son adecuados para programas que requieren la creación de múltiples objetos del mismo tipo, ya que implicaría escribir repetidamente las líneas de código anteriores para cada uno de esos objetos. Para lidiar con este problema, podemos hacer uso de otros dos métodos de creación de objetos en JavaScript que reducen significativamente esta carga, como se menciona a continuación:
2. Constructores: los constructores en JavaScript, como en la mayoría de los demás lenguajes de programación orientada a objetos, proporcionan una plantilla para la creación de objetos. En otras palabras, define un conjunto de propiedades y métodos que serían comunes a todos los objetos inicializados usando el constructor. Veamos un ejemplo : 

function Vehicle(name, maker) {
   this.name = name;
   this.maker = maker;
}
 
let car1 = new Vehicle('Fiesta', 'Ford');
let car2 = new Vehicle('Santa Fe', 'Hyundai')
 
console.log(car1.name);    // Output: Fiesta
console.log(car2.name);    // Output: Santa Fe

1. Salida: observe el uso de la palabra clave «nuevo» antes de la función Vehículo. Usar la palabra clave «nuevo» de esta manera antes de que cualquier función la convierta en un constructor. Lo que realmente hace el «nuevo vehículo()» es:
   • Crea un nuevo objeto y establece la propiedad de constructor del objeto en las escuelas (es importante tener en cuenta que esta propiedad es una propiedad predeterminada especial que no es enumerable y no se puede cambiar configurando una propiedad «constructor: alguna función» manualmente).
   • Luego, configura el objeto para que funcione con el objeto prototipo de la función Vehículo (cada función en JavaScript obtiene un objeto prototipo, que inicialmente es solo un objeto vacío pero se puede modificar. El objeto, cuando se crea una instancia, hereda todas las propiedades del objeto prototipo de su constructor ).
   • Luego llama a Vehicle() en el contexto del nuevo objeto, lo que significa que cuando se encuentra la palabra clave «this» en el constructor (vehicle()), se refiere al nuevo objeto que se creó en el primer paso.
   • Una vez que esto finaliza, el objeto recién creado se devuelve a car1 y car2 (en el ejemplo anterior).
2. Prototipos: otra forma de crear objetos implica el uso de prototipos. Cada función de JavaScript tiene una propiedad de objeto prototipo de forma predeterminada (está vacía de forma predeterminada). Se pueden adjuntar métodos o propiedades a esta propiedad. Una descripción detallada de los prototipos está más allá del alcance de esta introducción a los objetos. Sin embargo, puede familiarizarse con la sintaxis básica utilizada a continuación:

let obj = Object.create(prototype_object, propertiesObject)
          // the second propertiesObject argument is optional

1. Un ejemplo del uso del método Object.create() es: 

let footballers = {
    position: "Striker"
}
  
let footballer1 = Object.create(footballers);
  
    // Output : Striker   
console.log(footballer1.position);

1. Salida: En el ejemplo anterior, los futbolistas sirvieron como prototipo para crear el objeto «futbolista1». Todos los objetos creados de esta manera heredan todas las propiedades y métodos de sus objetos prototipo. Los prototipos pueden tener prototipos y éstos pueden tener prototipos y así sucesivamente. Esto se conoce como enstringmiento de prototipos en JavaScript. Esta string termina con Object.prototype, que es el prototipo de respaldo predeterminado para todos los objetos. Los objetos de JavaScript, de forma predeterminada, heredan propiedades y métodos de Object.prototype, pero estos pueden anularse fácilmente. También es interesante notar que el prototipo predeterminado no siempre es Object.prototype. Por ejemplo, Strings y Arrays tienen sus propios prototipos predeterminados: String.prototype y Array.prototype respectivamente.

Acceso a miembros de objetos

Se puede acceder a los miembros del objeto (propiedades o métodos) usando:

1. notación de punto:

(objectName.memberName)

let school = {
    name : "Vivekanada",
    location : "Delhi",
    established : 1971,
    20 : 1000,
    displayinfo : function() {
        console.log(`${school.name} was established
          in ${school.established} at ${school.location}`);
    }
 
}
 
console.log(school.name);
 
console.log(school.established);

1. Producción:
2. Notación de corchetes:

 objectName["memberName"]

let school = {
    name : "Vivekanada School",
    location : "Delhi",
    established : 1995,
    20 : 1000,
    displayinfo : function() {
        document.write(`${school.name} was established
          in ${school.established} at ${school.location}`);
    }
}
 
// Output : Vivekanada School
console.log(school['name']);
 
// Output: 1000
console.log(school['20']);

1. Producción:

A diferencia de la notación de puntos, la palabra clave entre paréntesis funciona con cualquier combinación de strings, incluidas, entre otras, strings de varias palabras. Por ejemplo:

somePerson.first name // invalid
    somePerson["first name"] // valid

A diferencia de la notación de puntos, la notación de corchetes también puede contener nombres que son resultados de cualquier variable de expresión cuyos valores se calculan en tiempo de ejecución. Por ejemplo :

let key = "first name" somePerson[key] = "Name Surname"

Operaciones similares no son posibles mientras se usa la notación de puntos.

Iterando sobre todas las claves de un objeto

Para iterar sobre todas las claves enumerables existentes de un objeto, podemos usar la construcción for…in . Vale la pena señalar que esto nos permite acceder solo a aquellas propiedades de un objeto que son enumerables (recuerde que enumerable es uno de los cuatro atributos de las propiedades de datos). Por ejemplo, las propiedades heredadas de Object.prototype no son enumerables. Pero también se puede acceder a las propiedades enumerables heredadas de algún lugar usando el ejemplo de construcción  for…in :

let person = {
    gender : "male"
}
 
var person1 = Object.create(person);
person1.name = "Adam";
person1.age = 45;
person1.nationality = "Australian";
 
for (let key in person1) {
// Output : name, age, nationality
// and gender
    console.log(key);
}         

Producción:

Eliminación de propiedades

Para Eliminar una propiedad de un objeto podemos hacer uso del operador de eliminación. A continuación se muestra un ejemplo de su uso: 

let obj1 = {
    propfirst : "Name"
}
 
// Output : Name
console.log(obj1.propfirst);
delete obj1.propfirst
 
// Output : undefined
console.log(obj1.propfirst);            

Salida: es importante tener en cuenta que no podemos eliminar propiedades heredadas o propiedades no configurables de esta manera. Por ejemplo : 

let obj1 = {
    propfirst : "Name"
}
// Output : Name
console.log(obj1.propfirst)
  let obj2 = Object.create(obj1);
 
 // Output : Name
  console.log(obj2.propfirst);
   
  // Output : true.
  console.log(delete obj2.propfirst);
 
    // Surprisingly Note that this will return true
    // regardless of whether the deletion was successful
 
    // Output : Name   
    console.log(obj2.propfirst);

Producción:

Navegadores compatibles:

• Google Chrome 1 y superior
• Borde 12 y superior
• Firefox 1 y superior
• Ópera 3 y superior
• Safari 1 y superior
• Internet Explorer 3 y superior