Objetos

Esta es uno de los aspectos más importantes en la programación. Tengo que ponerle bastante atención. Los objetos son la pieza principal en JavaScript. En los objetos agrupamos una serie de datos en una sola variable que por lo general están asociadas entre sí al objeto al que pertenecen. Es como tener múltiples variables en una sola.

NombreObjeto = {propiedadObjeto: valor}; //A la propiedad también se le suele llamar llave del objeto

Object literal

Declarar un objeto tiene la siguiente sintaxis y es llamada object literal:

const nomObj = {};

Esa declaración de variable cuyo valor está encerrado entre llaves es un indicativo de estar en presencia de un objeto.

const nomObj = {

    nombreDato1: valor1, //Propiedad o llave del objeto : valor
    nombreDato2: valor2  //Conjunto de propiedades y valor separados por , 
}

Hay otra manera de declararlos que se llama Object Constructor que se explica más adelante, va a ir de usar una función.

Acceder a los datos de una variable

Sintaxis de punto

nomObj.nombreDato1;

Por ejemplo

console.log(nomObj.nombreDato1); //Arrojará valor1 en la consola
Otra forma que es opcional y no tiene nombre
console.log(nomObj['nombreDato1']); // Arrojará valor1 en la consola
Es muy poco usada pero según el instructor es bueno conocerla.

Agregar un dato a un objeto

Agregar dato con la sintaxis de punto

nomObj.nombreDato3 = valor3; 

Lo anterior agregará un nuevo dato, nombreDato3, al objeto. Si se colocar el nombre de una propiedad que ya existe entonces va a sobre escribir ese dato.

Eliminar datos de un objeto

Con la palabra reservada <<delete>>

delete nomObj.nombreDato3;

Esto va a eliminar la propiedad nombreDato3 del objeto.

Pasando datos del objeto a variables

Esto es algo como destructurando un objeto. Lo llaman pasar datos de un objeto a variables. Es como desarmando el objeto. Oficialmente trata sobre acceder a los valores de un objeto y asignarlos a una variable.

Tradicional antes de ECMA6

const nomVariable = nomObj.nombreDato1; 

Con Destructuring (después de ECMA6)

const { nombreDato1 } = nomObj;

Lo anterior crea una variable con el nombre de la propiedad y su valor del objeto indicado.

Pero la verdadera ventaja del destructuring es que se pueden crear múltiples variables con los datos del objeto en una sola línea de código como se observa a continuación.

const { nombreDato1, nombreDato2, nombreDato3  } = nomObj;

Lo anterior crea múltiples variables con los nombres de las propiedades y sus valores del objeto indicado.

Parece que el uso del signo = tiene un significado no intuitivo, deja de ser <<igual a>> para ser algo así como <<en base a>>.

Objetos dentro de objetos u objetos anidados

Es intuitivo y su acceso definido es por la sintaxis de punto.

const producto {
                nombre: 'monitor 20 pulgadas',
                precio: 300,
                disponibilidad: true,
                informacion:{
                             medidas: {
                                       peso: '1kg',
                                       altura: '45cm',
                                       anchura: '115cm'        
                                       }
                             fabricacion: {
                                           marca: 'Sony',
                                           pais: 'China'
                                           }
                             }

                }

Acceso por sintaxis de punto en un objeto de objetos

console.log(producto.informacion.fabricacion.marca); //Arroja "China"
const pais = producto.informacion.fabricacion.marca; //Guarda el dato

La primera línea de código de lo anterior va a arrojar el string “China” en la consola. Y la segunda línea va a guardar el string “China” en la variable <<pais>>.

Destructuring de objetos anidados

Esta es la mejor manera de guardar en variables los datos de objetos anidados.

const {} = producto;

En el código anterior voy a destructurar el objeto <<producto>> según lo que ponga entre las llaves.

const {nombre, informacion: { fabricacion: { pais }}} = producto;

En el código anterior, a partir de las propiedades del objeto producto, se crean las variables nombre y país, pero no información, ni fabricación.

const {nombre, informacion, informacion: { fabricacion: { pais }}} = producto;

En el código anterior, a partir de las propiedades del objeto producto, se crean las variables nombre, informacion y país, pero no fabricación.

const {nombre, informacion, informacion: { fabricacion, fabricacion: { pais }}} = producto;

En el código anterior, a partir de las propiedades del objeto producto, se crean las variables nombre, informacion, fabricacion y país.

Uso estricto

El uso estricto quita la flexibilidad a JavaScript. Se hace efectiva si se coloca el string “use strict” al comienzo del código. Esta cualidad de JavaScript merece una explicación más extensa pero por los momentos se coloca aquí porque al usarla se habilitan el uso de algunos métodos para los objetos.

El método Object.freeze()

Esto es para que un objeto no pueda ser modificado, se debe tener el uso estricto para usarlo.

Object.freeze( producto );

Object.isFrozen()

Para saber si un objeto está bloqueando con el método Object.freeze().

console.log( Object.isFrozen( producto ) );

Lo anterior arrojará true o false según esté bloqueada o no el objeto producto con Object.freeze().

El método Object.seal()

Con este método semi bloqueamos el objeto, es decir, a diferencia de Object.freeze() que bloquea por completo al objeto, el método Object.seal(), bloquea solo la posibilidad de agregar o eliminar propiedades pero sí permite modificar los valores de las propiedades preexistentes.

Object.seal( producto );

Con lo anterior no se podrán agregar o eliminar más propiedades en el objeto producto pero si se podrán modificar las que ya tiene.

Object.isSealed()

Para saber si un objeto está bloqueando con el método Object.seal().

console.log( Object.isSealed( producto ) );

Lo anterior arrojará true o false según esté bloqueada o no el objeto producto con Object.seal().

Unir dos objetos

Tenemos dos objetos y queremos crear un solo objeto con los valores de los dos primeros.

Dado los objetos objeto1 {…} y objeto2{…}

Unir dos objetos con el método Object. assign();

const objetoTotal = Object.assign(objeto1, objeto2);

Unir dos objetos con el Spread Operator

const objetoTotal2 = {...objeto1, ...objeto2};

La palabra reservada this

En el ámbito de los objetos, según el curso, la palabra reservada <<this>> va a hacer referencia a un parámetro del objeto para usar su valor.

const producto = {
                  nombre: "Monitor",
                  precio: 300,
                  disponibilidad: true
                  mostrarInfo: function() {
console.log(`El producto ${this.nombre} tiene un precio de ${this.precio}`)
                                          }                  
}

Si no coloca la palabra this podrían pasar dos cosas: no va a aparecer nada o, si esas variables existen a nivel global, entonces esas son las que se usaran.

No obstante this también se suele usar para especificar al elemento que llamó a una función, más detalle aquí.

Object Constructor o Función Constructora de Objetos

Esto es una manera dinámica de crear múltiples objetos con las mismas características o parámetros. Digamos que tenemos carros, los parámetros para los carros serán siempre marca, modelo, año, aire acondicionado.

Entonces yo puedo crear a mode Object Literal:

const carro = {
               marca: 'Ford',
               modelo: 'Fiesta',
               year: 2001,
               aa: true
               }

Pero necesito crear muchos objetos para cada modelo, marca y disponibilidad de aire acondicionado o no.

function Carro(dato1, dato2, dato3, dato4) {
                                            this.marca = dato1;
                                            this.modelo = dato2;
                                            this.aa = true;
                                            this.year = dato3;
                  }

const modeloCarro = new Carro( Ford, Fiesta, null, 2001 );

Se recomienda que el nombre de una Object Constructor empiece con la inicial en mayúscula. Entonces procedo a crear esos objetos con la palabra new.

No se puede usar una función de flecha para crear un object constructor. Una función de flecha tiene la particularidad, vaya ud a saber por qué, que no chequea lo que está dentro de las llaves y entonces no se puede usar la palabra reservada this, y el uso de esta palabra reservada es fundamental para la creación del object constructor. La función de flecha busca más en la ventana global.

Me arroja el siguiente Objeto:

Carro {marca: 'Ford', modelo: 'Fiesta', aa: true, year: 2001}
aa: true
marca: "Ford"
modelo: "Fiesta"
year: 2001

Intencionalmente entre dato2 y dato3 dejé un booleano con el valor por defecto en true. Para hacer eso válido cuando declaro el nuevo objeto tengo que dejar esa posición con el valor null, porque de lo contrario no me va a asignar dato3 como año y lo va a dejar como undefined.

Tres métodos útiles (según el curso) para los objetos

const producto = {
    nombre: "Monitor 20 pulgadas",
    precio: 30,
    disponible: true
}

Object.keys();

Muestra los parámetros y sus llaves.

console.log(Object.keys(producto));
(3) ['nombre', 'precio', 'disponible']
0: "nombre"
1: "precio"
2: "disponible"
length: 3
[[Prototype]]: Array(0)

Object.values();

Muestra los valores.

console.log(Object.values(producto));
(3) ['Monitor 20 pulgadas', 30, true]
0: "Monitor 20 pulgadas"
1: 30
2: true
length: 3
[[Prototype]]: Array(0)

Object.entries();

Muestra un verguero de objetos por cada uno de los items. Pero no, analizando creo que son un objeto de arrays y cada arrays está compuesto por los parámetros y valores.

console.log(Object.entries(producto));
(3) [Array(2), Array(2), Array(2)]
0: (2) ['nombre', 'Monitor 20 pulgadas']
1: (2) ['precio', 30]
2: (2) ['disponible', true]
length: 3
[[Prototype]]: Array(0)

Listo

Hasta aquí el estudio de los objetos que no tiene para nada algo de dificultad. Es solo saber cómo va la cosa y decir, ok, si dices que es así, pues ok.