JavaScript
Explica cómo extraer posiciones con destructuring, reunir elementos con rest y expandir iterables con spread para copiar o combinar arrays.
El destructuring extrae valores según su posición. Spread expande un iterable dentro de otro contexto.
const values = ["JavaScript", "TypeScript"];
const [first, second] = values;
first; // "JavaScript"
second; // "TypeScript"const coordinates = [4, 8];
const [x, y] = coordinates;Los nombres no dependen del array; los eliges según el significado.
const [width, height] = coordinates;El contrato sigue siendo posicional: el primer binding recibe el primer valor.
const values = ["A", "B", "C"];
const [, second] = values;
second; // "B"Demasiadas posiciones omitidas reducen claridad.
const [, , , fourth] = values;Para estructuras complejas, un objeto con propiedades nombradas puede ser mejor.
const values = ["dark"];
const [theme = "light", language = "es"] = values;El default se utiliza cuando el valor extraído es undefined o la posición no existe.
const [value = "default"] = [null];
value; // nullnull no activa el valor por defecto.
const values = [1, 2, 3, 4];
const [first, ...remaining] = values;
first; // 1
remaining; // [2, 3, 4]El elemento rest debe estar al final y crea un array nuevo.
const [...copy] = values;const point = ["A", [10, 20]];
const [name, [x, y]] = point;Utilízalo cuando la estructura sea estable y sencilla. Si los datos externos pueden cambiar, validar antes suele producir errores más claros.
let first = "A";
let second = "B";
[first, second] = [second, first];La expresión de la derecha se evalúa antes de actualizar los bindings.
Declaración:
const [first, second] = values;Asignación sobre variables existentes:
let first;
let second;
[first, second] = values;function divide(dividend, divisor) {
return [
Math.trunc(dividend / divisor),
dividend % divisor,
];
}
const [quotient, remainder] = divide(10, 3);Un array funciona bien cuando:
Para muchos campos o valores opcionales, un objeto suele ser más legible.
const frontend = ["React", "Next.js"];
const backend = ["Node.js", "PostgreSQL"];
const stack = [...frontend, ...backend];Spread consume el protocolo iterable.
[..."JS"]; // ["J", "S"]
[...new Set([1, 2, 2])]; // [1, 2]Un objeto únicamente array-like puede no funcionar con spread si no es iterable.
const arrayLike = {
0: "A",
length: 1,
};
// [...arrayLike] produce TypeError.
Array.from(arrayLike); // ["A"]const original = [
{ name: "Keyboard" },
];
const copy = [...original];El array exterior es nuevo, pero el objeto interior se comparte.
copy !== original; // true
copy[0] === original[0]; // truecopy[0].name = "Mouse";
original[0].name; // "Mouse"Spread no crea una copia profunda.
const items = ["A", "B"];
const appended = [...items, "C"];
const prepended = ["C", ...items];Para insertar en medio:
const index = 1;
const next = [
...items.slice(0, index),
"C",
...items.slice(index),
];toSpliced ofrece una alternativa directa para modificaciones por posición.
const sparse = new Array(3);
const dense = [...sparse];El iterador del array produce undefined para cada posición vacía.
Object.hasOwn(sparse, 0); // false
Object.hasOwn(dense, 0); // true
dense; // [undefined, undefined, undefined]Spread puede convertir una estructura dispersa en una densa con valores undefined.
const values = [10, 5, 30];
Math.max(...values); // 30No confundas:
rest: varios valores → un array
spread: iterable → varios valoresPara colecciones enormes, expandir todos los elementos como argumentos puede superar límites del runtime. Un recorrido o reducción puede ser más seguro.
function printRange([start, end]) {
return `${start} - ${end}`;
}
printRange([10, 20]);La función exige un iterable compatible con la estructura. Considera un objeto cuando start y end necesiten nombres explícitos en cada llamada.
const selectedIds = [
"product-1",
"product-2",
"product-3",
];
const [primaryId, ...secondaryIds] = selectedIds;El destructuring comunica que la primera selección tiene un papel diferente y el resto forma otra colección.
null.undefined.¿Qué valores reciben los bindings?
const values = [undefined, null, 3, 4];
const [first = 1, second = 2, ...rest] = values;first recibe 1 porque el valor era undefined; second conserva null; rest recibe [3, 4].
Recorrer arrays compara índices, for...of, iteradores y forEach, incluyendo sus límites y contratos.