Del mismo modo en que los lenguajes de la vida común como el español, el francés y el inglés cambian, un lenguaje de programación está en constante evolución. Estas evoluciones normalmente se documentan en lo que llamamos estándares. ES6, también conocido como ECMAScript 2015, fue la segunda gran revisión del lenguaje JavaScript desde su creación. Con ella, llegaron muchos cambios que simplificaron la forma en la que escribimos código y ejecutamos acciones en JavaScript.
En este post, te enseñaremos cómo funciona el shorthand de objeto literal que introdujo ES6 a JavaScript.
¿Qué es el shorthand de objeto literal en ES6 JavaScript?
ECMAScript 2015, también conocido como ES6, es un estándar que introduce muchísimos cambios a la forma en que escribimos código en JavaScript. Entre los cambios más conocidos están las palabras clave let y const para definir variables, las funciones flecha o arrow functions, la asignación de desestructuración o método swap, las clases y los módulos. Para conocer los diez cambios más importantes de esta actualización, te invitamos a leer este post de Board Infinity.
Uno de los cambios menos conocidos, pero igual de importantes para la simplificación de nuestro código, es la nueva forma de definir las claves de un objeto literal en JavaScript. A esta forma se le conoce como el shorthand de objeto literal.
¿En qué consiste el shorthand de objeto literal? Este nuevo método de escritura se utiliza cuando tenemos variables definidas en nuestro código que queremos insertar en un objeto literal. Recuerda que, aunque todos los objetos tienen propiedades y métodos, los objetos literales se caracterizan por definir sus propiedades de manera textual. Es decir, tienen propiedades definidas explícitamente en términos de clave: valor.
A continuación, te ponemos un ejemplo de un objeto literal:
let objetoEjemplo = {
color: azul,
tamaño: pequeño,
posición: pared,
}
¿Cómo funciona el shorthand de objeto literal en JavaScript?
Lo que hace el shorthand de objeto literal en JavaScript es simplificar el modo en el que escribimos propiedades que hacen referencia a variables previamente definidas. Antes de esta actualización, los objetos literales que se construían a partir de una serie de variables debían escribir dichas variables en términos clave: valor. Es decir, aunque los valores estuvieran definidos previamente en las variables, estos se debían insertar nuevamente en el objeto.
Ahora, gracias al shorthand de objeto literal, podemos insertar simplemente el nombre de las variables dentro del objeto literal. Mientras estos nombres estén en líneas de código individuales y se separen con comas, el programa interpretará su nombre como el nombre de la clave. Además, definirá que el valor de la variable es el valor de la propiedad del objeto.
Como siempre, esto es más fácil de entender cuando vemos un ejemplo. Supongamos que tenemos las siguientes variables de tipo let:
let ana = 42;
let nina = 31;
let mateo = 29;
Ahora, podemos insertar estas variables como propiedades utilizando el shorthand de objeto literal:
let edadesAmigos = {
ana,
nina,
mateo
}
De este modo, si decidiéramos pintar este objeto en la pantalla obtendríamos los siguientes resultados:
console.log (edadesAmigos);
// {
// ana: 42,
// nina: 31,
// mateo; 29,
// }
El shorthand de objeto literal que introduce ES6 en JavaScript es muy cómodo a la hora de crear objetos con variables. Esto es especialmente útil si antes hemos hecho un uso racional de los nombres de nuestras variables. Entonces, será fácil recordar el propósito de cada una de las variables definidas y asignarlas a cada objeto.
Esta simplificación también hace que, cuando queramos cambiar el nombre de una variable, podamos utilizar COMMAND + D (macOS) para cambiar todas las líneas de código que tengan ese nombre. De este modo, basta con que cambiemos el nombre de la clave de una propiedad y no su valor, pues este se actualizará automáticamente con base a la variable referenciada.
A continuación, te mostramos otro ejemplo de cómo podemos utilizar esta simplificación, uniendo propiedades definidas en el objeto con algunas previamente descritas como variables:
play (match) {
const homeGoals = this.generateGoals ( );
const awayGoals = this.generateGoals ( );
return
homeTeamName: match.home,
homeGoals,
awayTeamName: match.away,
awayGoals,
}
}
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo utilizar el shorthand de objeto literal en ES6 JavaScript para simplificar tus líneas de código, seguro que quieres seguir aprendiendo más trucos útiles a la hora de programar con este lenguaje. Para ello, te recomendamos el Desarrollo Web Full Stack Bootcaqmp, donde aprenderás todo lo necesario para ser un experto en este tema. Y lo mejor: ¡lo harás en tan solo unos meses! ¿Te animas a seguir aprendiendo con nosotros? ¡Matricúlate ya!
