javascript 전개연산자 (spread operator)을 이용한 객체 복사

이번 포스트에서는 전개 연산자(spread operator)를 이용해서 간편하게 객체를 복사하는 방법에 대해 알아보겠습니다.

배열의 복사는 [...arr]를 이용하면 됩니다.

const arr = [1, 2, 3]; 
const cp = [...arr]; 
cp.push(4); 

console.log(arr); // [1, 2, 3] 
console.log(cp); // [1, 2, 3, 4]

객체의 복사는 {...obj}를 이용하면 됩니다.

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

console.log(obj); // {a: 1, b:{c: 3}} 
console.log(cp); // {a: 2, b:{c: 3}}

 

전개연산자를 이용한 복사에는 1레벨에서면 유효하며, 특히 해당 요소 중 프리미티브 타입이 아닌 요소는 얕은 복사(shallow copy)가 됩니다. 예를 들어, arr[0]은 값이 1이라 프리미티브 타입이여서 arr[0]과 arrCp[0]은 서로 독립적이지만, arr[1]은 값이 배열이여서 arr[1]과 arrCp[1]은 같은 배열을 가리킵니다. 이것은 obj.b와 objCp.b도 같은 경우입니다.

const arr = [1, [2, 3]]; 
const arrCp = [...arr]; 
arrCp[1].push(4); 

console.log(arr); // [1, [2, 3, 4]]; 
console.log(arrCp); // [1, [2, 3, 4]]; 

const obj = { a: 1 b: { c: 2 } }; 
const objCp = {...obj}; objCp.a = 2; 
objCp.b.c = 3; 

console.log(obj); // {a:1, b:{c:3}}; 
console.log(objCp); // {a:2, b:{c:3}};

MDN의 공식문서를 보시면, 다음과 같이 주의사항이 나와있습니다.

 

Spread 문법은 배열을 복사할 때 1 레벨 깊이에서 효과적으로 동작합니다. 그러므로, 다음 예제와 같이 다차원 배열을 복사하는것에는 적합하지 않을 수 있습니다. (Object.assign()과 전개 구문이 동일합니다)