얕은 복사와 깊은 복사

#얕은 복사

 

객체를 복사할 때 원본 값과 복사된 값이 같은 참조(=메모리 주소)를 가리키는 것.

또한, 객체 안에 객체가 있을 경우에 한 개의 객체라도 원본 객체를 참조한다면 얕은 복사라고 볼 수 있습니다.

얕은 복사 후 해당 변수를 재사용하여 수정한다면 원본 값이 동시에 변하므로 주의가 필요합니다. 

 

#얕은복사의 장단점

 

• 장점: 같은 객체를 공유하므로 메모리를 절약하고, 빠른 장점이 존재한다. 참조에 의한 호출(Call By Reference)에서 얕은 복사가 이루어 지는 이유 중 하나이기도 하다.
• 단점: 두 개 이상의 객체가 같은 대상을 가르키고 있기 때문에, 의도치 않게 여러 개의 객체가 동시에 수정될 수 있다.

 

#Object.assign()

 

우선, 객체의 속성을 복사할 때 자주 사용하는 방식은 Object.assign(target, source)을 이용하는 것입니다.

Object.assign은 두 번째 인자(source)의 객체 프로퍼티들을 첫 번째 인자(target)의 객체에 반영합니다.

객체 복사에 이용하는 경우, 일반적으로 target을 빈 객체 { }로 설정하고 복사할 원본 객체를 source에 두는 방식으로 사용합니다. 예제 코드는 아래와 같습니다.

 

const original = {name: '철수', age: 12};
const clone = Object.assign({}, original);
clone.name = '영희'

console.log(original) // {name: '철수', age: 12}
console.log(clone); // {name: '영희', age: 12}

 

 

#깊은복사

 

객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다.

 

#깊은복사의 장단점

 

• 장점: 여러 객체가 동시에 수정되는 일이 발생하지 않아, 변경에는 안전하다.
• 단점: 객체 생성 비용이 비싸며, 메모리를 많이 점유한다.
• 특정 객체를 깊은 복사하는 경우 Clonable 인터페이스를 활용하, clone()메소드를 Overring 해주어야 깊은 복사가 가능하다.

 

JSON.parse && JSON.stringify

 

객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어집니다.

객체를 json 문자열로 변환 후, JSON.parse()를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어줍니다.

이 방법이 가장 간단하고 쉽지만 다른 방법에 비해 느리다는 것과 객체가 function일 경우,  undefined로 처리한다는 것이 단점입니다.

 

const object = {
  a: "a",
  number: {
    one: 1,
    two: 2,
  },
  arr: [1, 2, [3, 4]],
};
 
const copy = JSON.parse(JSON.stringify(object));
 
copy.number.one = 3;
copy.arr[2].push(5);
 
console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false
 
console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }