Yogesh Chauhan's Blog

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;
console.log(object2.value);
console.log(object3.value);

//output
true
false
200
100

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;

console.log(score)

// 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};

console.log(score)

//output

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.

Sources


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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to center an image horizontally and vertically?CSSFunction Scope in JavaScript for BeginnersJavaScriptWhat are Stored Procedures for SQL Server?SQL/MySQLWhat are “holes” in a React component?ReactHow to add a Line Chart in Angular App?AngularWhat does useEffect do in React?React