¿Qué es la desestructuración?

La especificación ECMAscript 6 (ES6 o ECMAscript 2015) es la última versión del estándar e introdujo varias herramientas y nuevas opciones de sintaxis, entre ellas una que simplifica la obtención de valores dentro de arreglos y objetos. Llamamos a esta sintaxis “desestructuración”.

Desestructurando arreglos e iterables

Sin la sintaxis de desestructuración, podemos acceder a los primeros tres elementos de un arreglo de la siguiente manera:

const colores = ['Rojo', 'Verde', 'Azul'];

const rojo = colores[0];
const verde = colores[1];
const azul = colores[2];

El equivalente al código anterior en la nueva sintaxis se vuelve más conciso y legible:

const colores = ['Rojo', 'Verde', 'Azul'];
const [rojo, verde, azul] = colores;

¿Mucho mejor? Eso dependerá de cada quien, pero primero expliquemos que esta ocurriendo. En pocas palabras esta sintaxis asigna de manera automática el valor correspondiente del indice a una variable (No olvidemos que en Javascript los arreglos son objetos). Puedes decidir asignar el valor a una variable existente o declarar nuevas al añadir var, let, o const al inicio de la declaración.

La sintaxis también funciona con arreglos anidados e incluso puede ser combinada con la sintaxis extendida (Spread Syntaxis):

const arreglo = ['carro', ['moto', 'avión'], ['barco']];

const [carro, [moto, avion], [barco]] = arreglo;
console.log(carro); // 'carro'
console.log(avion); // 'avión'

const [carro, ...vehiculos] = arreglo;
console.log(vehiculos); // ['moto', 'avión', 'barco']

Claro que no todo es perfecto, el mayor inconveniente (en mi opinión) es al saltar o ignorar elementos del arreglo, debes conocer el indice exacto en que se encuentra el valor que deseas y marcarlo en la sintaxis:

const colores = ['Rojo', 'Verde', 'Azul'];
const [,,azul] = colores;
console.log(azul); // 'Azul'

Si recordamos que en realidad los arreglos en Javascript son objetos, podemos hacer un pequeño “truco” para optimizar la obtención de elementos específicos del arreglo

const colores = ['Rojo', 'Verde', 'Azul'];
const {[1]: verde } = colores;

console.log(verde); // 'Verde'

/* También anidado */
const colores = {
	cmyk: ['Cian', 'Magenta', 'Amarillo', 'Negro'],
	rgb: ['Rojo', 'Verde', 'Azul'],
};
const { rgb: { [1]: verde }, rgb } = colores;

console.log(verde); // 'Verde'
console.log(rgb); // ['Rojo', 'Verde', 'Azul']

Desestructurando objetos

La sintaxis para desestructurar objetos es muy similar a la que hemos manejado en los arreglos. Y a pesar de que obtener información o valores de un objeto suele ser sencillo, esta sintaxis puede ser de ayuda.

Desestructurar objetos te permite asignar los valores de las propiedades a variables. Especificas la propiedad deseada, seguida de la variable a la que sera asignada. Se ve de la siguiente forma:

const tv = {
	size: 55,
	res: 2160,
	brand: 'Samsung',
};

const { brand: marca, res } = tv;

console.log(marca); // 'Samsung'
console.log(res); // 2160

De igual forma, esta sintaxis funciona sin problemas aun con objetos anidados:

const tv = {
	size: 55,
	res: 2160,
	inputs: {
		hdmi: 2,
		vga: 1,
		ethernet: 1,
		usb: 2,
	},
	brand: 'Samsung',
};

const { inputs: { hdmi, ethernet } } = tv;

console.log(hdmi); // 2
console.log(ethernet); // 1

Conclusión

La sintaxis de desestructuración ayuda a escribir código más limpio, y en conjunto con otras de las funciones de ES6 se vuelve aún más poderoso. Los casos de uso y que tanta ventaja brinden a tu aplicación dependerán mucho de cada caso especifico, pero no se puede negar que es una herramienta que vale la pena conocer.

Si quieren leer más acerca de este tema, pueden entrar al siguiente enlace.
Más sobre ECMAScript6 en el siguiente enlace.