Objetos Literales en JavaScript

Hola gente de EDteam, soy su amigo y docente digital Jonathan MirCha, siguiendo con la serie de artículos sobre el estándar actual de JavaScript hoy continuaré hablando de los objetos literales.

JavaScript es un lenguaje basado en prototipos , por lo que todo es un objeto. Es un lenguaje obligatorio para proporcionar construcciones fáciles cuando se trata de crear objetos, configurar y acceder a prototipos.Los objetos literales nos permiten tener:

Atajos en la escritura de atributos y métodos.
Nombres de atributos y métodos calculados (o computados).

Atajos en la escritura de atributos y métodos

1//Antes
2var nombre = 'kEnAi',
3  edad = 4;
4
5var perro = {
6  nombre : nombre,
7  edad : edad,
8  ladrar : function () {
9    alert('guau guau!!!');
10  }
11};
12
13console.log(perro); //Imprime Object {nombre: "kEnAi", edad: 4}
14perro.ladrar(); //Manda alerta
15
16//Ahora
17let nombre = 'kEnAi',
18  edad = 4;
19
20const perro = {
21  nombre,
22  edad,
23  ladrar() {
24    alert('guau guau!!!');
25  }
26};
27
28console.log(perro); //Imprime Object {nombre: "kEnAi", edad: 4}
29perro.ladrar(); //Manda alerta

Como podemos ver en el código anterior, si el nombre de la variable que guarda el valor de la propiedad de un objeto, es igual al nombre de la propiedad misma, entonces se puede simplificar la asignación. También puedes observar que cuando a una propiedad se le asigna una función como valor, ya no es necesario declarar la estructura de una función, ahora simplemente asignamos el nombre del método seguido de los parentesis y las llaves del cuerpo de la función.

Nombres de atributos y métodos calculados (o computados)

1let nombreAtributo = 'nombre',
2  nombreOtroAtributo = 'ad',
3  nombreMetodo = 'ladrar';
4
5const perro = {
6  [nombreAtributo] : 'kEnAi',
7  [`ed${nombreOtroAtributo}`] : 4,
8  [nombreMetodo]() {
9    alert('guau guau!!!');
10  }
11};
12
13console.log(perro); //Imprime Object {nombre: "kEnAi", edad: 4}
14perro.ladrar(); //Manda alerta

Esto te pudiera parecer algo loco pero es muy similar al concepto de variables de variables en PHP. A veces es conveniente tener nombres de variables que se pueden definir y usar dinámicamente, tomando el valor de una variable y tratándolo como el nombre de otra variable, en este caso tomado la clave de la propiedad de nuestros objetos como puedes ver en el código anterior. Para realizar esto, es necesario declarar el nombre dinámico de la variable entre corchetes.

Como ves, gracias a los avances que el estándar de JavaScript ha tenido desde el 2015, ahora podemos tener una sintaxis con más posibilidades como en otros lenguajes de programación.

Recuerda que en EDteam tenemos varios cursos que te introducen y especializan en este maravilloso lenguaje:

En el siguiente capítulo te hablaré de la descomposición mejor conocida como destructuring.

Artículos anteriores de la serie 'El estándar actual de JavaScript':

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana. Bye ?

Objetos Literales en JavaScript

Atajos en la escritura de atributos y métodos

Nombres de atributos y métodos calculados (o computados)

Comentarios de los usuarios