JavaScript immutability

변수는 자유롭게 선언 가능하고 값도 변경할 수 있기 때문에 활용도가 높다. 하지만 변하면 안 되는 값이 변경 가능한 상태라면 신뢰성 문제가 생길 수 있다. 이런 때에는 변경 불가능한, 불변(immutability)의 변수를 만들어 볼 수 있다. 여기서는 변수를 불변하도록 변경하는 것과 그 특징을 알아본다.

*생활 코딩 javascript immutability 내용을 공부하며 정리한 것입니다.

 

1. var vs const 

- var로 변수 선언 시 변수 값 변경이 가능하지만 const로 변수 선언 시, 값 변경이 불가능하다.

 

var a=1;
a=2;

console.log(a);  //2

위 코드처럼 a의 값을 1로 주고나서 2로 변경하면 a의 값은 최종적으로 2라는 것을 확인할 수 있다.

즉, 변수의 값 변경이 가능하다

const b=1;
b=2; //error!

위 코드처럼 b의 값을 1로 선언한 후 2로 변경하면 타입에러가 난다.

 

2. 데이터 타입별 immutability

- 자바스크립트의 데이터 타입으로는 기본타입과 참조타입(=객체)이 있다.

기본타입 : number,string,boolean, undefined, null

참조타입 : object, array, function

 

기본타입부터 살펴보면, 변수 p1과 p2에 각각 값 1을 주고 비교해보면 true가 나온다.

var p1=1;
var p2=1;

console.log(p1==p2);  //true
console.log(p1===p2);  //true

반면에, 참조 타입은 각각 선언 후 비교하면 false가 나온다.  

var o1 = {'name':'hi'};
var o2 = {'name':'hi'};

console.log(o1==o2); //false
console.log(o1===o2);  //false

이렇게 결과가 다른 이유는 기본타입의 경우 값 자체를 비교하지만 참조 타입의 경우 가변성을 갖기 때문에 참조값이 같아야 true가 된다.

아래의 경우처럼 같은 값을 참조하는 경우에는 true가 된다.

var o1 = {'name':'hi'};
var o3 = o1;

console.log(o1===o3)  //true

다만, 같은 값을 참조하는 경우 아래처럼 원본 값도 바뀌게 된다.

var o1 = {'name':'kim'};
var o2 = o1;

o2.age = 20;

console.log(o1)  //{'name':'kim','age':20}

그럴 때는 원본 값을 복사해서 새로이 참조하도록 한다. 그렇게 되면 참조값이 다르기 때문에 값 변경 시 원본에 영향을 미치지 않고 둘을 비교했을 때는 false가 나오게 된다.

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

o2.age = 20;
console.log(o1) //{'name':'kim'}
console.log(o2) //{name: "kim", age: 20}

3. const vs Object.freeze

- immutable한 상태를 만드는 방법은 const와 Object.freeze가 있는데 둘의 차이를 살펴보면 아래와 같다.

const : 참조값을 못 바꾸게 함

Object.freeze : 값 자체를 못 바꾸게 함

const o1 = {name:'kim'};
Object.freeze(o1);  //변수 o1은 immutable한 상태가 된다. 
o1.name = 'park'; //값을 바꾸려하지만 immutable한 상태이므로 바뀌지 않는다.
console.log(o1); //{name:'kim'}

var o2 = {'name':'lee'};
o1 = o2; //error o1은 const로 선언되어 참조값을 변경할 수 없다.