Object.assign vs Spread Syntax (...)

Object.assign 과 Spread Syntax (...) 둘 다 javascript에서 객체를 복사하거나 병합하는 방법이다.

나도 일반적으로 Spread 문법을 주로 사용하고 Object.assign에 대해서는 무지했는데, 이에 대해 알아보기 위해 글을 작성해본다.

Object.assign 사용예시

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);

console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.
console.log(o2); // { b: 2 };
console.log(o3); // { c: 3 };

Spread Syntax (...) 사용예시

const o1 = { a: 1 };
const o2 = { b: 2 };
const obj = { ...o1, ...o2 };

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

Object.assign 와 Spread Syntax (...) 차이점

사용예시에서 눈여겨볼 사항이 Object.assign 을 사용 이후 console.log 를 살펴보면 첫 번째 인자가 타겟 객체가된다. ****

console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.

때문에 위에 o1의 값이 변화되는 결과를 볼 수 있다.

그 외의 문서에서 찾아본점은

• Object.assign은 프로토타입 속성까지 복사한다. Spread syntax는 이를 제외한다.
• Spread syntax는 배열에서도 사용이 가능하다. 반면Object.assign은 객체에 대해서만 동작하며, 배열에 사용할 경우 배열이 객체로 취급된다.

추가내용.

⇒ Object.assign으로 만들어진 배열의 경우, 외부적으로는 정상적인 배열처럼 보일 수 있다. 하지만 이는 객체형식으로 된 배열의 모양을 가지고 있다고 생각하면된다.

무엇이 문제냐고 한다면 사실 문제는 크게 없지만, 동일한 결과를 보이더라도, 배열 복사의 본질적 메커니즘에는 차이가 존재한다.

const arr = [1, 2, 3];

// Object.assign
const assignedArray = Object.assign([], arr);
assignedArray[5] = 99; // 인덱스 5에 값을 추가
console.log(assignedArray.length); // 6 (자동으로 늘어남)

// Spread Syntax
const spreadArray = [...arr];
spreadArray[5] = 99;
console.log(spreadArray.length); // 6

위 예제에서는 둘 다 length가 자동으로 늘어났다, 이는 JavaScript 엔진이 배열의 동작을 자동으로 보완했다. 실제로, Object.assign은 복사된 배열의 length를 수동으로 관리하지 않으면 예상치 못한 동작이 발생한다.

length와 배열 메서드의 불일치

const arr = [1, 2, 3];

// Object.assign
const assignedArray = Object.assign([], arr);

// 배열 메서드 호출 전 수동으로 length 수정
assignedArray.length = 1;

// Spread Syntax
const spreadArray = [...arr];
spreadArray.length = 1;

// 배열 메서드 적용
console.log(assignedArray.map((x) => x * 2)); // [2, NaN, NaN]
console.log(spreadArray.map((x) => x * 2));   // [2]

빈 배열을 처리할때의 발생하는 문제

const arr = [1, , 3]; // 희소 배열 (인덱스 1이 비어 있음)

// Object.assign
const assignedArray = Object.assign([], arr);
console.log(assignedArray); // [1, undefined, 3]

// Spread Syntax
const spreadArray = [...arr];
console.log(spreadArray); // [1, , 3] (빈 슬롯 유지)

// 배열 메서드 적용
console.log(assignedArray.map((x) => x * 2)); // [2, NaN, 6]
console.log(spreadArray.map((x) => x * 2));   // [2, <empty>, 6]

결론

새로운 객체를 생성하고 병합하는 작업에서는 Spread Syntax를 사용하는 것이 더 간결하고 직관적이다. 다만, 프로토타입 속성 복사가 필요하거나, 특정 객체를 직접 수정해야 하는 경우에는 Object.assign이 적합하다. 추가적으로 Spread Syntax는 배열의 구조와 특성을 정확히 유지하므로, 배열 복사 및 병합 작업에서는 Spread Syntax 를 사용하면된다.