Mutable and Immutable in JavaScript

In JavaScript, mutable and immutable are terms used to describe the nature of data and whether it can be changed after it is created.

Mutable: Mutable data can be modified or changed after it is created. Objects and arrays in JavaScript are examples of mutable data types. You can add, remove, or modify properties and elements of mutable objects or arrays.

Example of a mutable object (object properties can be changed):

let person = { name: "John", age: 25 };
person.age = 30; // Modifying the 'age' property
console.log(person); // Output: { name: "John", age: 30 }

Example of the mutable array (array elements can be changed):

let numbers = [1, 2, 3, 4];
numbers[2] = 5; // Modifying the element at index 2
console.log(numbers); // Output: [1, 2, 5, 4]

Immutable: Immutable data cannot be changed once it is created. Primitive data types in JavaScript such as strings and numbers are immutable. Once assigned, their values cannot be altered.

let message = "Hello";
message = "Hi"; // Reassigning the variable
console.log(message); // Output: "Hi"

Mutable and Immutable in JavaScript example

Simple example code.

// Mutable Example (Array)
let mutableArray = [1, 2, 3];
mutableArray.push(4);
console.log(mutableArray);

// Immutable Example (String)
let immutableString = "Hello";
let newString = immutableString.toUpperCase();
console.log(newString); 
console.log(immutableString);

// Immutable Example (Object)
const immutableObject = { name: "John", age: 25 };
const newObject = { ...immutableObject, age: 30 };
console.log(newObject);
console.log(immutableObject); 

Output:

In this single code example, you can see the mutable example modifying an array by using the push() method, the immutable example creating a new uppercase string from an existing string, and the immutable example creating a new object with a modified property using the spread operator (...).

Mutable vs Immutable in JavaScript

Mutable Data:

• Mutable data can be modified or changed after it is created.
• Changes can be made directly to the existing data without creating a new instance.
• Examples of mutable data types in JavaScript include objects and arrays.
• Modifying mutable data can lead to unintended side effects or bugs if not handled carefully.

Immutable Data:

• Immutable data cannot be changed once it is created.
• Any modifications to immutable data result in creating a new instance with the desired changes.
• Examples of immutable data types in JavaScript include strings and numbers.
• Immutable data provides benefits such as easier debugging, better predictability, and avoiding unintended modifications.

Here’s a tabular format comparing mutable and immutable data in JavaScript:

Comment if you have any doubts or suggestions on this Js Data type topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version