Desestructuración de Arreglos en JavaScript

javascript

🎁 Desempacando Valores

Tradicionalmente, para obtener valores de un arreglo y guardarlos en variables, haríamos algo así:

let punto = [10, 20, 30];


let x = punto[0];
let y = punto[1];
let z = punto[2];


console.log(x, y, z); // Muestra 10 20 30

La desestructuración de arreglos nos ofrece una sintaxis mucho más limpia para lograr lo mismo:

let puntoCoords = [10, 20, 30];


// Desestructuración
let [coordX, coordY, coordZ] = puntoCoords;


console.log(coordX, coordY, coordZ); // Muestra 10 20 30

Usamos corchetes [] en el lado izquierdo de la asignación (let, const, var) y colocamos los nombres de las variables que queremos crear. JavaScript asignará los elementos del arreglo puntoCoords a estas variables en orden.

✨ Características Clave

1. Declaración y Asignación Separadas

Podemos declarar las variables primero y luego desestructurar (aunque es menos común):

let nombre, apellido;
let persona = ["Ana", "García"];


[nombre, apellido] = persona;


console.log(nombre); // Muestra "Ana"
console.log(apellido); // Muestra "García"

2. Saltar Elementos

Si no necesitamos un elemento intermedio, podemos simplemente omitir su nombre usando una coma , como marcador de posición:

let colores = ["Rojo", "Verde", "Azul", "Amarillo"];


let [primerColor, , tercerColor] = colores; // Saltamos el segundo color ("Verde")


console.log(primerColor); // Muestra "Rojo"
console.log(tercerColor); // Muestra "Azul"

3. Valores por Defecto

Podemos asignar un valor por defecto a una variable en caso de que el elemento correspondiente en el arreglo no exista (sea undefined).

let configuracion = ["Modo Oscuro"];


let [tema = "Modo Claro", fontSize = 16] = configuracion;


console.log(tema); // Muestra "Modo Oscuro" (valor del arreglo)
console.log(fontSize); // Muestra 16 (valor por defecto, no había elemento en índice 1)


let otraConfig = [undefined, 12];
let [otroTema = "Claro", otroSize = 16] = otraConfig;


console.log(otroTema); // Muestra "Claro" (el elemento era undefined, se usa el defecto)
console.log(otroSize); // Muestra 12 (valor del arreglo)
INFO

💡 Los valores por defecto solo se usan si el elemento del arreglo es undefined o si no existe.

4. El Parámetro Rest (...)

Podemos usar el operador rest (...) al final de la desestructuración para agrupar todos los elementos restantes del arreglo en una nueva variable (que será un arreglo).

let numeros = [1, 2, 3, 4, 5, 6];


let [primero, segundo, ...restoDeNumeros] = numeros;


console.log(primero); // Muestra 1
console.log(segundo); // Muestra 2
console.log(restoDeNumeros); // Muestra [3, 4, 5, 6]

Esto es muy útil para separar el inicio de un arreglo del resto.

AVISO

⚠️ El parámetro rest (...) solo puede usarse como el último elemento en la desestructuración del arreglo.

5. Intercambiar Variables

La desestructuración ofrece una forma muy elegante de intercambiar los valores de dos variables sin necesidad de una variable temporal:

let a = 5;
let b = 10;


[a, b] = [b, a]; // ¡Magia!


console.log(a); // Muestra 10
console.log(b); // Muestra 5

6. Desestructuración Anidada

Podemos desestructurar arreglos que están dentro de otros arreglos:

let datosAnidados = ["Usuario1", ["Admin", "Editor"]];


let [usuario, [rol1, rol2]] = datosAnidados;


console.log(usuario); // Muestra "Usuario1"
console.log(rol1); // Muestra "Admin"
console.log(rol2); // Muestra "Editor"
☝️🤓
🏋️‍♂️ Ejercicio

Dado el arreglo: let coche = ["Toyota", "Corolla", 2022, "Rojo"];

Usa la desestructuración para extraer:

  1. La marca en una variable marca.
  2. El modelo en una variable modelo.
  3. El año en una variable año.
  4. El color en una variable color.

Muestra todas las variables por consola.

🏋️‍♂️ Ejercicio

Dado el arreglo: let competidores = ["Ana", "Luis", "Eva", "Juan", "Sara"];

Usa la desestructuración para:

  1. Extraer los tres primeros competidores en variables oro, plata, bronce.
  2. Extraer el resto de los competidores en un arreglo llamado otrosCompetidores.
  3. Asigna un valor por defecto de "Nadie" a bronce por si acaso solo hubiera 2 competidores.

Muestra todas las variables (oro, plata, bronce, otrosCompetidores) por consola.

🚀 Extra

Investiga sobre: 1. ¿Cómo funciona la desestructuración con los resultados de funciones que devuelven arreglos (ej. string.match(), Object.entries())? 2. ¿Puedes usar la desestructuración de arreglos en los parámetros de una función? 3. Compara la desestructuración de arreglos con la desestructuración de objetos. ¿Cuáles son sus similitudes y diferencias?

Comentarios

Artículos relacionados

javascript

El Operador Spread (...) en Arreglos

4 mins
javascript

Crear y Acceder a Elementos de Arreglos

4 mins