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
100The 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
Immutable Mutability objects values
