JavaScript's Mutative vs. Non-Mutative Array Methods

This is an issue that has endlessly tripped me up in JavaScript and I hope this post will help clarify things a bit and hopefully discover a pattern one can use to discern between mutative and non-mutative array methods.

First, let me define what I mean when I say mutative:

// If a method is mutative, that means it changes the original array.
var foo = [1, 2, 3];
console.log(foo); // [3, 2, 1]

// Notice how we didn't assign foo to new variable, reverse() acted upon it in place.
// In contrast, non-mutative array methods return a new copy of the original array.

// Here, the new array concat() generates is lost since we didn't assign it
var bar = [1, 2, 3];
bar.concat([4, 5]);
console.log(bar); // [1, 2, 3]

// Now if we assign it, bar becomes the new array.
bar = bar.concat([4, 5]);
console.log(bar); // [1, 2, 3, 4, 5]

NB: the functional methods marked with a * can be mutative if the function you pass to them modifies the original array. In my expierience this has been especially true in the case of Array.prototype.forEach.

Tips for telling which Array.prototype methods are mutative

Contents (top)