[JavaScript] Mutable vs. Immutable

1.Summary

In this article, I will talk about

• What is immutable & mutable variable in JavaScript?

• Difference between having two references to the same object and having two different objects that contain the same properties.

• Not to be confused with identifiers such as const, let, var. Those are signals that determine variable will be reassigned or not.

• How to combine isMutable with identifier?

• Use one easy way to tell difference between immutable & mutable.

2.Immutable

Primitive datatypes such as numbers, strings, and Booleans are immutable - it is impossible to change values of those types. You can combine them and derive new values from then, but when you take a specific string value, that value will always remain the same.

let str1 = 'Hello';
//combine string
str1 = str1.concat(" Code!");
console.log(str1); //print Hello Code!

You see code above, maybe a little confused. But remember the text inside it cannot be changed. If you have a string that contains "cat", it is impossible for other code to change a character in your string to make it spell "rat".

3.Mutable

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

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

let object1 = { fruit: "apple", color: "yellow" };
let object2 = object1;
let object3 = { fruit: "apple", color: "yellow" };
console.log("check object1 === object2", object1 === object2); //true
console.log("check object1 == object3", object1 == object3); //false
object1.color = "red";
console.log(object1); //{ fruit: 'apple', color: 'red' }
console.log(object2);//{ fruit: 'apple', color: 'red' }
console.log(object3);//{ fruit: 'apple', color: 'yellow' }

The object1 and object2 bindings refer to same object, which is why changing object1 also changes the value of object2. They are the same identity. The binding object3 points to a difference object.

4.Not in same life with const, let, var

Bindings can be changeable or constant, but this is separate from the way values behave. Even though number values dont' change, you can use a let binding to keep track of a changing number by changing the value the binding points at. A const binding to an object itself cannot be changed.

const object1 = { fruit: "apple", color: "yellow" };
object1.color = "red"; //allowed
object1 = { fruit: "apple", color: "yello" }; //not allowed

5.One easy way to tell difference between immutable & mutable

When new variable copies or refers to other primitive variable(later called old), no matter how new variable makes updates, that won't change the value of old variable.

If new variable copies or refers to other object variable(later called old), old variable's value will be changed if new variable make updates.

let num1 = 66;
let str1 = 'Hello';
let boolean1 = true;
let arr1 = [1, 2, 3];
let obj1 = { name: 'yuki', age: '25' };

// Primitive: Copy items
let num2 = num1;
let str2 = str1;
let boolean2 = boolean1;

// Update the copies
num2 = num2 - 10;
str2 += ' world';
boolean2 = false;

// print 65
console.log(num1);
// print "Hello"
console.log(str1);
// print "true"
console.log(boolean1);

// Object: Copy items
let arr2 = arr1;
let obj2 = obj1;

// Update the copies
arr2.push(4, 5, 6);
obj2.name = 'UU';

// print [1, 2, 3, 4, 5, 6]
console.log(arr1);
// print { name: 'UU', age: '25' }
console.log(obj1);

6.Conclusion

Primitive datatypes -> immutable
Object variable -> mutable
The difference between immutable and mutable is that when changing value of reference variable will affect value of original referenced variable.