[Front end] JavaScript 얕은 복사 & 깊은 복사

자바스크립트에서 자주 사용하는 객체 전달 의미로 사용되는 = 은 참조를 의미한다. 대부분이 참조만으로도 기능상의 문제가 없이 작동하기 때문이다. 아래 예제는 참조한 객체의 key 값 변경이 미치는 영향을 알아본 것이다.

일반적인 상황에서는 데이터가 중간에 변동될 일이 없다. 하지만 얕은 복사, 깊은 복사가 필요한 경우가 있다. 간단한 예를 들어 복사하는 방법을 알아보자.

얕은 복사(Shallow Copy)

---

얕은 복사에는 다양한 방법이 제공된다.

// JQuery extend()
var data = { key: 'trend' };
var ref = $.extend({}, data);
console.log(data);
console.log(ref);
data.key = 'issue';
console.log(data);
console.log(ref);

// underscore.js
var data = { key: 'trend' };
var ref = _.clone(data);
console.log(data);
console.log(ref);
data.key = 'issue';
console.log(data);
console.log(ref);

 

깊은 복사(Deep Copy)

---

깊은 복사에는 더 많은 다양한 방법이 제공된다. 깊은 복사는 얕은 복사 보다 느리다.

// JQuery extend() Flag true
var data = { key: 'trend' };
var ref = $.extend(true, {}, data);
console.log(data);
console.log(ref);
data.key = 'issue';
console.log(data);
console.log(ref);

// JavaScript
var data = { key: 'trend' };
var ref = JSON.parse(JSON.stringify(data));
console.log(data);
console.log(ref);
data.key = 'issue';
console.log(data);
console.log(ref);

// React lodash
import _, {cloneDeep} from 'lodash';

var data = { key: 'trend' };
var ref = cloneDeep(data);
console.log(data);
console.log(ref);
data.key = 'issue';
console.log(data);
console.log(ref);

 

실제 복사 속도는 객체의 형태, 브라우저의 종류에 따라서도 속도가 달라진다. 하지만 웹 개발을 하면서 성능이 영향이 미칠 정도의 복사를 자주 할 일은 많지 않다는 것이다. 필요에 따라 상황에 맞게 사용하면 된다.