DEV Community

Cover image for ES6: Destructuración de objetos en JavaScript
Cristian Fernando
Cristian Fernando

Posted on • Edited on

ES6: Destructuración de objetos en JavaScript

#javascript #es6 #spanish #webdev

¿Qué es destructuración?

La desestructuración es una característica bastante poderosa que nos permite separar keys o llaves de un objeto en variables independientes, ello para mejorar la legibilidad y escribir un código más compacto y simplificado. Dicha característica está presente desde la especificación ES6 del lenguaje.

Sintaxis básica 

const {key_1, key_2, ... key_n} = objeto;
Enter fullscreen mode Exit fullscreen mode

Para una mejor comprensión de lo anterior mencionado vamos a analizar algunos ejemplos:

Imaginemos que contamos con un objeto literal y necesitamos imprimir su contenido, tendríamos que hacer algo como lo siguiente:

const superheroe = {
  nombre: "Capitan América",
  edad: 30,
  peso: 100,
  empresa: "Marvel"
};

console.log(`${superheroe.nombre} tiene ${superheroe.edad} años, pesa ${superheroe.peso} kg y es de ${superheroe.empresa}`)
//salida: "Capitan América tiene 30 años, pesa 100 kg y es de Marvel"
Enter fullscreen mode Exit fullscreen mode

Como puedes apreciar, el ejemplo funciona bien, pero es poco mantenible y bastante redundante, es acá donde la destructuración de objetos puede ser implementada:

const superheroe = {
  nombre: "Capitan América",
  edad: 30,
  peso: 100,
  empresa: "Marvel"
};

const {nombre, edad, peso, empresa} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${empresa}`);
//salida: "Capitan América tiene 30 años, pesa 100 kg y es de Marvel"
Enter fullscreen mode Exit fullscreen mode

Así de fácil podríamos re escribir el código usando destructuración.

A continuación, se nombraran algunas características importantes que se deben tener en cuenta a la hora de desestructurar un objeto:

La destructuración no se realiza de manera secuencial ordenada, sino por nombre de key

Probablemente esta sea la peculiaridad a tomar en cuenta más importante ya que puede generar muchas confusiones. Al momento de destructurar un objeto no importa el orden de las variables independientes, pero si interesa que tanto el key del objeto como la variable independiente se llamen de la misma manera. Por ejemplo:

const perro = {
  nombre: "Fufy",
  raza: "Pequines",
  sexo: "hembra",
  edad: 5
};

const {sexo, nombre, edad, raza} = perro;

console.log(`${nombre} es una ${raza} ${sexo} de ${edad} años`)
//salida: "Fufy es una Pequines hembra de 5 años"
Enter fullscreen mode Exit fullscreen mode

Destructura solo lo que necesitas

No es necesario destructurar el objeto en su totalidad, puedes destructurar solo los valores que necesites:

const persona = {
  nombre: "Andrea",
  apellido: "Gonzales",
  edad: 15,
  amigos: ["Roberto", "Ana", "Pedro"],
  direccion: {
    calle:25,
    zona:"Los Olmos",
    puerta: 25
  },
  mascota: false
};

const {nombre, apellido, mascota} = persona;
console.log(nombre, apellido, mascota);
//salida: Andrea, Gonzales, false
Enter fullscreen mode Exit fullscreen mode

Es posible renombrar las keys del objeto

Al momento de realizar una destructuración es importante que el nombre de la key se igual al de la variable independiente.
Si esto no se cumple, obtendremos un error, por ejemplo:

const superheroe = {
  nombre: "Capitan América",
  edad: 30,
  peso: 100,
  empresa: "Marvel"
};

const {nombre, edad, peso, marca} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//Uncaught SyntaxError: redeclaration of const superheroe
Enter fullscreen mode Exit fullscreen mode

Este error de debe a que en el objeto tenemos la key empresa pero en la destructuración usamos marca.

Nuevamente nos damos cuenta que la destructuración no se realiza por orden de keys sino por nombre de variables.

Entonces, ¿qué sucede si deseamos personalizar el nombre de la key? Esto es posible y muy sencillo de realizar, tenemos que usar una sintaxis como la siguiente:

const {key_1, key_2:new_name} = object;
Enter fullscreen mode Exit fullscreen mode

Por ejemplo:

const superheroe = {
  nombre: "Capitan América",
  edad: 30,
  peso: 100,
  empresa: "Marvel"
};

const {nombre, edad, peso, empresa:marca} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Capitan América tiene 30 años, pesa 100 kg y es de Marvel"
Enter fullscreen mode Exit fullscreen mode

Valores por defecto

La destructuración acepta valores por defecto sin ningún problema:

const superheroe = {
  edad: 30,
  peso: 100,
  empresa: "Marvel"
};

const {nombre = "Señor misterioso", edad, peso, empresa:marca} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Señor misterioso tiene 30 años, pesa 100 kg y es de Marvel"
Enter fullscreen mode Exit fullscreen mode

El objeto superheroe no cuenta con la llave nombre pero en la destructuración creamos la llave y además un valor por defecto.

¿Qué sucede si destructuramos una llave inexistente?

Si intentamos destructurar una llave que no existe, el valor de retorno es undefined:

const superheroe = {
  nombre:"Batman",
  edad: 40,
  peso: 150,
  empresa: "DC"
};

const {nombre, edad, peso, empresa, enemigos} = superheroe;
console.info(enemigos);
//salida: undefined
Enter fullscreen mode Exit fullscreen mode

Es posible renombrar una key y asignarle un valor por defecto 

const superheroe = {
  nombre:"Señor Patata",
  edad: 19,
  peso: 10,
};

const {nombre, edad, peso, empresa:marca = "Independiente"} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Señor Patata tiene 19 años, pesa 10 kg y es de Independiente"
Enter fullscreen mode Exit fullscreen mode

En caso de que en el objeto existiese la propiedad empresa el valor por defecto no se toma en cuenta:

const superheroe = {
  nombre:"Señor Patata",
  edad: 19,
  peso: 10,
  empresa:"Marvel"
};

const {nombre, edad, peso, empresa:marca = "Independiente"} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Señor Patata tiene 19 años, pesa 10 kg y es de Marvel"
Enter fullscreen mode Exit fullscreen mode

Operador REST en destructuración de objetos

El operador REST (...) puede ser usado tranquilamente:

const superheroe = {
  nombre:"Señor Patata",
  edad: 19,
  peso: 10,
  empresa:"Marvel"
};

const {nombre, ...parametros} = superheroe;
console.log(nombre, parametros);
//salida: Señor Patata Object { edad: 19, peso: 10, empresa: "Marvel" }
Enter fullscreen mode Exit fullscreen mode

Conclusiones

  • La destructuración nos permite dividir las propiedades de un objeto en variables independientes para mejorar la legibilidad del código.
  • Bastante útil en frameworks y librerías frondend como React.js.
  • La destructuración no se basa en el orden de las propiedades, sino el el nombre de las llaves del objeto en cuestión.
  • Es posible escribir una destructuración con las llaves desordenadas.
  • Se pueden personalizar el nombre de las llaves usando la notación de dos puntos (key_original : key_nueva).
  • Si intentamos acceder a una llave inexistente el valor de retorno es undefined.
  • Es posible usar valores por defecto.
  • Es posible usar valores por defecto y renombramiento del nombre de las variables.
  • El uso de los parámetros de tipo REST es permitido.

Referencias

end

Top comments (0)

Read next

ramya_srim profile image

Closures in JS🤯

Ramya Sri M -

aaravjoshi profile image

7 Essential Accessibility Testing Tools for Web Developers: Ensure Inclusive Design

Aarav Joshi -

joaoalissonsilva profile image

The New React Native Architecture 🚀

João Alisson -

abhivyaktii profile image

🌟 NestJS + Databases: Making Snake Case Seamless!🐍

Abhinav -