JavaScript
Clasifica los métodos que modifican arrays y sus alternativas no mutables, desde push y splice hasta toSorted, toSpliced, toReversed y with.
Algunos métodos modifican el mismo array; otros devuelven otro valor sin cambiar la colección original.
const values = [1, 2, 3];
values.push(4); // Muta values.
const next = values.concat(5); // Crea otro array.Método mutable:
const values = [3, 1, 2];
const result = values.sort();
result === values; // trueMétodo no mutable:
const values = [3, 1, 2];
const result = values.toSorted();
result === values; // false
values; // [3, 1, 2]const stack = ["A", "B"];
stack.push("C"); // Retorna la nueva longitud.
stack.pop(); // Retorna el elemento retirado.Ambos mutan el array.
Alternativas sin mutar:
const appended = [...stack, "C"];
const withoutLast = stack.slice(0, -1);Para leer y separar el último:
const last = stack.at(-1);
const rest = stack.slice(0, -1);const queue = ["B", "C"];
queue.unshift("A"); // Nueva longitud.
queue.shift(); // Elemento retirado.Ambos mutan. Trabajar repetidamente en el inicio puede implicar reorganizar índices y suele ser menos conveniente para colas grandes.
Alternativas:
const prepended = ["A", ...queue];
const withoutFirst = queue.slice(1);Crear copias también cuesta memoria; no significa que siempre sea más rápido. La elección depende de identidad compartida, legibilidad y volumen.
splice puede eliminar, insertar o reemplazar elementos y modifica el original.
const values = ["A", "B", "C"];
const removed = values.splice(1, 1, "X", "Y");
values; // ["A", "X", "Y", "C"]
removed; // ["B"]Parámetros principales:
splice(inicio, cantidadAEliminar, ...elementosAInsertar)Produce otro array con la misma operación posicional.
const values = ["A", "B", "C"];
const next = values.toSpliced(1, 1, "X");
values; // ["A", "B", "C"]
next; // ["A", "X", "C"]const scores = [10, 2, 30];
scores.sort((first, second) => first - second);sort muta. toSorted conserva el original.
const ordered = scores.toSorted(
(first, second) => first - second,
);La comparación se profundiza en Ordenamiento de arrays.
const values = [1, 2, 3];
values.reverse(); // Muta.const reversed = values.toReversed(); // Nueva colección.const values = ["A", "B", "C"];
const next = values.with(1, "X");
values; // ["A", "B", "C"]
next; // ["A", "X", "C"]with acepta índices negativos.
values.with(-1, "X");Lanza RangeError si el índice está fuera del rango válido, a diferencia de una asignación normal que puede extender el array.
const values = new Array(3).fill(0);
// [0, 0, 0]fill modifica el array y devuelve la misma referencia.
Puede limitarse a un rango.
[1, 2, 3, 4].fill(0, 1, 3);
// [1, 0, 0, 4]const rows = new Array(3).fill({ active: false });
rows[0].active = true;
rows[1].active; // trueTodas las posiciones apuntan al mismo objeto.
Para crear objetos independientes:
const rows = Array.from(
{ length: 3 },
() => ({ active: false }),
);Copia una parte del mismo array hacia otra posición y lo modifica.
const values = [1, 2, 3, 4, 5];
values.copyWithin(0, 3);
values; // [4, 5, 3, 4, 5]No cambia la longitud. Es una operación de bajo nivel útil en casos concretos; slice, spread o una transformación con nombres suelen ser más legibles.
Crea una copia superficial de un rango.
const values = ["A", "B", "C", "D"];
values.slice(1, 3); // ["B", "C"]
values.slice(); // Copia superficial completa.
values.slice(-2); // ["C", "D"]El índice final no se incluye.
const first = [1, 2];
const second = [3, 4];
const combined = first.concat(second, 5);No modifica los arrays de entrada y crea una copia superficial.
Spread suele comunicar lo mismo:
const combined = [...first, ...second, 5];| Muta | Alternativa habitual |
|---|---|
| `push` | `[...array, value]` |
| `pop` | `slice(0, -1)` |
| `unshift` | `[value, ...array]` |
| `shift` | `slice(1)` |
| `splice` | `toSpliced` |
| `sort` | `toSorted` |
| `reverse` | `toReversed` |
| Asignar índice | `with` |
| `fill` | `map` o `Array.from` según el propósito |
Mutación problemática cuando otras partes dependen de una referencia nueva:
state.items.push(item);
setState(state);Actualización explícita:
setState({
...state,
items: [...state.items, item],
});La nueva referencia permite detectar el cambio. Los elementos interiores continúan compartidos salvo que también se copien.
La mutación no es automáticamente incorrecta.
function buildIndex(products) {
const result = [];
for (const product of products) {
result.push({
id: product.id,
name: product.name,
});
}
return result;
}result es local y no se comparte antes del retorno. push puede ser claro y seguro.
El riesgo aparece con referencias compartidas, contratos inesperados o estado observable desde otros lugares.
const next = [...largeArray, value];Crear otro array requiere copiar referencias. En colecciones grandes o actualizaciones muy frecuentes, mide el costo y considera estructuras o estrategias apropiadas.
No sacrifiques identidad correcta y claridad por una optimización imaginada; tampoco copies automáticamente sin evaluar el uso.
sort o reverse sobre datos que deben conservarse.push es el array.slice con splice.fill({}).with comunica una actualización inmutable.with extienda el array.push, pop, shift, unshift, splice, sort, reverse, fill y copyWithin mutan.slice, concat, toSpliced, toSorted, toReversed y with producen otro array.fill con objetos repite la misma referencia.¿Por qué este código modifica todas las filas?
const rows = new Array(3).fill({ active: false });
rows[0].active = true;fill colocó la misma referencia de objeto en las tres posiciones. Debe crearse un objeto nuevo por posición, por ejemplo con Array.from({ length: 3 }, () => ({ active: false })).
map, filter y flatMap estudia transformaciones declarativas que producen nuevas colecciones mediante callbacks.