얕은 복사, 깊은 복사

📌 얕은 복사 shallow copy

const origin = {
  name: "joe",
  info: {
    age: 27
  }
};

shallowCopy = { ...origin }; // 얕은 복사 

copy.name = "changed" 
console.log("origin >>>:", origin.name); // 영향 ❌
console.log("copy >>>:", shallowCopy.name); // 영향 ✅ 

copy.info.age = 99;
console.log(origin.info.age); // 99 
console.log("copy",shallowCopy.info.age); // 99

Primitive Type / Reference Type

🔹 원시 타입 (Prmitive Type)

Number, String, Boolean, null, undefined, Symbol, BigInt
원시 타입은 값 자체를 복사하기 때문에 서로 독립적이다.

let val = 1;
let valCopy = val;

valCopy = 20;

console.log(val); // 1
console.log(valCopy); // 20

🔸 참조 타입 (Reference Type)

Object, Array, Function
참조 타입은 원본 메모리 값을 공유하기에 서로 독립적이지 않다.

let arr = [1, 2, 3];
let arrCopy = arr;  
arrCopy.push(4);
 
console.log(arr); // [1, 2, 3, 4] 
console.log(arrCopy); // [1, 2, 3, 4]

얕은 복사의 경우, 중첩된 객체의 값이 아닌 최상위 속성만 복사 그러므로,
복사본의 최상위 속성을 재할당해도 원본 객체에는 영향을 끼치지 않는다.

복사본의 중첩 객체 속성을 재할당하면 원본 객체에 영향을 끼친다.

JavaScript에서, 모든 표준 내장 객체의 복사 작업

• 전개 구문 ...rest
• Array.prototype.concat()
• Array.prototype.slice()
• Array.from()
• Object.assign()
• Object.create()
  은 깊은 복사가 아닌 얕은 복사본을 생성

📌 깊은 복사 Deep copy

직렬화가 가능하다면 JavaScript 객체의 깊은 복사를 만드는 한 가지 방법은 JSON.stringify()를 사용하여 객체를 JSON 문자열로 변환한 다음
JSON.parse()로 문자열을 다시 (완전히 새로운) JavaScript 객체로 변환하는 것

const origin = [
  { name: "joe" },
  { info: { age: 20 } }
];

deepCopy = JSON.parse(JSON.stringify(origin));
deepCopy[1].info.age = 30;

console.log(origin) // origin ...
console.log(deepCopy) // copy ...

JSON.stringify()는 단순 객체만 복사 가능한 얕은 방법이고
함수, 심볼, DOM, 순환 참조 등 복잡한 구조가 있으면 절대 쓰면 안됨
→ 이 때는 structuredClone() lodash.cloneDeep와 같은 툴을 쓰면 됨

주의

-Mdn : 깊은복사