[자바스크립트] Spread 연산자 (Spread Operator)

스프레드 연산자는 배열이나 객체를 개별 요소로 펼쳐서 새로운 배열이나 객체를 생성하거나, 함수의 인수로 전달하는 데 사용되는 연산자입니다. 쉽게 말해, 하나의 집합을 개별 구성 요소로 흩뿌리는 역할을 합니다.

...iterable

• iterable: 배열, 문자열, arguments 객체 등 반복 가능한 객체

스프레드 연산자 사용 예시

1. 배열 결합

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combinedArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]

• 두 개의 배열을 하나의 새로운 배열로 합칠 때 사용합니다.

2. 배열 복사

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

• 원본 배열을 변경하지 않고 새로운 배열을 복사할 때 사용합니다.

3. 함수에 인수 전달

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

• 배열의 요소를 함수의 개별 인수로 전달할 때 사용합니다.

4. 객체 병합

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

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

• 두 개의 객체를 하나의 새로운 객체로 병합할 때 사용합니다. 동일한 키가 존재할 경우, 뒤쪽 객체의 값으로 덮어씌워집니다.

5. 최대값/최소값 찾기

const numbers = [3, 6, 2, 9];
const max = Math.max(...numbers); // 9
const min = Math.min(...numbers); // 2

• Math.max, Math.min 함수에 배열의 모든 요소를 개별 인수로 전달하여 최대값과 최소값을 구합니다.

6. 문자열 분리

const str = "hello";
const chars = [...str]; // ["h", "e", "l", "l", "o"]

• 문자열을 개별 문자로 분리하여 배열로 만들 때 사용합니다.

스프레드 연산자와 rest 파라미터의 차이점

• 스프레드 연산자: 배열이나 객체를 펼쳐서 개별 요소로 만듭니다.
• rest 파라미터: 함수의 인수를 배열로 모읍니다.

function myFunction(...args) {
  console.log(args); // [1, 2, 3, 4, 5]
}
myFunction(1, 2, ...[3, 4, 5]);

주의할 점

• 얕은 복사: 객체의 경우, 스프레드 연산자로 복사하더라도 내부 객체는 참조를 공유합니다. 깊은 복사가 필요한 경우에는 별도의 방법을 사용해야 합니다.
• 불변성: 스프레드 연산자는 원본 데이터를 변경하지 않고 새로운 배열이나 객체를 생성합니다.

 

스프레드 연산자 활용 예시 심화

1. 배열 관련 다양한 활용

• 배열 중간에 요소 추가:

  const arr = [1, 2, 4];
  const insertedArr = [...arr.slice(0, 2), 3, ...arr.slice(2)]; // [1, 2, 3, 4]
  

• 배열에서 특정 요소 제거:

  const arr = [1, 2, 3, 4];
  const removedArr = [...arr.slice(0, 2), ...arr.slice(3)]; // [1, 2, 4]
  

• 배열 요소 순서 바꾸기:

  const arr = [1, 2, 3];
  const reversedArr = [...arr].reverse(); // [3, 2, 1]
  

2. 객체 관련 다양한 활용

• 객체 복사 및 수정:

  const person = { name: '홍길동', age: 30 };
  const newPerson = { ...person, address: '서울' }; // { name: '홍길동', age: 30, address: '서울' }

• 객체 병합 및 중복 키 처리:

  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를 덮어씀)

• 객체에서 특정 속성 제거:

  const person = { name: '홍길동', age: 30, address: '서울' };
  const { address, ...rest } = person; // rest = { name: '홍길동', age: 30 }

3. 함수 인자 전달 시 활용

• 가변 인자 함수:

  function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
  }
  sum(1, 2, 3, 4);

• 배열 메서드에 전달:

  const numbers = [1, 2, 3, 4, 5];
  const doubled = numbers.map(num => num * 2);
  

4. 기타 활용

• 문자열 분리:

  const str = 'hello';
  const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']

• 세트 생성:

  const array = [1, 2, 2, 3];
  const uniqueSet = new Set([...array]); // Set { 1, 2, 3 }