JavaScript에서 객체 복사하기 (spread Object.assign)

JavaScript에서 객체 복사하는 완벽 가이드: Spread 연산자와 Object.assign을 깊이 있게 이해하자!

JavaScript를 사용하는 개발자라면 객체를 복사하는 것이 매우 빈번한 작업임을 경험했을 것입니다. 특히, 원본 객체를 수정하지 않으면서 새로운 객체를 만들어야 할 때가 많죠. 이 글에서는 객체 복사의 두 가지 강력한 기법인 spread 연산자(...)와 Object.assign()에 대해 상세히 설명하고, 각각의 사용법, 장단점, 그리고 실제 활용 사례를 통해 여러분이 더욱 능숙하게 객체를 다룰 수 있도록 도와드리겠습니다. 또한, 복사 시 발생할 수 있는 문제점과 해결 방안도 함께 다루어, 실무에서 겪을 수 있는 시행착오를 최소화하는 데 초점을 맞췄습니다.

개요: 객체 복사가 왜 중요한가? 그리고 두 기법의 차이점은 무엇인가?

JavaScript는 객체 자료형을 다루는 데 있어서 매우 유연하고 강력한 언어입니다. 그러나 객체를 복사하는 작업은 종종 복잡성을 수반하며, 잘못하면 예기치 못한 버그로 이어질 수 있습니다. 객체 복사가 중요한 이유는 원본 데이터를 보호하면서 새로운 데이터를 만들거나, 상태를 이전과 독립적으로 유지하려는 목적 때문입니다. 이러한 요구를 충족시키기 위해 spread 연산자(...)와 Object.assign()이 등장했고, 각각의 특징과 차이점을 이해하는 것은 필수입니다.

spread 연산자는 ES6(ECMAScript 2015)에서 도입된 문법으로, 간단하고 직관적인 구문으로 객체를 복사할 수 있습니다. 반면, Object.assign()은 기존에 있던 메서드로, 객체의 속성을 복사하여 새 객체를 생성하는 역할을 합니다. 두 방법 모두 얕은 복사(shallow copy)를 수행하며, 중첩 객체의 경우 원본과 복사본이 내부 데이터를 공유하는 문제점이 존재합니다. 이러한 특징을 이해하는 것은 의도한 복사 방식을 선택하는 데 매우 중요합니다.

두 방법의 차이점을 한눈에 정리하자면, spread 연산자는 문법이 더 직관적이고 간결하며, 즉석에서 여러 속성을 병합하는 데 용이합니다. 반면, Object.assign()은 기존 객체에 속성을 병합하거나 덧붙이는 데 더 적합하고, 다양한 옵션을 제공하여 유연성을 갖추고 있습니다. 따라서 상황에 따라 적합한 기법을 선택하는 전략이 중요합니다. 또한, 복사 과정에서의 성능 차이와 부수 효과도 고려해야 하며, 이러한 점들을 상세히 설명하겠습니다.

객체 복사하기: Spread 연산자를 사용하는 방법

Spread 연산자는 객체를 복사할 때 가장 흔히 사용하는 방법 중 하나입니다. 간결하고 직관적인 문법 덕분에 가독성이 뛰어나며, 특히 여러 객체를 병합하는 데도 매우 유용합니다. 객체를 복사하기 위해서 객체 리터럴 안에 spread 연산자를 넣기만 하면 간단히 해결됩니다. 아래의 예제를 살펴보세요.


const original = { name: '홍길동', age: 30 };
const copy = { ...original };

이와 같이 작성하면, `original` 객체의 속성이 모두 복사되어 `copy`라는 새 객체가 생성됩니다. 이때 복사는 얕은 복사(shallow copy)임을 유념해야 합니다. 즉, 복사된 객체 내의 속성이 참조형 데이터일 경우, 원본과 복사본이 내부 데이터를 공유하게 되어 원본을 변경하면 복사본도 영향을 받습니다.

spread 연산자를 활용하는 또 다른 강력한 방법은 여러 객체를 병합하는 것인데, 예를 들어 두 개 이상의 객체를 하나로 합칠 때도 매우 직관적입니다.


const objA = { x: 1, y: 2 };
const objB = { y: 3, z: 4 };
const merged = { ...objA, ...objB };

이 경우, `merged` 객체는 `{ x: 1, y: 3, z: 4 }`로, 두 객체의 속성이 병합되어 있고, 예를 들어, 속성 y의 경우 두 번째 객체의 값이 우선권을 갖게 됩니다. 또한, spread 연산자는 함수의 인자에서도 활용 가능하여, 인자를 개별 속성으로 펼치는 등의 다양한 동작이 가능합니다. 그러나, spread 연산자는 깊은 복사를 수행하지 않기 때문에, 복사하려는 객체가 깊은 구조를 갖고 있다면 속성 내부의 중첩 객체는 원본과 공유되어 문제를 일으킬 수 있다는 점을 알아야 합니다.

Object.assign()을 활용한 객체 복사와 병합 방법

Object.assign()은 객체의 속성을 복사하거나 병합하는 러닝메이트 역할을 하는 메서드입니다. 사용법이 간단하고, 기존 객체에 속성을 덧붙이거나, 새 객체를 만들어 반환하는 방식으로 활용됩니다. 기본 문법은 `Object.assign(target, ...sources)` 형태를 띕니다. 여기서 target은 속성이 복사될 대상 객체이며, sources는 복사할 원본 또는 원본들의 집합입니다.


const original = { name: '홍길동', age: 30 };
const copy = Object.assign({}, original);

이처럼 `{}` 빈 객체를 target으로 지정하여, 원본 객체의 속성을 복사하는 방식이 흔히 사용됩니다. 만약 원본 객체 자체를 변경하고 싶지 않다면, target으로 빈 객체를 지정하는 것이 권장됩니다. 또한, 여러 객체를 한 번에 병합할 때도 유용하며, 예를 들어:


const objA = { x: 1, y: 2 };
const objB = { y: 3, z: 4 };
const merged = Object.assign({}, objA, objB);

이 경우, `merged`는 `{ x: 1, y: 3, z: 4 }`로, spread 연산자와 유사하게 동작합니다. 그러나, `Object.assign()` 역시 얕은 복사(shallow copy)를 수행하니, 깊은 구조를 갖는 객체는 주의해야 합니다. 또 다른 특징으로는, target 객체를 변경하므로, 기존 객체를 유지하려면 별도로 빈 객체를 target으로 지정하는 습관이 필요합니다. 이 방법은 브라우저 구형 호환성이나 이전 환경에서 자주 사용되어 왔으며, 좋아하는 개발자에게는 익숙한 방식입니다.

얕은 복사와 깊은 복사의 차이점, 그리고 해결 방안

얕은 복사는 객체의 1단계 속성만 복사하는 것을 의미하는 반면, 깊은 복사는 객체 내부의 중첩된 구조까지 모두 복사하는 것을 뜻합니다. spread 연산자와 Object.assign() 모두 기본적으로 얕은 복사를 수행하기 때문에, 중첩 구조를 가지는 객체를 복사할 때 예상치 못한 부수 효과가 생길 수 있습니다. 예를 들어, 원본 객체에 중첩된 배열 또는 객체를 수정하면, 복사본에서도 그 영향이 드러나게 되죠.

이 문제를 해결하려면 우선 간단한 방법으로는 JSON.stringify와 JSON.parse를 사용하는 방식이 있는데, 이는 객체 내 순수 데이터에 적합하며, 함수, undefined, 순환 참조 등은 처리하지 못하는 한계점이 있습니다.

중첩 객체의 깊은 복사를 위한 추천 방법

직접 재귀 함수를 구현하는 것
Lodash와 같은 라이브러리의 _.cloneDeep() 활용
Structured Clone 알고리즘 또는 MessageChannel API 활용

그중 가장 많이 사용되는 방법은, Lodash의 _.cloneDeep()이 가장 쉽고 신뢰성 있는 방법입니다. 예를 들어:


const _ = require('lodash');
const deepCopy = _.cloneDeep(originalObject);

이렇게 하면 내부 구조까지 모두 복사되어 원본과 전혀 독립된 객체를 얻을 수 있습니다. 그러나, 외부 라이브러리를 추가하는 것이 부담스럽거나, 간단한 구조의 객체만 다루는 경우에는 JSON 방식이 적합할 수 있습니다. 또한, ES2021에서 도입된 structuredClone() 메서드를 활용하는 방법도 있으며, 이는 표준화된 깊은 복사 방법을 제공합니다.

실제 프로젝트에서 객체 복사 기법 선택하는 기준

객체의 깊이와 구조 파악 여부
성능 고려: 대량 데이터 또는 빈번한 복사 작업
코드의 가독성 및 유지보수성
호환성: 구형 브라우저 또는 환경 지원 여부
부수효과 방지: 원본 데이터 보장 필요 여부
중첩 구조가 아닌 단순 객체인지 여부
라이브러리 사용의 부담과 프로젝트 규칙

복사를 수행하는 시점의 목적과 데이터 구조에 따라 적합한 방법이 달라집니다. 예를 들어, 간단한 상태 저장이나, 초기값 복사에는 spread 연산자가 적절하며, 복잡한 상태 복제 또는 뎁스가 깊은 구조에서는 _.cloneDeep()이나 structuredClone()이 더 안정적입니다. 이러한 기준을 명확히 알고 선택한다면, 추후에 발생할 수 있는 버그와 유지보수 어려움을 사전에 방지할 수 있습니다. 따라서, 이 글에서 설명한 객체 복사 방법을 충분히 이해하고, 자신의 프로젝트 특성에 맞는 최적의 전략을 세우는 것이 중요합니다.

Q&A: 자주 묻는 질문들

Q1: spread 연산자로 복사한 객체가 내부 중첩 객체를 공유하나요?

답변: 네, spread 연산자는 얕은 복사를 수행하므로 내부 중첩 객체는 원본과 공유됩니다. 따라서 내부 객체를 수정하면 두 객체 모두 영향을 받습니다.

Q2: Object.assign()과 spread 연산자 중 어느 것이 더 빠른가요?

답변: 대부분의 경우 두 방법의 성능 차이는 미미하며 상황에 따라 다를 수 있습니다. 일반적으로는 가독성과 편의성에 따라 선택하는 것이 좋으며, 엄격한 성능 요구가 있다면 벤치마크를 실시하는 것이 바람직합니다.

Q3: 깊은 복사가 필요한 상황에서는 어떤 방법이 가장 적합한가요?

답변: Lodash의 _.cloneDeep()이나 structuredClone() 메서드가 가장 적합하며, JSON.stringify/parse 방법은 간단한 데이터 구조에 한해서 고려할 수 있습니다. 다만, 사용 전에 해당 방법의 제한점을 충분히 이해하는 것이 중요합니다.

결론: 객체 복사 시 올바른 기술을 선택하는 최종 전략

객체 복사는 JavaScript 프로그래밍에서 빼놓을 수 없는 핵심 기술입니다. spread 연산자와 Object.assign()은 각각의 특징과 한계가 있으며, 상황에 맞게 선택하는 능력이 중요합니다. 얕은 복사의 특성을 이해하고, 필요에 따라 lodash의 _.cloneDeep() 또는 structuredClone() 같은 깊은 복사 방법을 채택하면, 점점 더 견고하고 유지보수하기 쉬운 코드를 구현할 수 있습니다. 또한, 복사 방식을 제대로 알고 활용하면 예상치 못한 버그를 미연에 방지하는 동시에, 효율적인 코드 작성을 이룰 수 있죠. 결국, 해당 키워드인 JavaScript 객체 복사하기, spread, Object.assign 등을 활용하는 핵심은 바로 '적절한 기술 선택과 이해'에 달려 있습니다. 이를 토대로 여러분의 프로젝트가 더욱 안정적이고 효율적으로 발전하길 바랍니다.

#JavaScript #객체복사 #spread #Object.assign #얕은복사 #깊은복사 #cloneDeep #structuredClone

기초 코드 따라하기