JavaScript - Object.freeze, deep copy

in JS on 공부, Javascript, Let


Object.freeze(), Object.defineProperty()

라는 메소드가 있다.

const OBJ2 = {
  prop1 : 1
}
Object.freeze(OBJ2) //property도 얼려버린다. 상수로 만들어버린다는 뜻이다. ES5.

OBJ2.prop1 = 10; //안바뀐다.

nest 시키면 어떻게 되는지 보겠다.

const OBJ2 = {
  prop1 : 1,
  prop2 : [1, 2, 3]
}
Object.freeze(OBJ2) //property도 얼려버린다. 상수로 만들어버린다는 뜻이다. ES5.

OBJ2.prop2 = 10; //이건 물론 안된다.
OBJ2.prop2[1] = 20 //가능하다. 이 안에 있는 애들은 안 얼었기 때문이다. 이 경우 아래처럼

Object.freeze(OBJ2.prop2) //를 또 해줘야 한다.

객체 안에 있는 모든 애들을 다 얼리고 싶다면 아래와 같이 하면 된다.

  1. Obj 객체 자체를 얼린다.
  2. Obj 내부의 프로퍼티들을 순회하면서 혹시 참조형이면 1번 반복, 재귀로 돌린다.

위 것 자체를 DeepFreezing이라 한다.

여기서 잠깐 얕은 복사, 깊은 복사를 짚고 넘어가겠다.

얕은 복사는 객체의 주소값만 복사가 되어서 원본을 바꾸면 새로운 애도 바뀌고 깊은 복사는 객체가 아예 똑같은게 하나가 더 만들어져서 원본을 바꿔도 새로운 애는 바뀌지 않는다는 것이다.

얕은 복사 : 객체의 프로퍼티들을 복사 (depth 1단계까지만) 깊은 복사 : 객체의 프로퍼티들을 복사 (모든 depth에 대해서)

var a = {
  a : 1,
  b : [ 1, 2, 3 ],
  c : { d: 1, e: 2 }
}

var b = Object.assign({}, a); // 복사가 된다. 근데 얕은 복사이다. 프로퍼티가 가리키고 있는 메모리를 복사해옴.

b.b = Object.assign([], a.b);

b.b[1] = 20;
console.log(a.b); //1번째 값이 20으로 바뀌지 않는다.

위처럼 참조형마다 깊은 복사를 해줘야 한다. 이렇게 깊은 복사를 해야만 immutable 하다고 할 수 있다.

immutable : 불변 객체. 매번 새로운 객체를 생성한다. 무조건 깊은 복사를 하는 것이라고 생각할 수 있다.