[TIL] Javascript 얕은 복사, 깊은 복사

 

JavaScript 객체와 배열을

복사하는 두 가지 방법

 

얕은 복사(shallow copy)

깊은 복사(deep copy)

 

📖공부한 내용

 

🖊️얕은 복사 (shallow copy) 

원본 객체의 프로퍼티를 복사하는 과정

 

🖊️  문제점 

중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사

얕은 복사를 사용하면 복사본의 일부가 변경되면 원본 값도 변경될 수 있다

 

 

🧑‍💻얕은 복사 예시

 

const original = {
  a: 1,
  b: { c: 2 },
};

const shallowCopy = { ...original }; // 또는 Object.assign({}, original);

shallowCopy.a = 10; // 복사본의 상위 수준 프로퍼티를 변경
shallowCopy.b.c = 20; // 복사본의 하위 객체를 변경

console.log(original.a); // 1 (원본은 변경되지 않음)
console.log(original.b.c); // 20 (원본이 변경됨)

 

 

🖊️  깊은 복사 (deep copy)

내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법

원본 객체의 모든 레벨의 객체 및 배열을 복사하여 새로운 복사본을 만든다

따라서 복사본을 수정하더라도 원본에는 영향을 미치지 않는다

 

 

 

🧑‍💻깊은 복사 예시

 

const original = {
  a: 1,
  b: { c: 2 },
};

const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.a = 10; // 복사본의 상위 수준 프로퍼티를 변경
deepCopy.b.c = 20; // 복사본의 하위 객체를 변경

console.log(original.a); // 1 (원본은 변경되지 않음)
console.log(original.b.c); // 2 (원본은 변경되지 않음)