Desestructuración de arrays en

Acerca de Desestructuración de arrays

La asignación por desestructuración de un array es una forma concisa de extraer valores de un array. Su sintaxis es similar a la de una expresión de array literal, pero en el lado izquierdo de la asignación en lugar 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 por 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 valores al asignar

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

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

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Descartar valores

Tampoco es necesario usar todos los valores en la asignación.

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 que sobren 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 un array 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