1. 깊은 복사(Deep copy)

• 원본과 복사본이 서로 다른 참조(주소)를 가지는 것을 말한다.

---

1) 원시 자료형

• 원시 자료형 데이터를 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당되기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 미치지 않는다. 즉, 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사라고 한다.

let testOne = 'apple'
let testTwo = testOne  // testTwo = apple
console.log(testOne === testTwo) // true

testTwo = 'orange'  // 값이 apple인 testTwo 변수에 orange 재할당
console.log(testOne === testTwo)  // 변수 값 변경 후 false

console.log(testOne) // apple -> testOne 변수는 영향을 받지 않는다.
console.log(testTwo) // orange

2) 참조 자료형

• 객체를 프로퍼티 값으로 갖는 객체(객체 안의 객체)의 경우 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 깊은 복사라고 한다.

2-1. JSON.parse & JSON.stringify

2-2. Lodash 라이브러리 사용

// loadash의 cloneDeep을 사용한 깊은 복사
// npm install lodash로 설치한 후, Node.js 환경에서 실행
const _ =require('lodash')

const c2 = _.cloneDeep(o)
console.log(c2 === o)  // false
console.log(c2.x === o.x)  // false

2-3. 재귀 함수

2. 얕은 복사(Shallow copy)

• 원본과 복사본이 동일한 참조(주소)를 가지는 것을 말한다.

---

1) 참조 자료형

• 참조 자료형 데이터를 복사할 때는 변수가 객체의 참조(주소)를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리 공간의 참조(주소)를 가리키고 있다. 그래서 복사를 하고 객체를 수정하면 두 변수는 똑같은 참조(주소)를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 미친다. 즉, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고 한다.

// 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 참조(주소)를 가지고 있다.
let testOne = {apple : 1, orange : 2}
let testTwo = testOne  // testTwo = testone
console.log(testOne === testTwo)  // true

testTwo.orange = 3  // 값이 testOne인 testTwo 변수의 orange의 value값을 3으로 재할당
console.log(testOne === testTwo)  // 변수 값 변경 후에도 true

console.log(testOne)  // {apple : 1, orange : 3} -> testOne 변수도 영향을 받는다.
console.log(testTwo)  // {apple : 1, orange : 3}

• 객체를 프로퍼티 값으로 갖는 객체(객체 안의 객체)의 경우 한 단계까지만 복사하는 것을 얕은 복사라고 한다.
• 하지만 spread 문법을 이용한 복사는 '1 depth' 까지는 '깊은 복사'가 이루어진다. 이후 '2 depth'부터는 얕은 복사가 이루어진다.

let testOne = {apple : 1, orange : {fruit : 2}}
let testTwo = {...testOne}

testTwo.orange = 3

console.log(testOne === testTwo)  // false
console.log(testOne.orange === testTwo.orange)  // false
console.log(testOne)  // {apple : 1, orange : {fruit : 2}}
console.log(testTwo)  // {apple : 1, orange : {fruit : 3}}

// spread 문법을 이용해 2 depth 까지 복사하는 방법
const obj1 = { a: { b:1, c:1 }, d: 2};
const obj2 = { ...obj1, a:{ ...obj1.a } };

obj1.a.b = 100;

console.log(obj1 === obj2) // false
console.log(obj2.a.b) // 1