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
//Antes
var nombre = 'kEnAi',
edad = 4;
var perro = {
nombre : nombre,
edad : edad,
ladrar : function () {
alert('guau guau!!!');
}
};
console.log(perro); //Imprime Object {nombre: "kEnAi", edad: 4}
perro.ladrar(); //Manda alerta
//Ahora
let nombre = 'kEnAi',
edad = 4;
const perro = {
nombre,
edad,
ladrar() {
alert('guau guau!!!');
}
};
console.log(perro); //Imprime Object {nombre: "kEnAi", edad: 4}
perro.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)
let nombreAtributo = 'nombre',
nombreOtroAtributo = 'ad',
nombreMetodo = 'ladrar';
const perro = {
[nombreAtributo] : 'kEnAi',
[`ed${nombreOtroAtributo}`] : 4,
[nombreMetodo]() {
alert('guau guau!!!');
}
};
console.log(perro); //Imprime Object {nombre: "kEnAi", edad: 4}
perro.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:
- JavaScript desde cero
- Node.js desde cero
- JavaScript Avanzado: Paradigmas de Programación
- HTML5 Avanzado: Progressive Web Apps
- React desde cero
- Angular desde cero
- Vue.js desde cero
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':
- ECMAScript el estándar de JavaScript
- Babel
- Variables,Constantes y Niveles de Bloque
- Template Strings
- Arrow Functions
Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana. Bye ?