[JS] 얕은 복사와 깊은 복사

참조) 깊은 복사 테스트할 수 있는 페이지

📌 객체의 얕은 복사와 깊은 복사

자바스크립트의 참조형 데이터에서만 유효한 개념이다

얕은 복사 (shallow copy) : 참조형의 1차원 데이터만 복사
깊은 복사 (deep copy) : 참조형의 모든 차원 데이터 복사

✅ 얕은 복사 (shallow copy)

const a = { x : 1 };
const b = Object.assign({}, a);
//a와 b는 아예 다른 객체 (생김새는 똑같지만 다른 주소를 가리킴)

b.x = 2;

console.log(b)
console.log(a)

얕은 복사하는 방법

const b = Object.assign({}, a) //Object.assign() 메소드 사용
const b = { ...a } //전개 연산자 사용

✅ 깊은 복사 (deep copy)

참조형 안에 또 참조형 데이터가 들어있으면 다차원 데이터.
얕은 복사로는 1차원 데이터만 복사되므로 n차원 데이터는 완전히 복사할 수 없다. 여전히 참조형 상태로 남아있음

const a = { x : { y : 1 } };
const b = { ...a };

b.x.y = 2;

console.log(b) // { x : { y : 2 } }
console.log(a) // { x : { y : 2 } }

깊은 복사하는 방법

터미널에 npm i lodash 입력해서 lodash 패키지 설치

import cloneDeep from 'lodash/cloneDeep';

const a = { x : { y : 1 } };
const b = cloneDeep(a);

b.x.y = 2;

console.log(b)
console.log(a)

➡️ a 와 b 객체를 완벽히 분리 가능

📌 배열의 얕은 복사와 깊은 복사

방식은 객체와 동일하다

얕은 복사

1. .concat() 메소드 사용
2. 전개 연산자 사용

깊은 복사

lodash 패키지의 cloneDeep

✴️ 예시

import cloneDeep from 'lodash/cloneDeep';


const a = [[1, 2], 3];
const b = a.concat([]); //얕은 복사
const c = cloneDeep(a); //깊은 복사

console.log(a) //[[1, 2], 3]
console.log(b) //[[1, 2], 3]
console.log(c) //[[1, 2], 3]

a[0][0] = 4;

console.log(a) //[[4, 2], 3]
console.log(b) //[[4, 2], 3]
console.log(c) //[[1, 2], 3]