Object.assign() 사용법

JavaScript의 Object.assign()메서드 사용법을 알아보자.

Object.assign(obj1, obj2)

obj1에 obj2의 값을 덮어씌우며 수정된 obj1이 리턴된다.

---

자세한 내용은 예시로 살펴보자.

//obj를 선언, 할당하고 assign 메서드를 이용해 copiedObj를 생성한다.

const obj = {
      mastermind: 'Joker',
      henchwoman: 'Harley',
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };

const copiedObj = Object.assign({}, obj);

두 객체를 직관적으로 확인하기위해 표로 작성해보면 다음과 같다.

obj	copiedObj
{ mastermind: 'Joker', henchwoman: 'Harley', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: {     'Jared Leto': 'Suicide Squad',     'Joaquin Phoenix': 'Joker',     'Heath Ledger': 'The Dark Knight',     'Jack Nicholson': 'Tim Burton Batman',    }, }	{ mastermind: 'Joker', henchwoman: 'Harley', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: {     'Jared Leto': 'Suicide Squad',     'Joaquin Phoenix': 'Joker',     'Heath Ledger': 'The Dark Knight',     'Jack Nicholson': 'Tim Burton Batman',    }, }

내부 데이터를 수정해보자.

copiedObj.mastermind = 'James Wood';
obj.henchwoman = 'Adam West';

obj	copiedObj
{ mastermind: 'Joker', henchwoman: 'Adam West', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: {     'Jared Leto': 'Suicide Squad',     'Joaquin Phoenix': 'Joker',     'Heath Ledger': 'The Dark Knight',     'Jack Nicholson': 'Tim Burton Batman',    }, }	{ mastermind: 'James Wood', henchwoman: 'Harley', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: {     'Jared Leto': 'Suicide Squad',     'Joaquin Phoenix': 'Joker',     'Heath Ledger': 'The Dark Knight',     'Jack Nicholson': 'Tim Burton Batman',    }, }

obj와 copiedObj의 string 프로퍼티 값을 각각 수정하였으나
서로에게 영향을 주지 않았다. string 값은 깊은 복사가 되기 때문이다.

그러나..!

delete obj.twins['Jared Leto'];

obj	copiedObj
{ mastermind: 'Joker', henchwoman: 'Adam West', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: {     'Joaquin Phoenix': 'Joker',     'Heath Ledger': 'The Dark Knight',     'Jack Nicholson': 'Tim Burton Batman',    }, }	{ mastermind: 'James Wood', henchwoman: 'Harley', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: {     'Joaquin Phoenix': 'Joker',     'Heath Ledger': 'The Dark Knight',     'Jack Nicholson': 'Tim Burton Batman',    }, }

객체 내부의 객체를 수정했을 때는 동시에 수정되는 것을 볼 수 있다.

결론

Object.assign()으로 객체를 복사했을 때
객체의 값이 원시자료형인 경우 깊은 복사가 되지만
객체의 값이 참조자료형인 경우 얕은 복사가 된다.