JavaScript 스프레드 문법

자바스크립트의 스프레드 문법(Spread syntax)은 배열이나 객체를 펼쳐 개별 요소로 사용할 수 있게 해주는 문법입니다. 스프레드 문법은 세 개의 점(...)을 사용하여 나타냅니다. 스프레드 문법은 배열 및 객체에서 요소를 추출하거나, 배열과 객체를 합치거나 병합할 때 유용하게 사용할 수 있습니다.

배열에서 사용하는 스프레드 문법 예제:

1. 배열 병합:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

2. 원소 추가:

const arr = [1, 2, 3, 4];

const newArr = [0, ...arr, 5]; // [0, 1, 2, 3, 4, 5]

3. 배열 복사:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray]; // [1, 2, 3]

console.log(originalArray === copiedArray); // false (복사된 배열이고 참조는 다름)

객체에서 사용하는 스프레드 문법 예제:

1. 객체 병합:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 } (obj2의 b 속성이 obj1의 b 속성을 덮어씀)

2. 객체 복사:

const originalObj = { a: 1, b: 2, c: 3 };
const copiedObj = { ...originalObj }; // { a: 1, b: 2, c: 3 }

console.log(originalObj === copiedObj); // false (복사된 객체이고 참조는 다름)

이처럼 스프레드 문법을 사용하면 배열과 객체에서 요소와 속성을 편리하게 추출하거나 병합할 수 있으며, 읽기 쉽고 간결한 코드를 작성할 수 있습니다.

일반 객체에도 스프레드 문법을 사용할 수 있습니다. 하지만 배열처럼 순서가 보장되지 않은 객체의 경우 사용할 때 주의를 기울여야 합니다. 일반 객체에서 스프레드 문법을 사용하면 객체의 속성들을 추출하여 새 객체에 병합할 수 있습니다.

예시:

const user1 = {
  name: 'Alice',
  age: 30,
};

const user2 = {
  ...user1,
  city: 'New York',
};

console.log(user2);
// { name: 'Alice', age: 30, city: 'New York' }

위 예시에서 user1 객체의 모든 속성이 user2 객체로 복사되었습니다.

제약 사항:

• Internet Explorer 및 낮은 버전의 브라우저에서는 객체에 스프레드 문법이 지원되지 않습니다. 이 경우 트랜스파일러(예: Babel)을 사용하여 코드를 변환해야합니다.
• 순서가 보장되지 않은 객체의 경우 사용 시 주의가 필요합니다.

이 한계를 고려하면서 사용한다면, 일반 객체에 스프레드 문법을 사용하여 속성을 병합하거나 추출하는 것이 가능합니다.