YogeshChauhan . com

What is Object Mutability in JavaScript?

in JavaScript on December 12, 2020

A mutable object is an object whose state can be modified after it is created.

Immutable objects are the objects whose state cannot be changed once the object is created.

📌 numbers, strings, and Booleans, are all immutable—it is impossible to change values of those types.

You can combine them and derive new values from them, but when you take a specific string value, that value will always remain the same.

The text inside it cannot be changed. If you have a string that contains “programming”, it is not possible for other code to change a character in your string to make it spell “coding”.

var immutableString = "Hello";

// In the above code, a new object with string value is created.

immutableString = immutableString + "World";

// We are now appending "World" to the existing value.

On appending the immutableString with a string value, following events occur:

1. Existing value of immutableString is retrieved

2. “World” is appended to the existing value of immutableString

3. The resultant value is then allocated to a new block of memory

4. immutableString object now points to the newly created memory space

5. Previously created memory space is now available for garbage collection.

Objects work differently. You can change their properties, causing a single object value to have different content at different times.

When we have two numbers, 100 and 100, we can consider them precisely the same number, whether or not they refer to the same physical bits.

📌 With objects, there is a difference between having two references to the same object and having two different objects that contain the same properties.

Consider the following code:

let object1 = {value: 100};
let object2 = object1;
let object3 = {value: 100};

console.log(object1 == object2);
console.log(object1 == object3);

object1.value = 200;


The object1 and object2 bindings grasp the same object, which is why changing object1 also changes the value of object2.

They are said to have the same identity.

The binding object3 points to a different object, which initially contains the same properties as object1 but lives a separate life.

Bindings can also be changeable or constant, but this is separate from the way their values behave.

Even though number values don’t change, you can use a let binding to keep track of a changing number by changing the value the binding points at.

Similarly, though a const binding to an object can itself not be changed and will continue to point at the same object, the contents of that object might change.

For example, let’s say we have this object:

const score = {visitors: 0, home: 0};

We can change the property like this:

// This is okay
score.visitors = 1;


// output

{ visitors: 1, home: 0 }

This will give you an error:

const score = {visitors: 0, home: 0};

// This isn't allowed
score = {visitors: 1, home: 1};



TypeError: Assignment to constant variable.

When you compare objects with JavaScript’s == operator, it compares by identity: it will produce true only if both objects are precisely the same value.

Comparing different objects will return false, even if they have identical properties.

There is no “deep” comparison operation built into JavaScript, which compares objects by contents.



Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

5 Steps to Create a Line using Canvas Tag in HTML5HTMLSQL Right JoinSQL/MySQLHow to vertically and horizontally align text and image block (without flex or grid) in CSS?CSSCan Firewall and IDPS Stop DDoS Attack?MiscHow to activate and deactivate hooks in a WordPress plugin?WordPressSolution for the error Commit failed – exit code 1 received in Desktop GithubMisc