1. Introduction
JavaScript arrays come with a rich set of built-in methods for adding, removing, transforming, and searching elements. Some of these methods mutate (change) the original array in place, while others are non-mutating and instead return a brand-new array, leaving the original untouched. Knowing which is which is essential for writing predictable code, especially when working with frameworks that rely on immutability (like React).
Cricket analogy: Think of a scorecard: some updates like editing a player's live score mutate the original sheet, while others, like a broadcaster printing a fresh summary sheet for TV graphics, leave the original scorebook untouched.
2. Syntax
// Mutating: changes the original array
arr.push(item);
arr.pop();
arr.splice(start, deleteCount, ...items);
arr.sort(compareFn);
// Non-mutating: returns a new array
const mapped = arr.map(fn);
const filtered = arr.filter(fn);
const piece = arr.slice(start, end);
const combined = arr.concat(otherArr);3. Explanation
Mutating Methods
Mutating methods change the array they are called on and typically return either the removed element(s) or the new length, rather than the modified array itself. Common examples: push/pop (add/remove from the end), shift/unshift (add/remove from the start), splice (insert/remove at any position), sort (reorders in place), and reverse. Because these change the original array, they can cause subtle bugs if other parts of your program still hold a reference to that same array and expect it not to change.
Cricket analogy: Virat Kohli substituting himself onto the field mid-over or being run out changes the actual playing XI list, and if the scorer and commentator both reference the same team sheet, one's edit surprises the other.
Non-Mutating Methods
Non-mutating methods leave the original array untouched and instead return a new array (or a single value). Common examples: map (transform each element), filter (keep elements matching a condition), slice (extract a portion), concat (merge arrays), and reduce (fold into a single value). These are preferred in modern JavaScript and frameworks like React because they avoid unexpected side effects and make data flow easier to reason about.
Cricket analogy: Filtering a squad list down to only players with a century this season, or mapping each player's name to their strike rate, produces a brand-new list for the display board without touching the original roster.
Gotcha: sort() and splice() mutate in place even though they "look" like they might return a transformed copy — always double-check a method's documentation if you're unsure. If you need a sorted copy without touching the original, sort a copy first: [...arr].sort(...).
4. Example
const numbers = [5, 3, 8, 1];
// Mutating methods change the original array
const popped = numbers.pop();
numbers.push(10);
numbers.sort((a, b) => a - b);
console.log(numbers);
console.log(popped);
// Non-mutating methods return a new array
const original = [1, 2, 3];
const doubled = original.map(n => n * 2);
const evens = original.filter(n => n % 2 === 0);
const sliced = original.slice(1);
console.log(doubled);
console.log(evens);
console.log(sliced);
console.log(original);5. Output
[ 3, 5, 8, 10 ]
1
[ 2, 4, 6 ]
[ 2 ]
[ 2, 3 ]
[ 1, 2, 3 ]6. Key Takeaways
- Mutating methods (push, pop, shift, unshift, splice, sort, reverse) change the original array in place.
- Non-mutating methods (map, filter, slice, concat, reduce) return a new array/value and leave the original untouched.
sort()mutates in place and sorts lexicographically by default unless given a compare function.- Use
[...arr]orarr.slice()to copy an array before applying a mutating method if you need to preserve the original. - Non-mutating methods are preferred when working with immutable state patterns (e.g. React state updates).
Practice what you learned
1. Which of these array methods mutates the original array?
2. What does `arr.pop()` return?
3. Given `const original = [3, 1, 2]; const sorted = original.sort();`, is `original` changed after this call?
4. Which method would you choose to derive a filtered copy of an array without affecting the original array's contents?
5. How can you safely sort a copy of an array without mutating the original?
6. What does `[1, 2].concat([3, 4])` return?
Was this page helpful?
You May Also Like
Arrays in JavaScript
Understand how JavaScript arrays store ordered lists of values, how indexing and length work, and why `typeof` alone can't identify an array.
Higher-Order Functions in JavaScript
Learn how functions that take or return other functions power JavaScript's map, filter, and reduce, plus function factories.
Callback Functions in JavaScript
Understand callback functions, the difference between synchronous and asynchronous callbacks, and the callback hell problem.
Spread and Rest Operators in JavaScript
Understand the dual use of the `...` syntax: spreading elements out to copy or merge arrays/objects, and collecting elements into a rest parameter.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics