Desestructuración — JS: Arrays

• Destructuración de Arrays
  • Valores por defecto en la destructuración
• Destructuración en arrays anidados
• Uso de la destructuración en bucles
• Destructuración en parámetros de funciones
• Destructuración de cadenas de texto

La destructuración es una característica de JavaScript que nos permite extraer valores de arrays y objetos de una manera más clara y concisa. Con esta técnica, en lugar de acceder a elementos mediante índices (array[0], array[1]), podemos asignarlos directamente a variables con nombres descriptivos.

Destructuración de Arrays

Empecemos con un caso simple:

const point = [3, 5];

console.log(`${point[0]}:${point[1]}`); // => 3:5

Aquí tenemos un array point con dos valores, pero acceder a ellos por su índice (point[0]) no es muy descriptivo.

Una mejor manera sería asignarlos a variables con nombres claros:

const x = point[0];
const y = point[1];

console.log(`${x}:${y}`); // => 3:5

Ahora el código es más claro, pero podemos mejorarlo aún más usando destructuración:

const [x, y] = point;

console.log(`${x}:${y}`); // => 3:5

Así, en una sola línea extraemos los valores del array point y los asignamos a x y y.

Esta técnica es útil cuando queremos tomar solo algunos valores del array. Podemos ignorar elementos que no nos interesen:

const coordinates = [10, 20, 30, 40];

// Extraemos solo el segundo y cuarto elemento
const [, second, , fourth] = coordinates;

console.log(second); // => 20
console.log(fourth); // => 40

Los espacios vacíos con comas [,] nos permiten saltarnos valores del array.

Valores por defecto en la destructuración

Si intentamos extraer más valores de los que hay en el array, las variables resultarán undefined:

const [a, b, c] = [1, 2];

console.log(c); // => undefined

Pero podemos asignar un valor por defecto en caso de que no exista un valor en esa posición:

const [a, b, c = 3] = [1, 2];

console.log(c); // => 3

Aquí, si c no existe en el array, se le asigna 3 automáticamente.

Destructuración en arrays anidados

Podemos usar destructuración para extraer valores de arrays dentro de arrays:

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

console.log(one);   // => 1
console.log(two);   // => 2
console.log(three); // => 3

Esto es útil cuando trabajamos con estructuras más complejas.

Uso de la destructuración en bucles

Otra ventaja de la destructuración es que podemos aplicarla dentro de bucles para hacer el código más claro:

const points = [
  [4, 3],
  [0, -3]
];

for (const [x, y] of points) {
  console.log(`${x}, ${y}`);
}
// => 4, 3
// => 0, -3

Sin destructuración, el código sería más engorroso:

for (const item of points) {
  console.log(item[0], item[1]);
}

Usando destructuración, podemos trabajar directamente con los valores sin necesidad de acceder a índices manualmente.

Destructuración en parámetros de funciones

La destructuración también se puede usar en funciones. Por ejemplo, una función para intercambiar dos valores:

const swapValues = ([a, b]) => [b, a];

console.log(swapValues([1, 2])); // => [2, 1]

Aquí la función recibe un array de dos elementos, los desestructura en a y b, y devuelve un nuevo array con los valores invertidos.

Destructuración de cadenas de texto

Aunque las cadenas de texto (strings) no son arrays, se pueden desestructurar igual que estos:

const [first, second, third] = 'dos';

console.log(first);  // => 'd'
console.log(second); // => 'o'
console.log(third);  // => 's'

Cada carácter de la cadena se asigna a una variable como si fuera un array.

Como ves, la destructuración es una funcionalidad muy potente que hace que el código sea más organizado y fácil de leer. ¡Practica y verás cómo mejora tu código!

Materiales adicionales

1. La desestructuración / MDN Web Docs