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

깊은복사와 얕은복사의 차이는 기본형과 참조형 복사의 차이에 있다.
변수 복사 과정에 있어 '기본형도 주솟값을 참조한다' 가 맞지만 참조형과의 차이는 '객체의 변수(프로퍼티) 영역' 이 별도로 존재 한다 는 점입니다.

깊은복사

let num1 = 10
let num2 = num1
num2=15

console.log(num1) // 10
console.log(num2) // 15

let num2=num1 에서 num2도 num1과 같은 데이터 '10'을 가지고 있는 주솟값을 바라보지만
num2=15라고 재할당 하는 순간 num2는 새로운 데이터 '15'의 주솟값을 바라보게 됩니다.
주솟값을 복사하는 과정이 한 번만 이뤄지며 독립적인 메모리에 값(ex '15) 자체를 할당하여 생성하는 것이라 볼 수 있다.

얕은복사

let a = 10;
let b = a;
let obj1 = { c: 10, d:'ddd}
let obj2 = obj1

b=15;
obj2.c = 20;

데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유합니다.

*사진 출처 코어자바스크립트

obj2.c=20 이라고 변경을 하여도 같은 주솟값을 바라보기 때문에 obj1의 c값도 20이다.

⭐️ 따라서 불변 객체가 필요한 이유 : 전달 받은 객체에 변경을 가하더라도 원복 객체는 변하지 않아야 하는 경우가 종종 발생하기 때문에

⭐️ 참조형 데이터의 깊은 복사!

1 . object.assign( )

Object.assign(생성할 객체, 복사할 객체) 메서드의 첫번째 인수로 빈 객체를 넣어주며, 두번째 인수로 할당할 객체를 넣으면 된다.

const obj = { a: 1 };
const newObj = Object.assign({}, obj);

newObj.a = 2;

console.log(obj); // { a: 1 }
console.log(obj === newObj); // false

2. 전개 연산자(Spread Operator)

const obj = {
  a: 1,
  b: 2,
};

const newObj = { ...obj };

newObj.b = 3;

console.log(obj); // { a: 1, b: 2 }
console.log(newObj); // {a:1, b:3 }

하지만 위의 2가지 방법 모두 중첩객체 에서는 깊은 복사가 되지 않는다

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

const newObj = { ...obj };

newObj.b.c = 3;

console.log(obj); // { a: 1, b: { c: 3 } }
console.log(obj.b.c === newObj.b.c); // true

3. JSON을 활용한 간단한 깊은 복사

객체를 JSON문법으로 표현된 문자열로 전환했다가 다시 JSON객체로 바꾸는 방법
httpRequest 로 받은 데이터를 저장한 객체를 복사할 때 등 순순한 저보만 다룰 때 활용하기 좋은 방법입니다.

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

const newObj = JSON.parse(JSON.stringify(obj));

newObj.b.c = 3;

console.log(obj); // { a: 1, b: { c: 2 } }
console.log(obj.b.c === newObj.b.c); // false