얕은 복사 vs 깊은 복사

객체의 복사만 다룬다.

얕은 복사

---

복사했을 경우 두 개의 참조가 같은 객체를 가리키는 경우

얕은 복사 방법

1. 참조값 할당

const arr1 = [1, 2, 3, 4];
const arr2 = arr1;

arr1[0] = 5;
console.log(arr1);// [5, 2, 3, 4]
console.log(arr2);// [5, 2, 3, 4]

• 위와 같이 arr2는 arr1의 주소값을 복사 받았기 때문에 동일한 데이터를 참조하고 있다.

2. Object.assign()

const person = {
  age: 50,
  name: {
    first: 'hyunsoo'.
    last: 'kim'
  }
}

const copy = Object.assign({}, person);

person.age = 100;
person.name.first = 'minsoo';

console.log(copy.age);//50
console.log(copy.name.first);//minsoo

• 이 방법의 문제점은 객체 내부의 객체는 깊은 복사가 이루어지지 않기 때문에 원본 객체의 객체를 참조한다.즉, 객체의 객체는 원본 객체와 독립적이지 못하다는 것.

3. Spread Operator

const obj1 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
};

const obj2 = {...obj1};

obj1.a = 100;
obj1.c.d = 300;

console.log(obj2.a); //1
console.log(obj2.c.d); //300

• 위 방법도 문제점은 객체안의 객체는 깊은 복사를 하지 못한다는 것이다. 따라서 객체안의 객체는 원본 객체를 참조하고 있게 된다.

깊은 복사

---

복사했을 경우 두 개의 참조가 다른 객체를 가리키는 경우

깊은 복사 방법

1. 직접 함수 만들기

function clone(obj) {
  let result = {};
  for (let el in obj) {
	result[el] = obj[el];  
  }
  return result;
}

const obj1 = {a: 10, b: 20};
const obj2 = obj1;//얕은 복사
const obj3 = clone(obj1)//깊은 복사 

obj1.a = 50;
console.log(obj2.a);//50
console.log(obj3.a);//10

• 위와 같이 함수를 만들어 복사를 하게 되면 각각의 key, value가 복사되어 서로 다른 객체를 가리키기 때문에 독립적이다.

2. JSON 객체의 메소드 이용

const clone = obj => JSON.parse(JSON.stringify(obj));

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

const obj2 = clone(obj1);
obj1.a = 10;
obj1.b.c = 20;

console.log(obj2.a); // 1
console.log(obj2.b.c); // 2

• JSON.stringify 와 JSON.parse를 이용하면 JSON문자열로 변환 후 다시 객체로 변환하기 때문에, 객체에 대한 참조가 없어진다.
  따라서 깊은 복사가 가능하다.