Chapter 4.5 Mutability

 

Mutability

🔍: Let's delve into the concept of mutability in JavaScript, as described in the excerpt from "Eloquent JavaScript."

 

👩‍🎓: Understanding Mutability:

1. Immutable vs. Mutable Types: In JavaScript, basic data types like numbers, strings, and Booleans are immutable. This means you cannot alter these types of values once they are created. For example, if you have a string "cat," you cannot change it to "rat" directly; you would have to create a new string.

2. Objects and Mutability: Objects in JavaScript are mutable. This means you can change the properties of an object after it has been created. The object itself can have different contents at different times.

🎨: Demonstrating Object Mutability with an Example:

1. Creating and Modifying Objects:

   • When object1 is created with {value: 10}, and then object2 is set to object1, both object1 and object2 refer to the same object. Therefore, a change in object1 will be reflected in object2.

   • However, object3 is a new object with the same properties but is distinct from object1. Changes to object1 won't affect object3.

2. Comparing Objects:

   • object1 == object2 returns true because they reference the same object.

   • object1 == object3 returns false because, despite having identical properties, they are two different objects.

3. Identity vs. Equality:

   • When objects are compared using ==, it checks for identity, not for equality of content. Two objects are considered identical if they refer to the same underlying object.

🔬: Constant Bindings and Objects:

• Even if an object is bound to a constant (using const), the object's contents can still be changed. What cannot change is the binding itself; you can't reassign a new object to that constant. For example, modifying score.visitors is allowed, but trying to assign a new object to score is not.

⚙️: Deep Comparison:

• JavaScript doesn't have a built-in operation for "deep" comparison (comparing objects based on their content). However, such a comparison can be implemented manually. This involves comparing each property of the objects to determine if their contents are identical.

📚: In summary, understanding the difference between mutable and immutable types, and the concept of object identity versus equality, is crucial in JavaScript programming. This knowledge is fundamental when manipulating objects and understanding how changes to these objects can affect your program's state and behavior.

Code explanation:

let object1 = {value: 10};

let object2 = object1;

let object3 = {value: 10};

console.log(object1 == object2);

// → true

console.log(object1 == object3);

// → false

object1.value = 15;

console.log(object2.value);

// → 15

console.log(object3.value);

// → 10

This piece of code is demonstrating how objects in JavaScript are compared and how they interact when assigned to variables. Let's break it down step by step:

1. Creating Objects:

   • let object1 = {value: 10};: This line creates an object object1 with a property value set to 10.

   • let object2 = object1;: Here, object2 is assigned the same reference as object1. They both point to the same object in memory.

   • let object3 = {value: 10};: This creates a new object object3 with the same property value set to 10, but it's a different object in memory compared to object1.

2. Comparing Objects:

   • console.log(object1 == object2);: This checks if object1 and object2 are the same. It returns true because object2 was assigned the reference of object1, meaning they both point to the same object in memory.

   • console.log(object1 == object3);: This compares object1 and object3. It returns false because, even though they have the same property values, they are different objects stored at different locations in memory.

3. Modifying Object Properties:

   • object1.value = 15;: This line changes the value property of object1 to 15. Since object2 refers to the same object as object1, this change will also be reflected in object2.

   • console.log(object2.value);: Outputs 15 because object2 is linked to object1, and the value property of object1 was changed to 15.

   • console.log(object3.value);: Outputs 10 because object3 is a separate object, and its properties are independent of changes made to object1.

In summary, object1 and object2 are references to the same object, so changes to one affect the other and they are considered equal. object3, however, is a distinct object with the same properties but stored in a different memory location, so it's not affected by changes to object1 and is not considered equal to object1 or object2.

Code explanation:

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

// This is okay

score.visitors = 1;

// This isn't allowed

score = {visitors: 1, home: 1};

This code snippet demonstrates the concept of mutability in the context of a constant object in JavaScript. Let's examine it in detail:

1. Creating a Constant Object:

   • const score = {visitors: 0, home: 0};: Here, a constant object score is created with two properties: visitors and home, both initialized to 0. Since score is declared with const, it means you cannot reassign score to a different value or object. However, the properties of the object score itself are mutable (they can be changed).

2. Modifying Object Properties:

   • score.visitors = 1;: This line is modifying the property visitors of the score object by setting it to 1. This is allowed because you are changing the property of the object, not the object score itself.

3. Attempting to Reassign the Constant Object:

   • score = {visitors: 1, home: 1};: This line is trying to reassign the entire score object to a new object. This is not allowed in JavaScript when the variable is declared with const. The const declaration ensures that the variable score always refers to the same object, and this line attempts to change that reference to a new object, which is why it results in an error.

In summary, when you declare an object with const, you can modify the properties of the object, but you cannot reassign the object to a new object. This is a key aspect of how const works in JavaScript with objects.

 

Link to the chapter in the book Eloquent Javascript:

https://eloquentjavascript.net/04_data.html