Atajos y propiedades computadas

Vas a crear objetos y a leer sus propiedades cientos de veces al día. Tantas, que JavaScript trae atajos para escribir menos en los dos casos: al crearlos y al recuperar lo que llevan dentro.

Atajo al crear un objeto#

Imagina que ya tienes unas variables y quieres usarlas como valores de las propiedades de un objeto. Fíjate en cuántas veces se repite cada nombre:

const name = 'Spidey'const universe = 42const spiderman = {  name: name,  universe: universe,  powers: ['web', 'invisibility', 'spider-sense']}

name: name, universe: universe… Suena a disco rayado. Si la propiedad y la variable se llaman igual, puedes omitir el valor y dejar solo el nombre.

const name = 'Spidey'const universe = 42const spiderman = {  name, // <- automáticamente asigna el valor de la variable name  universe, // <- automáticamente asigna el valor de la variable universe  powers: ['web', 'invisibility', 'spider-sense']}

Y si powers también estuviera en una variable fuera del objeto, todo cabría en una sola línea:

const name = 'Spidey'const universe = 42const powers = ['web', 'invisibility', 'spider-sense']const spiderman = { name, universe, powers }

Destructuración: el atajo al recuperar propiedades#

En la clase anterior vimos que una propiedad se recupera con la notación de corchetes o con la de punto:

const spiderman = {  name: 'Spidey',  universe: 42,  powers: ['web', 'invisibility', 'spider-sense']}console.log(spiderman['name']) // -> Spideyconsole.log(spiderman.name) // -> Spidey

Muchas veces no quieres solo leer el valor, sino guardarlo en una variable para usarlo más adelante. A mano sería algo así:

const universe = spiderman.universeconsole.log(universe) // -> 42const powers = spiderman['powers'][1]console.log(powers) // -> 'invisibility'

¿Te lía spiderman['powers'][1]? Sepáralo en partes. spiderman es el objeto. Accedes a su propiedad powers y, como es un array, coges su segundo elemento con [1]. Ahí está el valor: invisibility.

Funciona, pero otra vez estás repitiendo el nombre a ambos lados del =. El atajo para esto se llama desestructuración (destructuring en inglés): recupera el valor de una propiedad y lo guarda en una variable de una sola vez.

Solo hay una regla que tener en cuenta: la variable que se crea se llama igual que la propiedad que recuperas.

const { universe } = spidermanconsole.log(universe) // -> 42

Las llaves a la izquierda del = no crean un objeto. Le dicen a JavaScript: «de spiderman, sácame universe». Y puedes sacar tantas propiedades como quieras, separadas por comas.

const { universe, name, powers } = spidermanconsole.log(universe) // -> 42console.log(name) // -> 'Spidey'console.log(powers) // -> ['web', 'invisibility', 'spider-sense']

Renombrar variables y valores por defecto

¿Y si ya tienes una variable con ese nombre, o prefieres otro más claro? Puedes hacer que la variable tenga un nombre diferente al de la propiedad con dos puntos:

const { universe: universeNumber } = spidermanconsole.log(universeNumber) // -> 42

Recuperas la propiedad universe, pero la constante que se crea se llama universeNumber.

También puedes cubrirte las espaldas por si la propiedad no existe, asignándole un valor por defecto con el operador =:

const { name, isAvenger = false } = spidermanconsole.log(name) // -> 'Spidey'console.log(isAvenger) // -> false

Nuestro objeto no tenía la propiedad isAvenger. Sin el valor por defecto, la variable valdría undefined. Con él, vale false.

Objetos anidados y atajo

Ya sabes que un objeto puede llevar otro objeto dentro:

const spiderman = {  name: 'Spidey',  universe: 42,  powers: ['web', 'invisibility', 'spider-sense'],  partner: {    name: 'Mary Jane',    universe: 42,    powers: ['red hair', 'blue eyes']  }}

Para llegar a las propiedades del objeto anidado encadenas la notación de punto o la de corchetes:

console.log(spiderman.partner.name) // -> 'Mary Jane'console.log(spiderman['partner']['name']) // -> 'Mary Jane'

Si quieres guardar en una variable el name de partner, puedes desestructurar en dos pasos:

const { partner } = spidermanconst { name } = partnerconsole.log(name) // -> 'Mary Jane'

O hacerlo todo de un tirón:

const {  partner: { name }} = spidermanconsole.log(name) // -> 'Mary Jane'

Léelo así: del objeto spiderman extrae la propiedad partner y, de esta, extrae la propiedad name. Como resultado, solo se crea la variable name con el valor 'Mary Jane'. La variable partner no existe.