[JS] Shallow Copy

📚 Shallow Capy - 얕은 복사

자바스크립트에서는 복사할 때 항상 얕은 복사가 일어난다.

객체를 복사할 때 객체 데이터 자체가 복사되는 것이 아니라 객체의 메모리 주소가 복사되는데 이것을 얕은 복사라 한다.

따라서 어떤 객체를 복사한 후 데이터를 변경하면,

두 개의 변수가 가리키는 객체는 동일하기 때문에 변경사항이 다른 복사본에도 똑같이 반영된다.

이는 함수에서도 마찬가지이다.

함수의 인자로 객체를 넘겨줄 경우, 객체의 메모리 주소를 받아오기 때문에 함수 내에서의 변경사항이 밖에서도 반영된다.

이때 객체가 원래의 의도와는 맞지 않는 데이터로 오염될 수 있기 때문에 함수의 인자로 객체를 전달하는 것은 좋은 방법이 아니다. 

 

 

아래 코드로 얕은 복사를 직접 확인해보자.

const haesa = { name: 'haesa', age: 20};
const bada = { name: 'bada', pirice: 31};
const gildong = { name: 'gildong', pirice: 15};

const pair1 = [haesa, bada];
const pair2 = Array.from(pair1); // 새로운 배열 생성
console.log(pair1);
console.log(pair2);

3개의 객체를 생성하고, 2개를 짝지어 배열 하나를 만들었다.  →  pair1

Array의 정적 메소드 from()으로 pair1를 복사한다.

pair1과 pair2를 콘솔에 출력하면 다음과 같다.

 

 

 

pair2.push(gildong);
console.log(pair1);
console.log(pair2);

pair2에 gildong을 추가하고 다시 pair1과 pair2를 콘솔에 출력해보자.

pair2에만 gildong이 추가된 것을 알 수 있다. 이는 두 배열이 서로 다른 배열임을 나타낸다.

 

 

 

haesa.age = 22;
console.log(pair1);
console.log(pair2);

이번엔 haesa의 age를 수정하고, pair1과 pair2를 콘솔에 출력해보자.

pair1과 pair2 둘 다 haesa의 age가 수정된 것을 알 수 있다.

이는 두 배열이 가리키는 객체가 동일한 객체인 것을 나타낸다.

즉 Array.from(pair1)로 새로운 배열을 만들 때 객체는 객체 자체가 아닌 객체의 메모리 주소가 복사됨을 알 수 있다.