얕은 복사, 깊은 복사

자바스크립트에서 자료형 값들은 원시형과 참조형으로 구분할 수 있다.

원시형

• Number
• String
• Boolean
• Null
• Undefined

참조형

• Object
• Symbol

원시형은 값을 복사할 때 값 자체를 메모리에 할당하기 때문에 서로의 값에 영향을 미치지 않는다.

const num1 = 1;
let num2 = num1;
num2 = 2;

console.log(num1); // 1
console.log(num2); // 2

참조형은 값을 복사할 때 값 자체가 아닌, 값의 주소가 복사되기 때문에 서로에게 영향을 미친다.

const obj1 = { num: 1 };
let obj2 = obj1;
obj2.num = 2;

console.log(obj1); // { num: 2 }
console.log(obj2); // { num: 2 }

이러한 특성으로 인해 참조형을 복사하는 방법은 얕은 복사, 깊은 복사 두가지로 나뉜다.

얕은 복사

얕은 복사란 참조형을 복사할 때 같은 주소값을 참조하는 것을 의미한다.

아래는 얕은 복사를 하는 방법이다.

1. Object.assign()

첫번째 인자로 할당한 객체에 두번째 인자로 할당한 주소값을 복사한다.

const obj1 = {
	a: 1,
  	b: { num: 1 },
}

const obj2 = Object.assign({}, obj1);

obj2.b.num = 2;

console.log(obj1 === obj2) // false
console.log(obj1.b === obj2.b) // true

2. Spread Operator

const obj1 = {
	a: 1,
  	b: { num: 1 },
}

const obj2 = {...obj1};

obj2.b.num = 2;

console.log(obj1 === obj2) // false
console.log(obj1.b === obj2.b) // true

깊은 복사

깊은 복사란 참조형을 복사했을 때, 주소값이 완전히 끊어진 상태를 의미한다.

깊은 복사를 하는 방법.

1. 재귀함수를 이용한 복사

2. JSON.stringify(), JSON.parse()

3. lodash 라이브러리 사용