자바스크립트 ) Shallow Copy & Deep Copy

자바스크립트에서 객체에 대해 공부를 하다보면 의문이 생길 수 있다.
객체를 복사한 후에 복사한 객체를 수정했는데 원본 객체의 값이 변했던 적이 한번쯤 있었을 것이다. 왜그럴까??

let a = {name : "K"}
let b = a;
b.name = "D";

console.log(a.name) // D
console.log(a===b) // true;

대인연산을 써서 객체를 변수에 할당하면 원래 객체의 주소값이 할당 됨을 확인 할수 있다.

얕은복사 - Shallow Copy

이것을 가리켜 얕은 복사(Shallow Copy) 라고 하며 혹은 '참조에 의한 객체 복사'라고도 한다.

만약에 이런 방식이 아닌 서로 다른 객체를 만들고 싶다면 깊은 복사(Deep Copy)를 하면 된다.

여러가지 방법을 살펴보자.

1. 객체의 모든 프로퍼티를 순회하면서 복제할 객체에 추가

for (let key in obj) {

	clone[key] = obj[key];

}

2. Object.assign 함수 사용

Object.assign(clone, [obj1, obj2, obj3...])

obj1부터 obj3까지의 프로퍼티들을 clone객체에 추가하는 방식
만약 기존 객체에 복제할 프로퍼티가 이미 존재한다면 값이 변경된다.

3. slice함수 사용 (자세한 내용 mdc참조)

4. spread operator (전개 연산자) 사용

let clone = {...obj}

깊은복사 - Deep Copy

깊은복사를 하는 2가지 방법을 살펴보자

1. 재귀적으로 해결하는 방법

function cloneObject(obj) {
  var clone = {};
  for (var key in obj) {
    if (typeof obj[key] == "object" && obj[key] != null) {
      clone[key] = cloneObject(obj[key]);
    } 
    else {
      clone[key] = obj[key];
    }
  }

  return clone;
}

let obj  = {
  name: "k",
  subobj : {
    age : "10"
  }
};

let clone = cloneObject(obj);

console.log(obj);
console.log(clone);

console.log(obj===clone); //false
console.log(obj.subobj === clone.subobj); //flase

2. lodash 라이브러리 사용하기

let clone = _.cloneDeep(obj);

결론

• 얕은복사: 객체를 새로운 변수에 할당 했을 때 객체의 값들이 복사가 되는게 아닌 객체의 주소값이 할당이 되는 복사, 따라서 복사한 변수의 값을 바꾸면 원래 객체의 값도 바뀜, 참조에 의한 객체 복사라고도 함.
  
  
• 깊은 복사: 얕은 복사와 달리 주소값이 아니라 값 자체를 복사하는 방식