Immutability

---

Consider this:

new Array() === new Array(); //false
new Object() === new Object(); //false

const arr1 = new Array();
arr1.push(10);
const arr2 = new Array();
arr2.push(10);
arr1 === arr2; //false

const obj1 = new Object();
obj1.key = "something";
const obj2 = new Object();
obj2.key = "something";
obj1 === obj2; //false

and consider this:

const firstArray = [];
const secondArray = firstArray; // secondArray now points to firstArray
console.log(firstArray); // []
console.log(secondArray); // []

firstArray.push(10);
console.log(firstArray); // [10]
console.log(secondArray); // [10]

Why?

---

Recap

• Arrays are objects in JavaScript.
• [] === [] is the same as new Array() === new Array()
• === is the same as new Object() === new Object()
• [] === [] is false because it's comparing 2 different instances of arrays
• === is false because it's comparing 2 different instances of objects
• When you assign a variable to an object or array, it does NOT copy it. It will only reference its value.

Think

---

const grades = [{
    id: 1,
    grade: 12,
    isPassing: false // we need to update this to true
}, {
    id: 2,
    grade: 14,
    isPassing: true
}];

/ find the entry with id = 1
const entry = grades.find(grade => grade.id === 1);
// set it to passing
entry.isPassing = true;
console.log(grades); // ?
//broken :)

More immutabilty

---

• Triple equal === is comparing the references rather than the values. If you'd like to compare by values, then what you're looking for is called deep equal.
• Deep equal is too slow to be used in front-end frameworks/libraries, which is why most of them rely on checking equality with ===.
• An immutable object is one that cannot be changed. As we cannot (or sometimes, should not) modify an immutable object, we create an entirely new object based on the original, leaving the original object unchanged.

Try some

---

/**
 * @param {Object} user
 * @param {number} user.id
 * @param {number} user.age
 */
const incrementAge = user => {
    return user.age = user.age + 1;
}

// Sample usage - do not modify
const sampleUser = {
    id: 1,
    age: 23 //this wasn't even mentioned in the function above, but call a console.log() on it and it's changed
};
incrementAge(sampleUser);
console.log(sampleUser); // notice how that gets mutated

Chapter Recap

---

• Arrays are objects in JavaScript.
• [] === [] is the same as new Array() === new Array()
• === is the same as new Object() === new Object()
• [] === [] is false because it's comparing 2 different instances of arrays
• === is false because it's comparing 2 different instances of objects
• When you assign a variable to an object or array, it does NOT copy it. It will only reference its value.
• Triple equal === is comparing the references rather than the values. If you'd like to compare by values, then what you're looking for is called deep equal.
• Deep equal is too slow to be used in front-end frameworks/libraries, which is why most of them rely on checking equality with ===.
• An immutable object is one that cannot be changed. As we cannot (or sometimes, should not) modify an immutable object, we create an entirely new object based on the original, leaving the original object unchanged.