#JavaScript 불변성(Immutability)

https://opentutorials.org/module/4075

JavaScript Immutability

이 강좌를 참고하여 정리한 글입니다.

불변성이란?

먼저 javascript의 **immuatability(불변성; 데이터를 변하지 못하게 함)**를 공부하기

CRUD에서 가장 중요한 것은?
Create, Read -원본 데이터(origin)를 생성하고 읽음

⇒ 원본 데이터의 일부분을 불변하게 만든다면? 필요한 부분만 가변할 수 있음 🙂

이름에 대한 불변함

---

내용에 대한 불변함

js가 변수가 어떤 값을 가리킬 때 어떤 방식으로 가리키는 가에 대한 구체적인 동작방식을 이해할 필요가 있음

 

원자적(더이상 쪼갤 수 없는) 데이터 vs 객체

데이터 타입에 따라 완전히 달라짐 

1은 불변하기 때문에 원시데이터 타입은 값이 같으면 같다.

객체는 여러 property와 이에 대한 값이 바뀔 수 있음. 그렇기에 가변성이 있다. 같은 값을 가진 객체라고 해도 각자를 가리킨다.

var p1 = 1;
var p2 = 1;
console.log(p1,p2,p1===p2);
 
var o1 = {name:'kim'}
var o2 = {name:'kim'}
console.log(o1,o2,o1===o2);

var p1 = 1;
var p2 = 1;
console.log(p1, p2, p1===p2);

var o1 = {name:'kim'};
var o2 = {name:'kim'};
console.log(o1, o2, o1===o2);
// 1 1 true
// {name:'kim'} {name:'kim'} false

 

원시형 데이터가 값이 같을 때는 같은 값을 가리키다가, 값이 달라졌을 때 다른 값을 가리킨다.

객체는 같은 값이라고 하더라도 새로운 객체를 만든다.

그리고 큰 차이점은 값 자체를 property를 통해서 바꿀 수 있다는 점!

var p1 = 1;
var p2 = 1;
var p3 = p1;
var p3 = 2;

var o1 = {name:'kim'};
var o2 = {name:'kim'};
var o3 = o1;
o3.name = "lee";    // 하지만 o1도 name:'lee'가 됨. o3만 내용을 수정할 수 있다면..

객체를 immutable하게 다루는 법

o1이라는 원본을 어떻게 불변하게 만들 수 있을까

Object.assign({}, o1) ; o1를 빈 객체({})와 병합해서 하나의 객체로 만들어서 반환함

 

var o1 = {name:'kim'}
var o2 = Object.assign({}, o1);
o2.name = 'lee';
console.log(o1, o2, o1 === o2);
// {name:'kim'} {name:'lee'} false

Nested Object  = 중첩된 객체

; 객체 property의 값이 또 property일 때

score라는 property의 값이 object의 형태일 경우 복사하고자 하면, 값이 아닌 위치를 복사함 → 원본 데이터에도 영향이 갈 수 있음!

o2.score = o2.score.concat()

; o2가 가리키는 score의 값을 복제(concat)한다

 

즉, 이런 복사는 원본에 대한 불변성을 유지해준다!

var o1 = {name:'kim', score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score = o2.score.concat();
o2.score.push(3);
console.log(o1, o2, o1 === o2, o1.score === o2.score);

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

---

불변의 함수

"객체가 어떻게 동작하는가, 어떻게 서로를 참고하는 가"를 알면 다양한 전략을 구사하고 여러 사고를 미연에 방지하거나 편리함을 추구할 수 있다!

// function fn(person) {
//     person = Object.assign({}, person);
//     person.name = 'lee';
//     return person;
// }

// var o1 = {name: 'kim'};
// // 함수가 동작하는 모습
// // var person = o1;
// // person.name = 'lee';
// var o2 = fn(o1);
// console.log(o1, o2);

function fn(person) {
    person.name = 'lee';
}
var o1 = {name: 'kim'};
var o2 = Object.assign({}, o1);
fn(o2);
console.log(o1, o2);

 

mutable API vs. immutable API 비교

✔ "불변의 함수 만들기에서 봤던 메커니즘이 실제로 어떻게 발현되는 가?"를 살펴보기

원본을 바꾸지 않고 내가 바꾸고 싶은 데이터만 바꿀 수 있으므로 영향을 최소화할 수 있고 소프트웨어를 단순화할 수 있음 😊

이렇게 원본을 바꾸게 되면 복제 과정이 필요 X  → 성능이 훨씬 빠르다

concat()은 복제 과정이 들어가기 떄문에 대체적으로 성능이 😈

코드의 논리, 코드를 짜는 상황에 따라 적절하게 배치하며 사용하기 = 좋은 개발자의 덕목

var score = [1, 2, 3];
var a = score;
var b = score;
// 1억개의 다른 변수도 score를 참조중~
//  score.push(4);
var score2 = score.concat(4);
console.log(score, score2, a, b);
// [ 1, 2, 3 ] [ 1, 2, 3, 4 ] [ 1, 2, 3 ] [ 1, 2, 3 ]

---

 

객체를 불변하게 만들기 (Object.freeze) 🧊

지금까지는 원본 데이터를 수정하지 않기위해 조심하는 방법을 사용

이 챕터부터는 원천적으로 막는 방법을 배울 예정

그 누구도 객체를 수정하지 못하게 객체를 얼려버리기 

객체를 얼리는 방법

freeze를 풀고 싶다면 기존 것을 복제를 해야함 → freeze는 객체의 property를 얼리는 것

공식적으로 freeze한 것을 해동하는 방법은 없음.. 😈

var o1 = {name:'kim', score:[1,2]}
Object.freeze(o1);
console.log(o1);
o1.name = 'lee';
console.log(o1);
// freeze를 풀고 싶다면 기존 것을 복제를 해야함
// 공식적으로 freeze한 것을 해동하는 방법은 없음.. 😈

// freeze는 객체의 property를 얼리는 것
Object.freeze(o1.score);
o1.city = 'seoul';
o1.score.push(3);
// score의 배열 객체는 다른 곳에 저장되어 있음, reference만 저장됨
// Object.freeze(o1.score) -> freeze된 property에 push 불가능
console.log(o1);

 

object.freeze vs. const

object.freeze는 값 자체를 바꾸지 못하게 하고 const는 이름이 가리키는 값을 다른 것으로 못 바꾸게 하는 것
따라서, freeze는 값을 규제하고 const는 이름을 규제한다고 볼 수 있다

둘을 혼합해서 씀으로써 mutable하면 안되는 값을 강력하게 규제할 수 있다!

const o1 = {name:'kim'}
Object.freeze(o1);
const o2 = {name:'lee'}
// o1 = o2;`// err: assignment to constant var => 이름을 규제
o1.name = 'park';
console.log(o1);    // freeze -> 값을 바꾸려는 시도 실패 => 값을 규제