[JS] spread operator을 이용한 객체 복사

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

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

 

 

 

배열

const arr = [1, 2, 3];
const cp = [...arr];

cp.push(4);

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

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

 

 

 

객체

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}}

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

 

 

 

주의

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}};

전개연산자를 이용한 복사에는 1레벨에서면 유효하며, 특히 해당 요소 중 프리미티브 타입이 아닌 요소는 얕은 복사(shallow copy)가 됩니다.

예를 들어, arr[0]은 값이 1이라 프리미티브 타입이여서 arr[0]과 arrCp[0]은 서로 독립적이지만, arr[1]은 값이 배열이여서 arr[1]과 arrCp[1]은 같은 배열을 가리킵니다. 이것은 obj.b와 objCp.b도 같은 경우입니다.

 

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

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