You know the X-men, right? Well, this is just like the X-men, except that it’s a lesson on Javascript. But still, pretty much the same thing.

Because JavaScript is a prototype-based (not object-oriented) language, mutation is an important aspect. We won’t get too theoretical here but there are mutable and immutable objects in JavaScript i.e. objects that you can change and objects that you can’t.

In order to demonstrate, I’ll show you a little code that uses mutation. Take note:

const myArray = ['Value1', 'Value2', 'Value3'];
function muteMeBaby(someArray) {
 someArray[0] = 'newValue';
 return someArray;
}
const newArray = muteMeBaby(myArray);
console.log(newArray); // ["newValue", "Value2", "Value3"]
console.log(myArray); // ["newValue", "Value2", "Value3"]

In this little piece of code, we have a simple function that takes an array and changes the first member. That’s it. At the end of the function it returns the array that it received. Easy as pie…

So, I create an array called myArray and pass it from the function. Whatever the function returns goes into a second array called newArray. It’s no surprise that newArray has the new value in the first member. It passed through the function which is what I would expect to happen. But what I wouldn’t expect to happen is that the first array, myArray, would also change.

But why does it change? Why, in God’s name, does it change?!?

This is something that can really drive beginning JavaScript developers crazy.

This function executes a mutation on the original array. This is because what goes into it isn’t a copy of a new array but rather a reference to the old array, and any change to this reference influences the old array too. The someArray argument found in the function doesn’t create a new array but instead contains a reference to the existing array.

Sometimes, this is a good thing. Other times, well, not so much. So how do we prevent it? We just need to break the connection between the argument & the array inside the function, and the original array. We do this by using something called clone. In cases of a simple array, we can do this with destructuring which I wrote about in the past. Long story short, this is when we take the array apart and put it back together again while copying it. Note I said copy and not reference: 

const myArray = ['Value1', 'Value2', 'Value3'];
function muteMeBaby(someArray) {
 const innerArray = [...someArray]; // This is clone
 innerArray[0] = 'newValue';
 return innerArray;
}
const newArray = muteMeBaby(myArray);
console.log(newArray); // ["newValue", "Value2", "Value3"]
console.log(myArray); // ["Value1", "Value2", "Value3"]

Almost every library has a way to execute clone. We need to pay careful attention to this aspect of mutation because if we don’t stop the mutation, i.e. the change to the original array, we’re likely to end up with errors in our data. It’s actually a pretty basic feature of JavaScript, but you could go your entire career without ever really knowing about it.

All of this applies to objects as well and not just arrays.

For more JavaScript fun, check out my article: 

Label Statements in JavaScript

About the author: Ran Bar-Zik is an experienced web developer whose personal blog, Internet Israel, features articles and guides on Node.js, MongoDB, Git, SASS, jQuery, HTML 5, MySQL, and more. Translation of the original article by Aaron Raizen