JS Array Methods

JavaScript Array Methods: Mutating vs. Non-Mutating Operations

JavaScript array methods add, remove, slice, combine, and format list items cleanly. Knowing which methods modify the original array in place and which return a brand-new array prevents hard-to-find state bugs in React and Node.js.

Mutating vs. Non-Mutating Methods

Choosing the right method depends on whether you want to change the existing array or return a new copy. Keep this reference handy when managing application state:

Before ES2023, developers cloned arrays with [...arr] before calling splice() or reverse(). Modern toSpliced(), toReversed(), and with() perform those updates immutably in a single step.

Practical Array Manipulation Example

In modern frontend apps, prefer non-mutating methods like slice(), toSpliced(), and spread [...arr] so state updates stay predictable.

const tasks = ["Design", "Build", "Test", "Deploy"];

// Non-mutating slice and join
const middle = tasks.slice(1, 3); // ["Build", "Test"]
console.log("Middle tasks:", middle.join(" -> "));

// ES2023 non-mutating splice (falls back cleanly in modern runtimes)
const updated = tasks.toSpliced(2, 1, "Review", "Test");
console.log("Original intact:", tasks);
console.log("Updated copy:", updated);

// Stack behavior at the end
const stack = ["step1", "step2"];
stack.push("step3");
const last = stack.pop();
console.log("Popped:", last, "Remaining:", stack);

Common Mistakes to Avoid

• Confusing slice() and splice(): slice() copies a range without touching the source array, whereas splice() deletes or inserts directly inside the source array.
• Expecting push() to return the array: arr.push("x") returns the new length number, not the modified array.
• Using shift() inside huge loops: Removing from the front of a huge array shifts every remaining element's index; use pop() or index pointers for queues.

Frequently Asked Questions

How do I flatten nested arrays in JavaScript?

Call nested.flat() for one level deep, or nested.flat(Infinity) to flatten arbitrary nesting into a single flat array.

What is the modern way to replace one array item without mutating?

Use ES2023 arr.with(index, newValue) or .map(), both of which return a new array copy and leave the original untouched.

How do I merge two arrays without modifying either one?

Use [...firstArray, ...secondArray] or firstArray.concat(secondArray).