ES6: Destructuración de objetos en JavaScript
Tags: javascript, es6, spanish, webdev
Published: 2020-09-03 23:50:49

## **¿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**
```js
const {key_1, key_2, ... key_n} = objeto;
```

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: 

```js
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"
```

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: 

```js
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"
```

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:

```js
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"

```

## **Destructura solo lo que necesitas**
No es necesario destructurar el objeto en su totalidad, puedes destructurar solo los valores que necesites:

```js
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
```

## **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:

```js
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
```

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:

```js
const {key_1, key_2:new_name} = object; 
```

Por ejemplo:

```js
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"
```

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

```js
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"
```
> *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`: 

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

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

## **Es posible renombrar una `key` y asignarle un valor por defecto**

```js
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"
```

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

```js
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"
```

## **Operador REST en destructuración de objetos**
El operador REST (...) puede ser usado tranquilamente: 

```js
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" }
```

## **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**
* https://carlosescorche.com/blog/desestructuracion-de-objetos-en-javascript
* http://www.etnassoft.com/2016/07/04/desestructuracion-en-javascript-parte-1/
* https://medium.com/@insomniocode/destructuring-en-javascript-66b698b90691 
* https://www.alexmedina.net/desestructuracion-de-objetos-en-javascript/ 

![end](https://media.giphy.com/media/12xSrwKxHxB3BS/giphy.gif)