Introducción al Array Destructuring en JavaScript

Introducción al Array Destructuring en JavaScript

3 minutos de lectura

Conceptos básicos

El concepto de destructuring (desestructuración en español) es algo que vino con ES2015 y que no aplica sólo a arrays, sino también a objetos, aunque en este artículo nos centraremos en el array destructuring. El array destructuring es un método simplificado de extraer múltiples propiedades de un array tomando la estructura y deconstruyéndola a través de asignaciones usando una sintaxis similar a los arrays literales. El destructuring de array se basa en las posiciones para hacer la asignación.

const [one, two, three] = [1,2,3]
Ejemplo de destructuring
>
one
1
>
two
2
>
three
3
>

En caso de que vayas a hacer destructuring de una posición para la que el array no tiene ningún valor asignado devolvería undefined:

const [one, two, three, four] = [1,2,3]
Ejemplo de destructuring
>
one
1
>
two
2
>
three
3
>
four
undefined
>

Estamos hablando de destructuring de array, pero realmente se puede aplicar a cualquier iterable, como por ejemplo una cadena de texto o un Set.

const [firstLetter] = 'Hello World!'
const [x, y, z] = new Set([1,1,1,2,2,3])
Ejemplo de destructuring de un iterable
>
firstLetter
"H"
>
x
1
>
y
2
>
z
3
>

El destructuring también se puede hacer con arrays anidados:

const [[one, two], [three, four], [five, six]] = [[1,2], [3,4], [5,6]]
Ejemplo de destructuring de un array anidado
>
one
1
>
two
2
>
three
3
>
four
4
>
five
5
>
six
6
>

Valores por defecto

En caso de que no exista la posición de la que vamos a hacer destructuring podemos asignar un valor por defecto y así poder evitar cualquier resultado inesperado al recibir undefined:

const [one = 0, two = 0, three = 0, four = 0] = [1,2,3]
Ejemplo valor por defecto en destructuring
>
one
1
>
two
2
>
three
3
>
four
0
>
const total = one + two + three + four
6
>

Si no tuviéramos esa asignación por defecto el resultado de total hubiera sido diferente:

const [one, two, three, four] = [1,2,3]
Ejemplo valor por defecto en destructuring
>
one
1
>
two
2
>
three
3
>
four
undefined
>
const total = one + two + three + four
NaN
>

También podemos hacer que el valor por defecto sea alguno de los valores que de los que ya hayamos hecho destructuring:

const [one, two, three, four = one] = [1,2,3]
Ejemplo valor por defecto en destructuring
>
one
1
>
two
2
>
three
3
>
four
1
>
const total = one + two + three + four
7
>

Ignorando valores

En caso de que existe algún valor que no te interese te lo puedes saltar y JavaScript no se quejará:

const [one, , three] = [1,2,3]
Ejemplo de destructuring ignorando valores
>
one
1
>
three
3
>

Como vemos no hay ningún error, pero yo prefiero usar las barras bajas para declarar variables que no se van a usar. Es una práctica común y aceptada que mejora la legibilidad, ya que a primera vista cuesta ver que te estás saltando un elemento.

const [one, _, three] = [1,2,3]
Ejemplo de destructuring ignorando valores
>
one
1
>
three
3
>

Uso con funciones

Otra forma de usarlo es haciendo destructuring directamente en los parámetros de una función. Esto lo hago mucho cuando uso Object.entries, ya que me permite iterar cómodamente por las claves y los valores de un objeto.

function buildQueryParams(data) {
  return Object.entries(data)
    .reduce(
      (query, [key, value], index) => `${query}${index > 0 ? '&' : '' }${key}=${value}`,
      '?'
    )
    .replaceAll(/\s/g,'%20')
}
Ejemplo de destructuring en los parámetros de una función
>
buildQueryParams({name:'Ulises',age:'32',position:'JavaScript Freak'})
TypeError: Object.entries(...).reduce(...).replaceAll is not a function
>

Esto es sólo un ejemplo para mostrarte cómo podrías usar el destructuring en los parámetros de una función. Si realmente necesitas generar los query params para tu aplicación usa URLSearchParams.

Rest parameters y spread operator

El operador elipsis (los famosos tres puntitos: …) entró en JavaScript con ES2015 y significa una cosa u otra dependiendo de si usa para la declaración o la asignación de una variable. Cuando lo usamos para declarar variables o parámetros de una función se conoce como rest parameters y cuando se usa para asignar estamos hablando del spread operator. No se usa sólo con array destructuring, sino también con object destructuring, pero como he dicho anteriormente, en este artículo nos centraremos en el array destructuring.

Los rest parameters se usan para agrupar todos los elementos restantes del array en una variable. Es como decir quiero esto, aquello y lo otro y el resto me lo pones en un tupper para llevar.

const [monday, ...restOfTheWeek] = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']
Ejemplo de rest parameters
>
monday
"Lunes"
>
restOfTheWeek
Array [ "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo", ]
>

Es importante tener en cuenta que la variable en la que hagamos uso del operador elipsis debe ser la última, ya que si no lo es nos lanzará un bonito SyntaxError.

Ejemplo de error de sintaxis con rest parameters
>
const [monday, ...restOfTheWeek, sunday] = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']
SyntaxError: Rest element must be last element
>

Por otro lado, el spread operator hace todo lo contrario. Si rest parameters agrupa, el spread operator divide. Esto puede ser útil para combinar dos arrays por ejemplo. También se suele usar mucho para clonar arrays, ya que al usarlo genera un nuevo array de cero, en vez de hacer referencias a memoria:

const workdays = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes']
const weekend = ['Sábado', 'Domingo']
const week = [...workdays, ...weekend]
Ejemplo de spread operator
>
week
Array [ "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo", ]
>
week[0] = 'Viernes'
"Viernes"
>
week[0]
"Viernes"
>
workdays[0]
"Lunes"
>

Si te ayuda a verlo mejor, también podemos decir que es rest operator cuando está a la izquierda del = en la asignación de una variable y spread operator cuando está a la derecha. Sin embargo, esto no es del todo cierto, ya que el operador elipsis se puede usar en los parámetros de una función (actuando como rest parameter) o al devolver un valor (actuando como spread operator).

function add(...numbers) {
  return numbers.reduce((total, number) => total + number)
}
Ejemplo de rest parameter en una función
>
add(1,1)
2
>
add(1,2,3,4,5)
15
>

En este ejemplo lo que hace el operador elipsis es actuar como rest parameter agrupando todos los parámetros que nos vengan por función en un array, permitiéndonos tener una función cuyo número de parámetros es variable. En este otro ejemplo vemos como usando el operador elipsis al devolver un valor en una función:

function reverse(arrayOfThings) {
  return arrayOfThings.reduce((result, element) => [element, ...result], [])
}
Ejemplo de spread operator en una función
>
const fromFiveToOne = reverse([1,2,3,4,5])
Array [ 5, 4, 3, 2, 1, ]
>

Conclusión

El array destructuring es una funcionalidad muy potente en JavaScript, ya que permite gestionar arrays de una manera más cómoda y legible. Además, ha sido ampliamente acogida por la comunidad, ya que su uso sólo aporta ventajas. Espero haberte ayudado a comprender mejor esta característica de JavaScript.

author
author

Hola! Soy Ulises Santana

Full Stack Developer con JavaScript como lengua materna y la web como patria. Trasteando con tecnologías desde las Islas Canarias 🏝️

  • Twitter
    https://twitter.com/ulisesantana
  • Github
    https://github.com/ulisesantana
  • Curriculum Vitae
    /cv
Comparte este artículo:

Artículos relacionados

  • Twitter
    https://twitter.com/ulisesantana
  • Github
    https://github.com/ulisesantana
  • Curriculum Vitae
    /cv

Copyright © 2022