React03_JavaScript Immutability

1. JavaScript Immutability

• Many Blog’s writer who wrote about React recommand to study JavaScript.
• Because React is a library which is based on JavaScript.
• Especially JavaScript Immutability.
• What is the Immutability?
  • It means unchangeable
  • It can prevent the original data from being damaged.

2. Data Type in JavaScript

• Primitive : Number, String, Boolean, Null, Unfined, Symbol …
  • It can’t be changed
• Object : Object, Array, Function …
  • It can be changed
• JavaScript treat Primitive Data Type and Obect Data Type differently.

3. Immutability

3-1. const Keep your primitive value unchangeable

• const
• If you use Variable type of const, you can keep variable’s name.
• You can’t change const variable’s value. If you try, It’s going to return Error.

var a = 1; 
a = 2;
console.log(a); // 2

const c = 1;
c = 2; // error

3-2. Value

var prm1 = 1;
var prm2 = 1;
console.log(p1===p2); // true (Two of variable's values are in same place.)
 
var obj1 = {name:'kim'}
var obj2 = {name:'kim'}
console.log(o1===o2); // false (Two of variable's values are in different place.)

3-3. Change the Value

var prm1 = 1;
var prm2 = 1;
var prm3 = prm2;
console.log(prm3); // 1

var prm3 = 2;
console.log(prm3); // 2


var obj1 = {name:'John'};
var obj2 = {name:'John'};
var obj3 = obj1; 
console.log(obj3); // {name:'John'}

obj3.name = 'Kevin';
console.log(obj1, obj3, obj1 === obj3); // {name:'Kevin'} {name:'Kevin'} true

3-4. Copy and assign

var obj1 = {name:'John'}
var obj2 = Object.assign({}, obj1); // obj2 become {name:'John'}
console.log(obj2); // {name:'John'}

obj2.name = 'Kevin';
console.log(obj1, obj2, obj1 === obj2); // {name:'John'} {name:'Kevin'} false

3-5. Modify value of copy without changing original

var obj1 = {name:'John', score:[1,2]}
var obj2 = Object.assign({}, obj1);
obj2.score = o2.score.concat(); // copy obj2.score
obj2.score.push(3);
console.log(o1, o2, o1 === o2, o1.score === o2.score);
// {name:'John', score:[1,2]} {name:'John', score:[1,2,3]} false false

• If you obj2.score.push(3) without obj2.score = o2.score.concat() (= copy), obj1 is also gonna change like as below
  • {name:'John', score: [1,2,3]}
  • And They are also different, so obj1 === obj2 return false.

3-6. Object freeze

• You can’t change value, when you use freeze

var obj1 = {age : 5};
obj1 = Object.freeze(obj1);
obj1.age = 20;
console.log(obj1.age); // 5
Object.isFrozen(obj1) // true

obj1.name = 'John';
console.log(obj1, obj1.age); // {age : 5}, 5

• But you can change child’s value. If you use only Object.freeze()

var emp = { name : "Mark", address : {  street: "Rohini", city: "Delhi",  }, };
Object.freeze(emp);
emp.name = 'Jenny';
emp.address.city = 'Seoul';
console.log(emp.name, emp.address.city) // Mark , Seoul

• If you wanna keep all of Object values, command like as below.

function deepFreeze(object) {
  var propNames = Object.getOwnPropertyNames(object);
  for (let name of propNames) {
    let value = object[name];

    object[name] =
      value && typeof value === "object" ? deepFreeze(value) : value;
  }

  return Object.freeze(object);
}

var emp2 = {
       name : 'Amy',
       address :  {
                    street: "Rohini",
                    city: "Delhi",
                  },
       favorite : {
                    food : {
                             fruit : 'apple',
                             vegetable : 'onion',
                           },
                  },
          };


deepFreeze(emp2);

emp2.favorite.food.fruit = "Mango";
console.log(emp2.favorite.food.fruit) // 'apple'

999. Studying JavaScript Immutability from

• Learn JavaScript Blog1
• Learn JavaScript Blog2
• This Page is Only for study myself. My English is not perfect.