[JavaScript] 깊은복사, 얕은복사, Object.freeze()

Object.freeze()

객체를 동결하며, 동결된 객체는 더이상 변경될 수 없습니다.

동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지한다.

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42

 

 

얕은 복사: 객체의 property들을 복사 (depth 1단계까지만)

깊은복사: 객체의 프로퍼티들을 복사 (모든 depth에 대해서)

1. 프로퍼티들을 복사한다.

2. 프로퍼티들 중에 참조형이 있으면 1번 반복 --> 재귀

Object.assign()

깊은복사를 해야만 immutable(변경불가능) 하다라고 말할 수 있음.

불변객체를 말함

불변객체는 매번 새로운 객체를 생성한다는 개념인데

그리하여 불변객체를 사용하기 위해 매번 깊은 복사를 함. 

깊은 복사를 해야만 기존객체와 동떨어진 별개의 데이터가됨

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

let a = {
  a: 1,
  b: [1, 2, 3],
  c: {d: 1, e: 2}
}
let b = Object.assign({}, a); //얕은복사
b.b = Object.assign([], a.b); //깊은복사

console.log(a);
console.log(b);

b.b[1] = 20;

console.log("b", b); //b { a: 1, b: [ 1, 20, 3 ], c: { d: 1, e: 2 } }
console.log("a", a); //a { a: 1, b: [ 1, 2, 3 ], c: { d: 1, e: 2 } }

 

for문 예외

let obj = {
  prop1: 1,
  prop2: 2,
  prop3: 3
}

for(const prop in obj) {
  console.log(prop) // prop1, prop2, prop3
}
//
let keys = Object.keys(obj);
for(let i = 0; i< keys.length; i++) {
  const prop = obj[keys[i]];
  console.log(prop); // 1, 2, 3
}