¿Qué es la desestructuración?

La especificación ECMAscript 6 (ES6 o ECMAscript 2015) 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 en la nueva sintaxis:

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

Desestructurando objetos

La sintaxis para desestructurar objetos es muy similar. Desestructurar objetos te permite asignar los valores de las propiedades a variables:

const tv = { size: 55, res: 2160, brand: 'Samsung', }; const { brand: marca, res } = tv; console.log(marca); // 'Samsung' console.log(res); // 2160

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.