[Javascript] 객체를 손쉽게 깊은 복사(Deep copy) 하는 라이브러리 fast-copy 소개

Java, .NET, javascript, python 등 개발에 사용하는 언어는 변수를 대입할때 기본적으로 얕은 복사(sallow copy)와 깊은 복사(deep copy)에 대한 개념이 존재한다.

 

얕은 복사와 깊은 복사에 대한 자세한 설명은 아래 링크로 접속해보기 바란다.

 

https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC

[Javascript] 얕은 복사, 깊은 복사

객체 형식으로 된 변수 값을 깊은 복사해야할 때 JSON.parse 와 JSON.stringify 함수를 이용하거나, lodash의 cloneDeep을 쓰는 경우가 있다. 내가 개발하고 있던 웹 어플리케이션에선 lodash가 필요하지 않았기 때문에 복사에 관련된 라이브러리만 따로 찾아 보았다.

 

그렇게 발견한 라이브러리가 바로 fast-copy 이다.

 

https://github.com/planttheidea/fast-copy#readme

planttheidea/fast-copy

nodejs 예제소스를 하나 만든 뒤, 해당 소스를 실행시켜보자.

const copy = require("fast-copy");

const object = {
  array: [123, { deep: "value" }],
  map: new Map([["foo", {}], [{ bar: "baz" }, "quz"]])
};

const copiedObject = copy(object); // 깊은 복사
console.log('값 변경 전');
console.log(object);
console.log(copiedObject);

copiedObject.array[0] = 0;
copiedObject.map = [];

console.log('값 변경 후');
console.log(object);
console.log(copiedObject);

/*
값 변경 전
{
  array: [ 123, { deep: 'value' } ],
  map: Map(2) { 'foo' => {}, { bar: 'baz' } => 'quz' }
}
{
  array: [ 123, { deep: 'value' } ],
  map: Map(2) { 'foo' => {}, { bar: 'baz' } => 'quz' }
}
값 변경 후
{
  array: [ 123, { deep: 'value' } ],
  map: Map(2) { 'foo' => {}, { bar: 'baz' } => 'quz' }
}
{ array: [ 0, { deep: 'value' } ], map: [] }
*/

단순 대입연산을 할 경우에는 아래와 같다.

const copy = require("fast-copy");

const object = {
  array: [123, { deep: "value" }],
  map: new Map([["foo", {}], [{ bar: "baz" }, "quz"]])
};

const copiedObject = object; // 대입. 객체이므로 얕은 복사가 됨.
console.log('값 변경 전');
console.log(object);
console.log(copiedObject);

copiedObject.array[0] = 0;
copiedObject.map = [];

console.log('값 변경 후');
console.log(object);
console.log(copiedObject);

/*
값 변경 전
{
  array: [ 123, { deep: 'value' } ],
  map: Map(2) { 'foo' => {}, { bar: 'baz' } => 'quz' }
}
{
  array: [ 123, { deep: 'value' } ],
  map: Map(2) { 'foo' => {}, { bar: 'baz' } => 'quz' }
}
값 변경 후
{ array: [ 0, { deep: 'value' } ], map: [] }
{ array: [ 0, { deep: 'value' } ], map: [] }
*/

개발자 피셜 lodash.cloneDeep 대비 약 2배 빠르다고 하며, 모듈 전체 크기도 글을 작성하게된 2021-01-26일 기준 약130kb 에 불과하므로, 깊은 복사가 필요한 프로젝트를 구축한다면 한번 써보는 것도 좋을 듯 싶다.