¿Que es Destructuring?

Destructuring o Desctructuración es una característica de JavaScript agregada en la versión ES6 (2015) que nos permite extraer o “destructurar” datos desde estructuras como Arrays, Objetos, Maps o Sets, y crear de manera “sencilla” nuevas variables con los datos obtenidos.

Sintaxis

La sintaxis del destructuring es muy sencilla, por un lado tenemos las variables que vamos a crear y por el otro el objeto/colección de donde extraeremos las propiedades/elementos:

// para objetos:
let { propiedad1, propiedad2 } = objeto;

// para colecciones (lo veremos mas adelante):
const [ elemento0, elemento1 ] = coleccion;

Pensemos en un objeto simple y una tarea repetitiva:

const persona = {
    nombre: "Alejandro",
    apellido: "Nuñez",
    pais: "Argentina"
};

const nombre = persona.nombre;
const apellido = persona.apellido;

Es una tarea común almacenar alguna propiedad de un objeto para luego ser utilizada, podemos asignarla a una variable como en el ejemplo, o escribir “persona.nombre” cada vez que necesitemos ese valor.

Lo que destructuring permite es hacer este proceso de una manera mas simple y directa:

const { nombre, apellido } = persona;

Esta es la sintaxis de destructuración de un objeto, usamos las llaves “{}” al lado izquierdo de una asignación para indicar que estamos des-tructurando el valor de lo que está en el lado derecho.

Este código simplemente dice: Crea dos variables: “nombre” y “apellido”, luego toma desde el objeto “persona” las propiedades con igual nombre y asigna sus valores.

Pero no es la única sintaxis, también existe otra manera más personalizada de asignar las propiedades de un objeto a nuestras variables:

const { nombre: miNombre, apellido: miApellido } = persona;

console.log(nombre); // Error: nombre is not defined
console.log(miNombre); // Alejandro

El identificador “nombre” antes de los dos puntos (:) es la propiedad del objeto y el identificador “miNombre” después de los dos puntos es la variable creada.

Desestructuración de objetos anidados

Generalmente, los objetos suelen contener propiedades anidadas, con destructuring podemos acceder a sus propiedades de manera sencilla, esto puede ser utilizado de forma anidada tantas veces como quieras:

const persona = {
    nombre: "Alejandro",
    apellido: "Nuñez",
    links: {
        social: {
            twitter: "@aleja24",
            instagram: "alejandro123"
        },
        profesional: {
            email: "alejandro@gmail"
        }
    }
};

const { twitter } = persona.links.social;
// o tambien se puede
const { links: { social: { twitter, instagram }, profesional: { email } } } = persona;

console.log(twitter); // @aleja24
console.log(instagram); // alejandro123
console.log(email); // alejandro@gmail

Podemos destructurar propiedades anidadas del objeto en variables individuales, como también destructurar la propiedad contenedora de estas propiedades individuales, con el objeto persona del ejemplo anterior también podemos hacer:

const { links: { social, profesional } }  = persona;

console.log(social); // {twitter: '@aleja24', instagram: 'alejandro123'}
console.log(profesional); // {email: 'alejandro@gmail'}

Valores predeterminados

También podemos configurar valores predeterminados, cuando la propiedad exista o no.

const persona = {
    nombre: "Alejandro",
    apellido: "Nuñez",
    edad: 24
};

let { nombre, apellido, alias = '', edad: años = 18 } = persona;

console.log(alias); // ' '
console.log(años); // 24

En este ejemplo, asignamos una cadena vacía a la variable “alias” cuando el objeto persona no tiene la propiedad “alias”.

Además, asignamos el contenido de la propiedad "edad" a la variable "años" con el valor predeterminado 18 (la variable tomará  este valor en caso de que no exista la propiedad "edad" en el objeto).

Sin embargo, cuando el objeto persona tiene la propiedad alias, la asignación funciona como de costumbre:

const persona = {
    nombre: "Alejandro",
    apellido: "Nuñez",
    alias: "Ale"
};

let { nombre, apellido, alias = '', edad: años = 18 } = persona;

console.log(alias); // Ale
console.log(años); // 18

Destructurar objetos nulos

Una función puede devolver un objeto o un null en algunas situaciones, por ejemplo:

function getPersona(){
    return null;
}

Y si destructuramos el objeto

let { nombre, apellido } = getPersona();

console.log(nombre, apellido);

El código nos lanzará un TypeError:

Para evitar esto, podemos usar el operador OR (||) para devolver un objeto vacío:

let { nombre, apellido } = getPersona() || {};

console.log(nombre); // undefined
console.log(apellido); // undefined

Ahora no ocurrirá ningún error, y nombre y apellido serán undefined, ya que "{}" es un objeto vacio.

Destructurar Arrays

Destructuración no está limitada solo a objetos, también podemos destructurar Arrays.

const array = [ "Hola", "soy", "Alejandro" ];

Si quisiéramos obtener cada valor y almacenarlos en variables de manera tradicional haríamos lo siguiente:

const saludo = array[0];
const nombre = array[2];

Si usamos destructuración podemos hacerlo más simple, pero a diferencia de la destructuración de objetos, aqui debemos usar los corchetes “[]” del lado izquierdo de la asignación para indicar que estamos destructurando un array:

const [ saludo, , nombre ] = array;

console.log(saludo); // Hola
console.log(nombre); // Alejandro

Al destructurar un array hacemos uso de la posición del elemento en el arreglo para las asignaciones, así saludo es equivalente a array[0]. Esto también permite “saltarse” algún elemento del array que no nos interesa, simplemente escribimos un espacio. En vez de escribir el nombre de la variable que no nos interesa, en este caso la posición del array[1] , simplemente escribimos un espacio entre las comas correspondientes.

Sabiendo esto, también es posible lo siguiente:

const array = [ "Hola", "mi", "nombre", "es", "Alejandro" ];

const [ , , , , nombre ] = array;

console.log(nombre); // Alejandro

Aplicando Spread

A veces solo queremos asignar a variables algunos valores del arreglo y seguir contando con los valores restantes dentro de otro array. En este caso tenemos que usar el operador Spread (...) agregado en ES6.

const participantes = [ "Ale", "Lucio", "Santi", "Fede", "Yanet", "Juan"];

const [primero, segundo, tercero, ...resto] = participantes;

console.log(primero); // Ale
console.log(segundo); // Lucio
console.log(tercero); // Santi
console.log(resto); // ["Fede", "Yanet", "Juan"]

Conclusión

En resumen, la destructuración nos facilita extraer valores de un elemento de manera múltiple para almacenarlos en variables.