Desestructuración De Objetos 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.

En este artículo nos enfocaremos en la desestructuración de objetos, es una segunda parte del post anterior donde hablé sobre la desestructuración de arreglos, si no lo haz leído te recomiendo echarle un vistazo antes de continuar.

Sintaxis básica

let { var1, var2 } = { var1: …, var2… }

Tenemos un objeto existente en el lado derecho, que queremos dividir en variables. El lado izquierdo contiene un patrón para las propiedades correspondientes, en el caso simple eso es una lista de variables entre llaves  {...}

let producto = {
    id: '38469238976',
    nombre: 'café',
    precio: 2.50
};

let { id, nombre, precio } = producto;

console.log(id);  // imprime 38469238976
console.log(nombre); // imprime café
console.log(precio); // imprime 2.50

Las propiedades producto.id, producto.nombre y producto.precio, se asignan a las variables correspondientes, sin importar su orden, esto funciona también.

let { nombre, precio, id } = { id: '38469238976', nombre: 'café', precio: 2.50 };

Ahora bien, qué pasa si queremos asignar una propiedad en una variable con otro nombre, por ejemplo, guardar producto.precio en una variable llamada costo, podemos establecerla usando dos puntos.

let { id, nombre, precio : costo } = { id: '38469238976', nombre: 'café', precio: 2.50 };

console.log(costo) // imprime 2.50

Asignación separada de la declaración 

Una variable se le puede asignar su valor por desestructuración separandola de su declaración de la siguiente manera.

var a, b;

({ a, b } = { a: 1, b: 2 });

 Considerando los paréntesis (...) alrededor de la instrucción, de no utilizarlos javascript interpretará el lado izquierdo {a,b} como un bloque de código y no como un objeto literal.

 Valores por defecto

Al igual que los arreglos, podemos establecer valores por defecto utilizando el signo =

let { id, nombre, precio, activo = true } = { id: '38469238976', nombre: 'café', precio: 2.50 };

console.log(activo) //imprime true

Ahora si combinamos esto con lo aprendido, podemos hacer asignaciones más complejas, por ejemplo. 

let producto = {
    id: '38469238976',
    nombre: 'café',
    precio: 2.50,
    peso: 1.5,
    cantidad : 50
};

let { id, nombre, precio : costo = 0, cantidad = 0, unidad_peso = 'KG' } = producto;

console.log(id);  // imprime 38469238976
console.log(nombre); // imprime café
console.log(costo); // imprime 2.50
console.log(cantidad) // imprime 50
console.log(unidad_peso) //imprime KG

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 producto = {
    id: '38469238976',
    nombre: 'café',
    precio: 2.50
};

let { nombre, ...rest } = producto;

console.log(nombre) // imrprime café
console.log(rest) // imprime {id:'38469238976',precio:2.50}

Desestructuración anidada

Si un objeto está compuesto de otros objetos y matrices, podemos usar patrones más complejos del lado izquierdo para extraer partes más profundas.

let producto = {
    id: '38469238976',
    nombre: 'café',
    precio: 2.50,
    marcas:['nestcafe','juan valdez','fama de america'],
    caracteristicas:{
        peso:1.00,
        unidad:'KG'
    }
};

let {
    caracteristicas: {
        peso,
        unidad = 'KG'
    },
    marcas: [marca, ...resto_de_marcas], 
    nombre
} = producto;

console.log(marca) // imprime nescafe
console.log(resto_de_marcas) //imprime ["juan valdez", "fama de america"]
console.log(peso) //imprime 1

En la vida real lo habitual es que trabajemos con este tipo de objeto, donde nos toca aplicar desestructuraciones combinadas, extrayendo solo las propiedades que necesitamos.  

Trabajando con funciones

Hay ocasiones en que una función puede tener muchos parámetros, la mayoría de los cuales son opcionales, una mala práctica es crear una función así.

function showMenu(titulo = "lorem", ancho = 200, altura = 100, items = []) {
    // ...
}

El problema es cómo recordar el orden de los argumentos.  Otro problema es cómo llamar a una función cuando la mayoría de los parámetros están bien por defecto.

showMenu("Top Menu", undefined, undefined, ["Item1", "Item2"])

Esto es feo. Y se vuelve ilegible cuando tratamos con más parámetros.

¡La desestructuración viene al rescate!

Podemos pasar parámetros como un objeto, y la función los descompone inmediatamente en variables:

Mucho mejor no?

let options = {
    title: "Top Menu",
    items: ["Item1", "Item2"]
};

function showMenu({ title = "lorem", width = 200, height = 100, items = [] }) {
    console.log(`${title} ${width} ${height}`); //imprime Top Menu 200 100
    console.log(items); //imprime ["Item1", "Item2"]
}

showMenu(options);

De esta manera ya sabes lo suficiente para mapear y descomponer arreglos u objetos en listas de variables, cualquier pregunta escríbeme en los comentarios.