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

얕은 복사(Shallow copy)

원본 개체의 속성과 동일한 참조를 공유하는 복사 방법

'메모리 주소 값'을 복사한 것

얕은 복사를 사용할 경우 원본 데이터에 영향을 끼치므로 주의해야 한다.

let arr = ["noodles", { list: ["eggs", "flour", "water"] }];

let copy = arr;
console.log(copy)
copy[1].list = ["rice flour", "water"];
console.log(arr[1].list);
// Array [ "rice flour", "water" ]

 

스프레드 연산자 사용

const obj = {
	name: "otter",
	gender: "male"
}

const newObj = { ...obj }

- 스프레드 연산자는 1depth까지는 깊은 복사, 2depth 이상에서는 얕은 복사가 적용된다.

 

깊은 복사(Deep copy)

복사된 객체의 내부의 값만 복사한다. (다른 주소를 참조함)

깊은 복사는 복사본을 변경했을 때 원본 데이터에 영향을 끼치지 않는다

 

JSON 객체 이용

const obj = {
	name: "otter",
	gender: "female",
  favoriteFood: {
		first: "sushi",
		second: "hamburger"
  }
}

const copy = JSON.stringify(obj) // 객체 obj를 문자열로 copy 변수에 담음
const deepCopy = JSON.parse(copy) // parse를 사용해 객체로 변환.

// 축약해 이런식으로 작성할 수 있다
const copy = JSON.parse(JSON.stringify(obj));

참고
본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다
https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy
https://cocobi.tistory.com/156
[JavaScript] 얕은 복사(shallow copy) vs 깊은 복사(deep copy)