[javascript] 참조형의 얕은 복사(Shallow Copy) & 깊은 복사(Deep Copy)

 

자주 헷갈려서 참조형은 아묻따 JSON.parse()와 JSON.stringify()를 이용하여 깊은 복사를 해왔는데 

이 방법은 문제가 발생 할 여지가 있다고 한다. 아래에 같이 이야기하겠다.

 

객체는 참조형이라 복사 시, '='를 이용하면 값이 복사되지 않으며, 단지 메모리 주소 값을 복사하여 같은 메모리를 공유하게 된다.

원본 데이터를 건들 수 있기 때문에 매우 주의하여야 한다.

---

■ 얕은 복사(Shallow Copy) 

 

1. Object.assign(target, ...sources)

객체 자체는 깊은 복사가 가능하다. 단, 객체가 2차원 이상이라면 얕은 복사가 된다. 

let obj = {
    a: 1,
    b: { c: 2 }
};

let copyObj = Object.assign({}, obj);

console.log(obj === copyObj) //false
console.log(obj.b.c === copyObj.b.c) //true

 

2. ... (Spread Operator)

전개 구문 또한, 객체 자체는 깊은 복사가 가능하나 내부 객체는 얕은 복사가 된다.

let obj = {
    a: 1,
    b: { c: 2 }
};

let copyObj = { ...obj}

console.log(obj === copyObj) //false
console.log(obj.b.c === copyObj.b.c) //true

---

■ 깊은 복사(Deep Copy) 

재귀 함수를 만들 수도 있으나 보통은 lodash 오픈 소스를 많이 사용한다. 

 

1. _.cloneDeep(value)

const obj = [{ 'a': 1 }, { 'b': 2 }];
 
const copyObj = _.cloneDeep(obj);

console.log(copyObj[0] === obj[0]); //false

참고

_.clone(value) 은 깊은 복사 X

const obj = [{ 'a': 1 }, { 'b': 2 }];
 
const copyObj = _.clone(obj);

console.log(copyObj[0] === obj[0]); //true

 

2. JSON.parse(JSON.stringify(value));

보통은 정상적으로 깊은 복사가 된다.

const obj = {
    a: 1,
    b: { c: 2 }
};

const copyObj = JSON.parse(JSON.stringify(obj));

console.log(obj.b.c === copyObj.b.c) //false

하지만, 예외사항이 하나 있으므로 무턱대고 사용해서는 안된다.

객체에 함수가 존재하는 경우는, 즉 value 값이 함수인 경우는 복사를 생략한다.

const obj = {
    a: 1,
    b: { c: 2 },
    c : function() {
    	console.log('function입니다.');
    }
};

const copyObj = JSON.parse(JSON.stringify(obj));

console.log(obj.b.c === copyObj.b.c) //true

 

그러므로 아직까지는 lodash에서 제공하는 cloneDeep을 사용하는 것이 가장 안전해보인다.

 

https://lodash.com/docs/4.17.15#clone

Lodash Documentation