[Javascript] Shallow copy 와 Deep copy

js에서 주로 객체(object)와 같은 참조형 변수들을 복사할 때 사용되는 개념인 얕은 복사와 깊은 복사에 대해 알아보겠다.

shallow copy (얕은 복사)

얕은 복사에는 2가지 의미가 있다. 단순히 주소 값만 복사해 오는 개념(참조 복사)과, 객체의 최상위 속성만 복사하는 개념 두 가지가 있다.

참조 복사 (reference copy)

참조형 변수에 담긴 주소값을 복사해오는 방식. 일반적인 할당의 경우 이 경우를 따르며 같은 객체를 가리키기 때문에 실질적으로는 같은 객체라고 봐도 무방하다.

방법

• = 할당 연산자

let obj1 = { 
  name: "홍길동",
  age: 20,
  hobby: ["운동", "그림"]
}
let obj2 = obj1;

내부 속성 변경 시

obj1.age = 21;
obj1.hobby[1] = "게임";

console.log(obj1);
//{ name: '홍길동', age: 21, hobby: [ '운동', '게임' ] }
console.log(obj2);
//{ name: '홍길동', age: 21, hobby: [ '운동', '게임' ] }

최상위 속성 복사

객체의 최상위 속성(property)만 복사한다. 하위(중첩된) 객체는 여전히 같은 객체를 가리키기 때문에 주의해야 한다.

방법

• ... 스프레드 연산자

let obj1 = { 
  name: "홍길동",
  age: 20,
  hobby: ["운동", "그림"]
}
let obj2 = { ...obj1 };

• Object.assign 메소드 활용

let obj1 = { 
  name: "홍길동",
  age: 20,
  hobby: ["운동", "그림"]
}
let obj2 = Object.assign({}, obj1);

let obj1 = { 
  name: "홍길동",
  age: 20,
  hobby: ["운동", "그림"]
}
let obj2 = {};
Object.assign(obj2, obj1);

• for문과 = 할당 연산자 사용

내부 속성 변경 시

obj1.age = 21;
obj1.hobby[1] = "게임";

console.log(obj1);
//{ name: '홍길동', age: 21, hobby: [ '운동', '게임' ] }
console.log(obj2);
//{ name: '홍길동', age: 20, hobby: [ '운동', '게임' ] }

deep copy (깊은 복사)

깊은 복사는 원본과 복사본이 완전히 다르게 복사되는 것을 말한다. 중첩된 객체의 경우에도 그 내부 객체까지 별개의 객체로 복사되어, 원본이나 복사본의 속성을 변경해도 서로에게 영향을 미치지 않는다.

방법

• JSON.parse과 JSON.stringify

let obj1 = { 
  name: "홍길동",
  age: 20,
  hobby: ["운동", "그림"]
}
let obj2 = JSON.parse(JSON.stringify(obj1));

• 재귀함수

lodash 라이브러리의 _.cloneDeep 메소드를 사용하는 방법도 있다.

내부 속성 변경 시

obj1.age = 21;
obj1.hobby[1] = "게임";

console.log(obj1);
//{ name: '홍길동', age: 21, hobby: [ '운동', '게임' ] }
console.log(obj2);
//{ name: '홍길동', age: 20, hobby: [ '운동', '그림' ] }