Desestructuración de objetos en JavaScript

Artículo original en Desestructuración de objetos en JavaScript

¿Qué es la desestructuración en JavaScript?

La desestructuración es una característica muy conveniente al desarrollar con 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:

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

Supongamos que tenemos el siguiente ejemplo de un objeto en 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:

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

// Resultado -> Alex

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

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:

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

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.

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.

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.

Y esto es todo. Espero que te pueda servir 😉