[JavaScript] 전개연산자(Spread Syntax)

JavaScript에서 ...는 객체(배열 포함)의 컨텍스트에서 사용될 때 "전개" 연산자(Spread Syntax)로 알려져 있습니다. 전개 연산자를 객체와 함께 사용하면 객체를 복제하거나 병합하는 간결한 방법을 제공합니다. 사용법을 분석해 보겠습니다.

1. 객체 복제

전개 연산자를 사용하여 객체의 얕은 복사본을 만들 수 있습니다. 제공된 개체의 열거 가능한 모든 자체 속성을 새 개체에 복사합니다.

const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };
console.log(clonedObject); // Output: { a: 1, b: 2 }

2. 개체 병합

전개 연산자를 사용하여 하나 이상의 객체 속성을 새 객체에 병합할 수도 있습니다. 동일한 속성이 여러 개체에 존재하는 경우 마지막으로 발견된 속성이 결과에 표시됩니다.

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };
const mergedObject = { ...object1, ...object2 };
console.log(mergedObject); // Output: { a: 1, b: 3, c: 4 }

이 경우 object2의 b 속성이 object1의 b 속성을 덮어씁니다.

3. 다른 속성과 결합하기

전개 연산자는 객체 리터럴의 다른 속성과 함께 사용하여 새 객체를 생성할 수 있습니다.

const originalObject = { a: 1, b: 2 };
const expandedObject = { ...originalObject, c: 3, d: 4 };
console.log(expandedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }

중요 참고 사항

• Shallow Copy: 전개 연산자는 전체 복사가 아닌 얕은 복사를 수행합니다. 이는 참조를 기준으로 객체를 복사한다는 의미입니다. 원본 객체에 중첩된 객체나 배열이 포함된 경우 값이 아닌 참조로 복사됩니다.
• ES2018 기능: 객체에 대한 전개 연산자는 ECMAScript 2018(ES9)에 도입되었습니다. 이전에는 배열과 함께 일반적으로 사용되었습니다.

요약하자면, JavaScript의 객체 컨텍스트에서 '...' 연산자는 객체 복제 및 병합을 위한 다목적 도구로, Object.sign()과 같은 메소드에 비해 더 간결한 구문을 제공합니다.