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.