En este artículo voy a hablar de lo que en ECMAScript 6 se conoce como Destructuring assignment. Esta nueva sintaxis te ayuda a extraer elementos de arrays u objetos en variables, con el objetivo de facilitar su uso. Vamos a ver un ejemplo con arrays y otro con objetos para que veas cómo funciona.

Desestructurando un array

Imagínate que tenemos un array con un conjunto de valores. Hasta ahora, la forma que teníamos de recuperar sus valores era moviéndonos por el índice del mismo, ya fuera de forma manual o a través de un iterador.

var animals = ['dog', 'cat', 'fish', 'horse', 'lion', 'bird'];
console.log(animals[0]); //dog
console.log(animals[4]); //lion
console.log(animals[2]); //fish 

Ahora, con la desestructuración, tenemos otra forma de recuperar estos valores y asignarlos directamente a variables:

var animals = ['dog', 'cat', 'fish', 'horse', 'lion', 'bird'];
var [dog, , , , lion, ] = animals;
console.log(dog); //dog
console.log(lion); //lion 

En una sola línea asignamos los valores que necesitamos del array en variables, utilizando tantas comas como sean necesarias hasta llegar a su posición dentro del array. Al final es una forma acortada de escribir lo anterior.

Otro escenario en este sentido, realmente elegante, es trabajar en conjunto con la función split:

var [firstName, lastName] = 'Gisela Torres'.split(' ');
console.log(firstName); //Gisela
console.log(lastName); //Torres 

Desestructurando un objeto

El otro ejemplo tiene que ver con la desestructuración de los objetos. En el caso de los arrays es necesario tener en cuenta la posición que tiene el elemento dentro del array, pero aquí sólo nos basta con saber el nombre de la propiedad que queremos extraer. Por ejemplo:

var tvShow = {
    title: 'El Embarcadero',
    seasons: 2,
    watched: true
};
var { title, watched } = tvShow;
console.log(title); //El embarcadero
console.log(watched); //true

Otra cosa chula que se puede hacer es pasar el objecto completo a una función pero ya en la definición de la misma extraer únicamente las propiedades con las que quiero trabajar, lo cual nos reduce unas cuantas líneas de código:

var tvShow = {
    title: 'El Embarcadero',
    seasons: 2,
    watched: true
};
function watching({ title, seasons }) {
    console.log(`I am watching ${title}. ${seasons} seasons of entertainment!`);
}
watching(tvShow);

¡Saludos!