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

Object.assign(target, ...sources)

 

source의 속성을 복사해 target에 합치고 반영 후 반환한다.

const target = { a: 1, b: 2}
const source = { c: 3, d: 4}

let targetSource = Object.assign(target, source);

//target도 변경됨에 주의하여야 한다
console.log(target); //{a: 1, b: 2, c: 3, d: 4}
console.log(source); //{c: 3, d: 4}
console.log(targetSource); //{a: 1, b: 2, c: 3, d: 4}

 

Object.assign() 으로 객체를 복사하면 가장 바깥쪽 객체는 깊은 복사(참조하는 주소 다름)가 수행된다. 하지만 2차원 이상의 내부 객체는 얕은 복사(같은 주소 참조)만 수행된다.

 

아래 코드를 보면  obj의 가장 바깥쪽 객체에 속하는 a, b는 obj를 복사한 copiedObj와 obj 중 어느 쪽을 변경해도 다른 한 쪽에 영향을 미치지 않지만, 안쪽에 위치하는 객체인 innerObj를 변경하면 양 쪽이 전부 변경되는것을 확인할 수 있다.

const obj = {
      a: 'apple',
      b: 'banana',
      innerObj: {
        c: 'carrot'
      },
    };

    const copiedObj = Object.assign({}, obj);
    
    copiedObj.a = 'alpaca';
    console.log(obj.a); //apple

    obj.b = 'bee';
    console.log(copiedObj.b); //banana
    
	//obj에서 내부 객체에 속하는 c를 삭제하면 opiedObj의 c도 삭제된다
    delete obj.innerObj['c'];
    console.log('c' in copiedObj.innerObj); //false