JS Shallow Copy

 

 

 

브래들리 쿠퍼와 레이디 가가가 주연으로 나왔던 영화 Star is born에서 shallow라는 곡을 참 좋아한다. 

근데 자바스크립트의 shallow 개념은 정말 거지같다. 

 

 

 

 

 

오늘은 Shallow Copy (얕은 복사)에 대해 공부해 보자

 

 

Shallow Copy란?

 

Shallow copy는 단어의 의미에서 유추 할 수 있듯이, 얇게 복사를 한다는 개념이다. 

다음과 같은 객체가 둘 있다고 가정해 보자. 

 

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',
    },
  };

객체 obj를 아래와 같이 빈객체에 복사해 넣는다면 과연 이것은 주소값을 복사해 넣는 것일까 새로운 주소값에 값을 할당하는 것일까?

 

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

정담은 반반이다. 

'mastermind', 'henchwoman'은 새로운 주소값에, 

'relations'와 'twins'는 기존의 주소값을 복새하게 된다. 

 

이러한 이유로 모든것을 복사하지 않는다는 의미로 얕은 복사라고 부르는 것이다. 

 

즉, copiedObj의 'mastermind'와 'henchwoman' 프로퍼티의 경우 값을 재할당 하더라도 obj객체에 영향을 미치지 않는다. 

하지만 나머지 프로퍼티의 경우 이 둘은 같은 주소값을 공유하고 있다. 

 

왜 이런 현상이 나타나는 것일까?

이유는 자바스크립트가 객체를 복사하는 방식에 있다.

Object.assign의 복사방식은 기본적으로 for 루프문을 활용한 방식이기 때문이다. 

 

obj 1번째 프로퍼티에서 값을 복사해 빈객체에 넣고 

2번째 프로퍼티에서 값을 복사해 빈객체에 넣는 방식인데, 객체의 값이 다른 객체이면 값이 주소값이 나올테니

참조타입의 데이터는 진정한 의미의 복사가 이루어지지 않는 것이다.