Immutability in JavaScript
Tags: javascript, immutable, immutability
Published: 2018-06-12 18:00:05

  ---
title: Immutability in JavaScript
published: true
description: An introduction to immutability in JavaScript
tags: JavaScript, immutable, immutability, javascript
---

Before I address the topic of Immutability, lets actually find out what mutation is.

##Mutation
Anything that changes/transforms the behavior or the structure of an object is called mutation. Like the force mutating Goku in the above picture.

##Mutation in JavaScript
The definition might seem pretty similar to the above example. Although, in JavaScript, it looks something like this,
```javascript
let a = 1;

a = 2;

console.log(a); // 2

//In the above case, we are mutating(transforming) the value of the variable a.
```


In the above case, we are mutating(transforming) the value of the variable a.

###But, Why is mutation a problem in JavaScript?
Before I answer this question, let me talk about a few concepts about __Pass by Value__ and __Pass by Reference__ in JavaScript.

###Pass by Value
Consider the following example,
```javascript
let a = 5;
let b = a;

console.log(a); // 5
console.log(b); // 5

a = 15;
console.log(a); // 15
console.log(b); // 5
```


In the above example, I create a variable “a” with a value of 5 and assign it to a variable called “b”. Then, the value of “a” as well as “b” would be 5. In this case, I have __passed the value__ of “a” to “b”.

Now let's say I change the value of “a” to 15. In doing so, my “b” value does not get changed because it was passing initially by a __value__. This way of passing the __values__ of variables to another variable can be stated as __pass by value__.

###Pass by Reference
Consider the following example,
```javascript
let object1 = {name: 'sai'};
let object2 = object1;

console.log(object1); // {name: 'sai'}
console.log(object2); // {name: 'sai'}

object1.name = 'charan';

console.log(object1); // {name: 'charan'}
console.log(object2); // {name: 'charan'} WHAAAAAT?
```


In the above example, I create an object and assign it to the variable “object1”. I create another variable “object2” and assign “object1” to it.

Now in line number 7, I mutate “object1”’s name property to “charan”. Surprisingly, when I log the value of “object2” the name property of “object2” has also changed to “charan”. So what exactly happened here? Objects are usually __passed by reference__. Since object2 is equated to object1, it is __passed by reference__, meaning, they both hold the same memory location. So, when we change the value of object1, object2 usually gets changed.

![Both object1 and object2 point to the same memory location](https://thepracticaldev.s3.amazonaws.com/i/er5yt4yflb170f9k55xc.png)

Both object1 and object2 point to the same memory location.

We can find a similar problem in case of arrays as well. Consider the below example,
```javascript
let arr = [1,2,3,4,5];
let newArr = arr;

console.log(arr); // [1,2,3,4,5]
console.log(newArr); // [1,2,3,4,5]

arr.push(6);

console.log(arr); // [1,2,3,4,5,6]
console.log(newArr); // [1,2,3,4,5,6] WHAAAAAT?
```


Both arrays and objects are __passed by reference__.

How is this a problem? Imagine, you pass an object/array across various functions, and you mutate it at some point, the same object/array might be mutated in other places, leading to unexpected behavior in some parts of the code, resulting in bugs.

##Solution: Going Immutable!
One way of achieving immutability in JavaScript is by using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign).
```javascript
let object1 = {name: 'sai'};
let object2 = Object.assign({}, object1, {name: 'charan'});

console.log(object1); // {name: 'sai'}
console.log(object2); // {name: 'charan'}

object1.name = 'batman';

console.log(object1); // {name: 'batman'}
console.log(object2); // {name: 'charan'}
```

In the above example, we are using Object.assign to create “object2” variable. Object.assign usually takes in three values, an initial value, the source object and the replacing object. In our case the initial value is an empty object, we get the contents of “object1”, and to that, we add a new object {name: ‘charan’}. If there is already a property ‘name’ in object1, it gets replaced with the existing value(in our case, ‘charan’) and assigns it to the initial value(which is an empty object). So now, my object2 is a fresh object. The mutations of “object1” do not affect object2, since now both refer to different memory locations.

Another way to achieve immutability in JavaScript is by using the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).
```javascript
let object1 = {name: 'sai'};
let object2 = {...object1, name: 'charan'};

console.log(object1); // {name: 'sai'}
console.log(object2); // {name: 'charan'}

object1.name = 'batman';

console.log(object1); // {name: 'batman'}
console.log(object2); // {name: 'charan'}
```

The above example does the same thing as Object.assign, but the syntax looks a lot cleaner.

In arrays, immutability can be achieved by using the same spread operator.
```javascript
let arr = [1,2,3,4,5];
let newArr = [...arr, 6];

console.log(arr); // [1,2,3,4,5]
console.log(newArr); // [1,2,3,4,5,6]

arr.push(11);

console.log(arr); // [1,2,3,4,5,11]
console.log(newArr); // [1,2,3,4,5,6]
```

In the above example, 6 gets added to the “newArr” variable. The mutations of “arr”, as in the line number 7, does not affect “newArr” variable. Also, for arrays in JavaScript, [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) can be used to avoid mutations since they return new arrays every-time they are called.

Writing __immutable Javascript__ code is a good practice. I hope this article gives you a basic idea of how variables are stored in memory and how immutability helps you write better quality code. Feedback and suggestions are welcome. :)

[Article available on Medium too](https://medium.com/@saiicharan/immutability-in-javascript-bf5ab5e9e79c)