[Frontend] JavaScript : 깊은 복사와 얕은 복사 + 불변성

깊은 복사와 얕은복사

자바스크립트로 구현을 하다보면 데이터 복사를 할 때가 있는데, 이 때 나오는 개념인 깊은 복사와 얕은 복사에 대해 정리해보려 한다. 간단히 요약하면, 깊은 복사는 실제 값을 복사하고 얕은 복사는 객체의 참조 값(주소 값)을 복사한다.

 

자바스크립트 데이터 타입에는 원시 타입과 참조 타입이 있는데, 이 때 원시 타입의 값은 깊은 복사를 하고, 참조 타입의 값은 얕은 복사를 한다고 보면 된다.  

 

타입	원시 타입 (Primitive Type)	참조 타입 (Object/Reference Type)
종류	1. number 2. string) 3. boolean 4. undefined 5. null 6. symbol	1. 객체 2. 배열 3. 함수 4. 정규 표현식

 

깊은 복사

원시 타입의 값을 복사할 때 깊은 복사가 이루어지며, 기본 값과 복사된 값은 다른 독립적인 메모리 공간에 할당하기 때문에, 복사된 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않는다. 즉, 자바스크립트의 원시 타입은 불변성을 가진다.

 

깊은 복사 : 서로 독립된 값

let original = 1;
let copy = 2; 
copy = 3; 

console.log(original);	// 1
console.log(copy);	// 3 => 기존 값에 영향을 끼치지 않는다.

불변성(Immutability)이란?

 

불변성란 말 그대로 변하지 않는 것을 의미한다. 자바스크립트의 원시 타입은 불변하고, 반면 참조 타입은 객체 내부의 값을 변경하면 객체를 참조하고 있는 다른 값들도 다 같이 변경된다.

불변성을 지켜서 코드를 작성해야하는 이유?
내가 모르게 상태가 변한다면 오류가 생길 수 있기 때문에, 불변성을 지켜서 신뢰할 수 있는 코드를 짜야 한다.

불변성을 유지하려면 어떻게 해야하나요?
스프레드 문법을 사용하거나, Object.assign, Object.freeze 같은 함수를 사용할 수 있다.

 

얕은 복사

참조 타입의 값을 복사할 때 얕은 복사가 이루어지며, 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 그래서 복사된 객체의 값을 변경하면 기존 값에 영향을 끼친다.

 

얕은 복사 : 서로 같은 값 공유

let original = { name: 'apple', price: 500 };
let copy = original; 
copy.name = 'banana'; 

console.log(original);	// { name: 'banana', price: 500 }
console.log(copy);	// { name: 'banana', price: 500 } => 기존 값에 영향을 끼친다.