tutz

ES6 Destructuring: Guía completa

ES6 trajo muchos cambios positivos para los desarrolladores en JavaScript y una de las principales características que podemos resaltar es "Destructuring".

¿Qué es destructuring?

Es una nueva funcionalidad de JavaScript que nos permite romper una estructura compleja en partes más simples. Los objetos y arreglos son estructuras complejas en JavaScript.

Veamos un ejemplo, tenemos un objeto con los datos de una persona y queremos asignar cada propiedad en una variable.

const persona = {
  nombre: 'Karen',
  apellidos: 'Landeo',
  edad: 30,
};
const nombre = persona.nombre;
const apellidos = persona.apellidos;
const edad = persona.edad;

Lo que hemos hecho es crear tres variables y a cada una le hemos asignado una propiedad del objeto.

Con la nueva funcionalidad que agrego ES6, podemos lograr lo mismo pero en una sola linea de código.

const { nombre, apellido, edad } = persona;

Ahora que ya dimos un vistazo rápido a destructuring, veamos en más profundidad como funciona en objetos y arreglos.

Object destructuring

La destructuración de un objeto nos permite asignar valores de un objeto a variables. La forma más básica de usar esto es el ejemplo anterior que vimos.

const { nombre, apellido, edad } = persona;

En este ejemplo de asignación tenemos dos lados:

  • Izquierdo: son las variables a las cuales le vamos a pasar lo valores del objeto, en este caso nombre, apellido y edad. Ten en cuenta que estas variables deben estar dentro de llaves.
  • Derecho: aquí tiene que ir el objeto del cual vamos a usar los valores de sus respectivas propiedades, en este caso la variable nombre se le asignara el valor de la propiedad nombre de persona, a la variable apellido se le pasara el valor de la propiedad apellido y lo mismo para edad.
  • Ahora veamos otro caso de uso que puede servirte en tus proyectos, veamos este ejemplo:

    let nombre = 'Maria';
    let apellido = 'Gonzales';
    let edad = 38;
    const persona = {
      nombre: 'Karen',
      apellidos: 'Landeo',
      edad: 30,
    };

    Ahora supongamos que queremos cambiar los valores de las variables nombre, apellido y edad por los del objeto persona. En este caso tendríamos que hacer lo mismo que usamos en el primer ejemplo pero agregando paréntesis a toda la expresión.

    ({ nombre, apellido, edad } = persona);

    Con esto ya tendríamos asignados los valores de persona en las variables.

    Cambiar los nombres de las variables

    Seguro que una pregunta que tienes ahora mismo es, ¿qué pasa si quiero usar otros nombres de variables diferentes a las de las propiedad del objeto, por ejemplo en vez nombre, primerNombre o en vez de apellido, primerApellido?

    En ese caso podríamos seguir usando la misma sintaxis pero a cada variable que queremos cambiarle el nombre simplemente le seguimos de dos puntos y el nombre que queremos cambiar.

    Quedaría así:

    const { nombre: primerNombre, apellido: primerApellido, edad } = persona;

    Valores por defecto

    Ahora, ¿qué pasa si es que queremos asignar una variable que no tiene una propiedad correspondiente en el objeto? En ese caso la variable se asignara con el valor de undefined.

    Y en el caso que quisiéramos pasarle un valor por defecto simplemente le agregamos el operador igual (=) y el valor que queremos que tenga.

    const { nombre, apellido, edad, ciudad = 'Trujillo' } = persona;

    Con esto estamos asignando a la variable ciudad el valor de Trujillo.

    Objetos anidados

    Veamos un ejemplo de un objeto que contiene otro objeto y como podemos hacer destructuring en ese caso.

    const persona = {
      nombre: 'Karen',
      apellidos: 'Landeo',
      edad: 30,
      mascotas: {
        perro: 'Luna',
        gato: 'Garfield',
      },
    };

    Ahora vamos a asignar a la variable local perro y gato los valores del objeto mascotas que se encuentra en el objeto persona y lo hacemos de la siguiente manera:

    const {
      mascotas: { perro, gato },
    } = persona;

    Con esto ya tenemos las variables perro y gato con sus respectivos valores.

    Ten en cuenta que en este último caso no se esta creando la variable mascotas, ya que simplemente nos esta sirviendo para hacer referencia a la propiedad mascotas dentro del objeto persona.

    Array Destructuring

    Así como vimos con los objetos, podemos hacer algo parecido con los arreglos pero en vez de usar llaves, vamos a usar corchetes.

    const deportes = ['futbol', 'natación', 'tenis'];
    const [f, n, t] = deportes;
    console.log(f, n, t); // 'futbol', 'natación', 'tenis'

    En este ejemplo, vemos como podemos pasarle los valores del array a diferentes variables (f, n, t).

    Así como en los objetos, nosotros podemos pasarle valores por defecto, usando el signo = y el valor que queremos pasarle.

    const deportes = ['futbol'];
    const [f, n, t = 'tenis'] = deportes;
    console.log(f, n, t); // 'futbol', undefined, 'tenis'

    Otra de las cosas que vimos anteriormente fue cuando las variables ya estaban definidas.

    let f = 'futsal';
    let n = 'basketball';
    const deportes = (['voleibol', 'futbol'][(f, n)] = deportes);
    console.log(f, n); // 'voleibol', futbol

    A diferencia de los objetos aquí no necesitamos los paréntesis para cambiar los valores de las variables.

    Omitir valores

    ¿Qué pasa si queremos asignar solo el tercer item del arreglo? En ese caso simplemente separamos por comas los dos primeros.

    Se vería así:

    const deportes = ['voleibol', 'futbol', 'tenis'];
    const [, , t] = deportes;
    console.log(t); // 'tenis'

    Como no queremos asignar los dos primeros items del arreglo, lo único que hacemos es separar esas posiciones con comas.

    Intercambio de variables

    Un caso de uso muy util en los arreglos es cuando queremos intercambiar los valores de las variables.

    let longitud = 0.2321312;
    let latitud = ((0.7420317)[(latitud, longitud)] = [longitud, latitud]);
    console.log(latitud, longitud); // 0.2321312, 0.7420317

    En este caso hemos intercambiado los valores de longitud y latitud de una manera muy fácil y clara.

    Arreglos anidados

    Al igual que los objetos, hacemos algo similar, mira este ejemplo:

    const deportes = [['futbol', 'voleibol'], 'natación', ['golf', 'tenis']];
    const [[f, v], n, [g, t]] = deportes;
    console.log(f, v, n, g, t); // 'futbol', 'voleibol', 'natación', 'golf', 'tenis'

    Rest items

    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.

    Así podríamos ver en funcionamiento el operador spread:

    const deportes = ['futbol', 'voleibol', 'natación', 'golf', 'tenis'];
    const [f, v, ...restantes] = deportes;
    console.log(restantes); // ['natación', 'golf', 'tenis']

    Conclusión

    En este artículo hemos aprendido paso a paso a como usar esta nueva funcionalidad de ES6. Te recomiendo que comiences a usarlo en tus proyectos ya sea para nuevas funcionalidades o refactorizando el código que ya tienes.