Array Destructuring en JavaScript

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]

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]

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])

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

const [[one, two], [three, four], [five, six]] = [[1,2], [3,4], [5,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]

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

const [one, two, three, four] = [1,2,3]

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]

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]

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]

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')
}

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']

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.

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]

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)
}

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], [])
}

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.