Desestructuración de objetos en JavaScript
Tags: javascript, desestructuracion, objetos, destructuring
Published: 2021-02-14 19:23:22

> Artículo original en [Desestructuración de objetos en JavaScript](https://alextomas.com/blog/desestructurar-en-javascript)

## ¿Qué es la desestructuración en JavaScript?

La **desestructuración** es una característica muy conveniente al desarrollar con [JavaScript](https://alextomas.com/blog/category/javascript), es una expresión que nos *permite desempaquetar valores de arrays u objetos en grupos de variables*, permitiéndonos `simplificar y crear código más legible`.


### Desestructuración de objetos

La sintaxis básica sería:

```javascript
let { variable1, variable2 } = { variable1: ..., variable2: ... }
```

Supongamos que tenemos el siguiente ejemplo de un objeto en JavaScript:

```javascript
const usuario = {
    id: 123,
    nombre: 'Alex',
    apellidos: 'Tomás',
    url: 'https://alextomas.com'
};
```

Antiguamente, para obtener la una propiedad del objeto `usuario` haríamos algo como:

```javascript
const nombre = usuario.nombre;
console.log(nombre);

// Resultado -> Alex
```

Eso no está mal, pero podemos dejarlo más limpio con la **desestructuración**.

```javascript
const usuario = {
    id: 123,
    nombre: 'Alex',
    apellidos: 'Tomás',
    url: 'https://alextomas.com'
};
const { id, nombre, apellidos, url } = usuario;

console.log(id, nombre, apellidos, url);

// Resultado -> 123 Alex Tomás https://alextomas.com
```

Las propiedades `usuario.id`, `usuario.nombre`, `usuario.apellidos` y `usuario.url`, se asignan a las variables correspondientes, **sin importar su orden**.

Si quieres **cambiar el nombre de las variables** cuando las asignas mediante desestructuración, también puedes hacerlo de la siguiente forma:

```javascript
const moto = {
    tipo: 'Race',
    modelo: 'Yamaha MT09',
    matriculacion: 2018
};
const { tipo: type, modelo: model, matriculacion: year } = moto;

console.log(type, model, year);

// Resultado -> "Race" "Yamaha MT09" 2018
```

Así de sencillo.

#### Valores por defecto

```javascript
const television = {
    pulgadas: 52,
    fabricante: 'LG'
};

const { pulgadas, fabricante, smart = true } = television;
console.log(pulgadas, fabricante, smart);

// Resultado -> 52 "LG" true
```

#### El resto

En caso que el objeto tenga más propiedades que el número de variables que requerimos crear, podemos guardar el resto de la información en un último parámetro utilizando tres puntos.

```javascript
let mascota = {
    raza: 'perro',
    nombre: 'Max',
    edad: 8.5
};

let { raza, ...rest } = mascota;

console.log(raza)
console.log(rest)

// Resultado:

// "perro"
// Object {
//   edad: 8.5,
//   nombre: "Max"
// }
```

#### Desestructuración anidada

Puedes tener el caso de que un objeto está compuesto de otros objetos y matrices, así que también podemos usar patrones más complejos del lado izquierdo para extraer partes más profundas.

```javascript
let automovil = {
    tipo: 'coche',
    marca: 'Peugeot',
    caracteristicas: {
        cv: 115,
        carburante: 'diesel'
    }
};

const { marca, caracteristicas: { cv }} = automovil;
console.log(marca, cv)

// Resultado -> "Peugeot" 115
```

Puedes ver el código funcionando en [este Codepen](https://codepen.io/alextomas80/pen/eYBgqBJ).

[![¿Me invitas a un café?](https://alextomas.com/img/ko-fi.png)](https://ko-fi.com/alextomas#checkoutModal)

Y esto es todo. Espero que te pueda servir 😉