얕은 복사와 깊은 복사

김원호·2022년 7월 19일

얕은 복사 / 깊은 복사

얕은 복사는 객체의 참조값(주소 값)을 복사하고,

깊은 복사는 객체의 실제 값을 복사합니다.

🤚깊은 복사

기본값(원시값)을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다.

이처럼 실제 값을 복사하는 것을 깊은 복사라고 합니다.

하지만 이것은 자료형을 깊은 복사한 것입니다.

const a = 'a';
let b = 'b';
b = 'c';

console.log(a); // 'a';
console.log(b); // 'c';

// 기존 값에 영향을 끼치지 않는다.

🤚얕은 복사

참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 가리키고 있습니다.

그래서 복사를 하고 객체를 수정하면 두 변수는 똑같은 참조를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 끼칩니다.

이처럼 객체의 참조값(주소값)을 복사하는 것을 얕은 복사라고 합니다.

const a = {
	one: 1,
	two: 2,
};

let b = a;

b.one = 3;

console.log(a); // { one: 3, two: 2 } 출력
console.log(b); // { one: 3, two: 2 } 출력

// 기존 값에 영향을 끼친다.

얕은 복사(Shallow Copy) 방법>

1. Array.prototype.slice()

얕은 복사 방법의 대표적인 예입니다.😃

start부터 end 인덱스까지 기존 배열에서 추출하여 새로운 배열을 리턴하는 메소드 입니다.

만약 start와 end를 설정하지 않는다면, 기존 배열을 전체 얕은 복사합니다.

2. Object.assign()

Object.assign(생성할 객체, 복사할 객체)

3. Spread 연산자 (전개 연산자)

깊은 복사(Deep Copy)방법>

1. JSON.parse && JSON.stringify

JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어집니다.

객체를 json 문자열로 변환 후, JSON.parse()를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어줍니다.

이 방법이 가장 간단하고 쉽지만 다른 방법에 비해 느리다는 것과 객체가 function일 경우, undefined로 처리한다는 것이 단점입니다.