JavaScript - 깊은 복사, 얕은 복사

서론

 

 

한 변수에 저장된 데이터를 다른 변수에 복사하여 할당하는 방법에는 깊은 복사(deep copy)와 얕은 복사(shallow copy)가 존재한다. 

 

두 방식의 차이점을 알아보자

 

 

얕은 복사 - shallow copy

 

 

메모리 사용량을 최소화하여 복사하기 위해 주소값만 복사한다.

 

주소값만 복사하기 때문에 복사 속도가 빠르고 메모리 사용량이 적다.

 

하지만, 같은 주소값을 참조하기 때문에 값이 변경되면 해당 주소를 참조하고 있는 모든 변수에 영향이 간다.

 

< 예시 코드 >

let student = {name: "Mike", age: 25, height: 180};
let shallow_copy = student;

console.log(shallow_copy.name); // "Mike"

student.name = "Andy";  // student 변경

console.log(shallow_copy.name); // "Andy"

 

 

 

깊은 복사 - deep copy

 

 

얕은 복사와는 다르게 데이터 자체를 복사한다.

 

원본 데이터와 복사된 데이터는 다른 메모리 영역을 차지한다.

 

원본 데이터를 변경해도 복사된 데이터에는 영향을 주지 않는다.

 

얕은 복사보다 상대적으로 속도가 느리고 메모리 영역도 많이 차지한다.

 

< 예시 코드 >

 

let a = 100;
b = a;
console.log(b); // 100

a = 200;

console.log(a); // 200

 

 

 

 

레퍼런스 비교

 

 

두 변수가 같은 주소를 참조하고 있는지 확인하려면 '===' 연산자를 사용합니다.

 

 

 

언제 깊은 복사? 얕은 복사?

 

 

자바스크립트 자료형은 원시 값(primitive)과 객체(Object)가 존재합니다.

 

https://besforyou.tistory.com/278

 

원시 값들은 언제나 깊은 복사가 이루어집니다.

 

객체들은 기본으로 얕은 복사가 이루어져 PC자원 이용을 최소화합니다.

 

개발자가 원하는 경우 객체의 깊은 복사가 이루어지게 할 수 있습니다.

 

 

 

객체 깊은 복사 방법

 

1. 객체 생성 후 속성 모두 복사

let user = {
  name: "John",
  age: 25
}

let student = {}

for (let key in user) {
  student[key] = user[key];
}

if (student === user) {
  console.log("Same reference");
} else {
  console.log("Different reference");
}

2. Object.assign

 

syntax(구문)

 

Object.assign(dest, [src1, src2, src3...])

 

dest가 목표, 뒤이어 오는 인자들은 source

 

<예시 >

let user = {
  id: "John",
  age: 30
};

let clone = Object.assign({}, user);