JavaScript: Mutable & Immutable

In JavaScript, objects can be mutable or immutable. A mutable object can be changed after it is created, while an immutable object cannot. Understanding the difference between mutable and immutable objects is important for writing bug-free and maintainable code. In this blog post, we will explore the concept of mutable and immutable objects in JavaScript, with simple explanations and lots of examples.

Mutable Objects

In JavaScript, objects and arrays are mutable, meaning that their values can be changed. Let’s take a look at an example:

let obj = {name: 'John', age: 30};

// Change the value of the 'age' property
obj.age = 31;
console.log(obj); // {name: 'John', age: 31}

In this example, we create an object called obj with two properties: name and age. Then, we change the value of the age property to 31. This is possible because objects in JavaScript are mutable.

Another example with arrays:

let arr = [1, 2, 3];

// Add an element to the end of the array
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

In this example, we create an array called arr with three elements. Then, we add an element with the push() method, which adds an element to the end of the array. This is possible because arrays in JavaScript are also mutable.

Mutable objects can be useful when you need to change the value of an object or array over time. However, it can also lead to unexpected bugs and side effects if you’re not careful.

Immutable Objects

In contrast, immutable objects cannot be changed after they are created. Once an immutable object is created, its value is fixed and cannot be modified. Let’s take a look at an example:

let str = 'Hello, World!';

// Create a new string with the first letter capitalized
let newStr = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str); // 'Hello, World!'
console.log(newStr); // 'Hello, world!'

In this example, we create a string called str with the value "Hello, World!". Then, we create a new string called newStr with the first letter capitalized using the charAt() and toUpperCase() methods. Notice that the original string str is not changed. This is because strings in JavaScript are immutable.

Another example with arrays:

let arr = [1, 2, 3];

// Create a new array with a new element added
let newArr = [...arr, 4];
console.log(arr); // [1, 2, 3]
console.log(newArr); // [1, 2, 3, 4]

In this example, we create an array called arr with three elements. Then, we create a new array called newArr with the spread operator (...) and add a new element to the end of the array. Notice that the original array arr is not changed. This is because arrays in JavaScript are also mutable.

Immutable objects can be useful for creating predictable and reliable code. By ensuring that objects cannot be changed after they are created, you can avoid bugs and side effects that can arise from mutable objects.They are also useful in functional programming paradigms, where immutability is a key concept. However, working with immutable objects may require creating new objects for every change, which can impact performance in certain scenarios.

Immutable Libraries in JavaScript

Although JavaScript does not have built-in support for creating immutable objects, there are several popular libraries like immutable, immer that provide immutable data structures and utilities.

Conclusion

In conclusion, mutable and immutable objects are two fundamental concepts in JavaScript. Understanding the difference between them is important for writing efficient and maintainable code. Mutable objects can be changed after they are created, while immutable objects cannot.