Desestructuración de arrays en

Acerca de Desestructuración de arrays

La asignación por desestructuración de arrays es una forma concisa de extraer valores de un array. Su sintaxis es similar a la de una expresión de literal de array, pero en el lado izquierdo de la asignación en vez del derecho.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

Reasignación

Como las variables se asignan a los valores del array según su posición, la sintaxis de desestructuración se puede usar para asignar o reasignar varias variables en una sola expresión.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

Esto también funciona con arrays anidados.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

Omitir la asignación

La sintaxis permite omitir valores al hacer la asignación, por ejemplo para ignorar posiciones específicas del array. En el ejemplo de abajo, imagina que tenemos una función getUserInfo que devuelve un array con el nombre, el apellido y la dirección de una persona.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Descartar valores

Tampoco es obligatorio que la asignación use todos los valores.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Tomar más valores de los disponibles

Incluso es posible extraer más valores de los que contiene el array; a las variables sobrantes se les asignará undefined. Esto puede ser útil cuando no se sabe de antemano cuántos valores habrá.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Valores predeterminados

La asignación por desestructuración de arrays puede proporcionar valores predeterminados en caso de que no haya ninguno en el array de origen.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

Conceptos relacionados

object-destructuring rest-and-spread