JS 얕은 복사와 깊은 복사

객체(Object)를 복사하는 방법은 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy) 로 나뉩니다.

사용하는 메서드는 여럿 있지만, 컨셉은 2가지 입니다. 값의 주소 값을 복사해 줄 것인지, 값 자체를 복사해 줄 것인지요.

 

객체같은 참조형 데이터를 복사하게 되면, 값이 메모리 셀에 할당되는 것이 아니라 값이 들어 있는 주소값(참조값) 이 메모리 셀에 들어 갑니다. 때문에 복사를 하게 되면, 값 자체가 아니라 값이 들어가 있는 주소가 전달 됩니다. 이렇게 복사되는 것을 Shallow Copy 라고 합니다.

 

Shallow Copy

spread syntax, Array.prototype.concat(), Array.prototype.slice(),Array.from(), Object.assign(), Object.create() ....

자바스크립트가 제공해주는 메서드들을 이용해서 Shallow Copy 가 가능합니다.

 

예시 입니다.

 

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

let ingredients_list_copy = Array.from(ingredients_list);

ingredients_list_copy[1].list = ["rice flour","water"] // 복사한 객체의 값을 변경 합니다.

console.log(JSON.stringify(ingredients_list)); // 원본도 수정되었습니다.
// ["noodles",{"list":["rice flour","water"]}]

 

객체의 값을 변경할 때는 같은 주소를 공유하고 있는 다른 객체들도 고려해야 합니다.

 

 

Deep Copy

Object 가 serialized 하다면, JSON.stringify() 로 JSON string 으로 만든 후에 JSON.parse() 를 이용해서 새로운 Object 로 만들 수 있습니다. 즉, 주소가 아닌 값 자체를 복사해서 넣어 준다는 뜻입니다.

여기서 serialized 하다는 것은 컴퓨터 메모리 상에 존재하는 객체(Object)를 문자열(string) 로 변환 가능한 것을 말합니다.

 

let ingredients_list = ["noodles",{"list":["eggs","flour","water"]}];
let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));

// deepcopy 된 객체의 값을 수정합니다.
ingredients_list_deepcopy[1].list = ["rice flour","water"]

// 원본 객체는 수정되지 않은 것을 알 수 있습니다.
console.log(ingredients_list[1].list);
// Array(3) [ "eggs", "flour", "water" ]

 

그러나 대부분의 Object 는 위와 같이 단순한 구조로 구성되어 있지 않습니다.

예를 들어, function, Symbols, DOM API 의 HTML 요소들 등은 JSON string 으로 변환시킬 수 없습니다.

 

혹은 structuredClone() 이라는 방법도 있습니다. 이 부분은 조금 더 공부한 후에 포스팅 하도록 하겠습니다.

 

 

참고 자료 🔎

https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy

Deep copy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

structuredClone() - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy

Shallow copy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN