Spread 연산자

자바스크립트의 스프레드 연산자(Spread Operator)는 ECMAScript6(2015)에서 새로 추가된 문법으로, 세 개의 점(...)으로 표현되며, 배열이나 객체의 요소들을 개별 요소로 분해하여 사용할 수 있도록 도와준다. 주로 배열이나 객체의 복사, 병합, 함수 호출 시 인자 전달 등에 유용하게 사용된다.

// 펼칠 대상이 객체인 경우
{...obj}

// 펼칠 대상이 배열인 경우
[...arr]
// 혹은
{...arr}

배열에서 Spread

1. 배열복사

arr1의 모든 요소를 arr2에 복사한다. arr2는 arr1과 별개의 새로운 배열이다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

2. 배열병합

배열을 병합하는데, ES5 배열 병합과 ES6의 배열 병합에는 차이가 있다.

// ES5 배열의 병합: concat을 사용
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr1.concat(arr2, arr3);

console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// ES6 배열의 병합: Spread연산자를 사용하고, 배열로 다시 묶음
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

3. 배열의 요소 추가

배열의 앞이나 뒤에 새로운 요소를 추가할 수 있다.

const arr1 = [1, 2, 3];
const newArr = [0, ...arr1, 4];
console.log(newArr); // [0, 1, 2, 3, 4]

4. 배열의 나머지 요소 할당

비구조화 할당과 나머지 요소(를 사용하여 배열의 나머지 요소를 할당 받을 수 있다.

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

객체에서 Spread

1. 객체 복사

obj1의 모든 프로퍼티를 obj2에 복사한다. obj2는 obj1과 별개의 새로운 객체이다.

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }

2. 객체 병합

두 객체를 하나의 객체로 병합한다. 이 경우, obj1과 obj2에 동일한 프로퍼티 b가 있으므로, 마지막에 스프레드된 객체(obj2)의 값으로 덮어씌워진다.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }

함수 호출 시의 사용

배열의 요소를 개별 인자로 전달할 수 있다.

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

Rest 파라미터와의 차이

스프레드 연산자와 비슷한 문법으로 Rest 파라미터가 있다. Rest 파라미터는 함수 정의 시에 사용되며, 인수들을 배열로 모으는 역할을 한다.

예제1: 인수 중 최소값 찾기

여기서 findMin 함수는 여러 숫자 인수 중에서 최소값을 반환합니다. Rest 파라미터 ...numbers를 사용해 모든 인수를 배열로 수집한 후, Math.min() 함수를 사용하여 최소값을 계산한다.

function findMin(...numbers) {
  return Math.min(...numbers);
}

console.log(findMin(5, 2, 10, 3)); // 2
console.log(findMin(12, 6, 8)); // 6

예제2. 문자열로 전달된 인수 조합하기

이 함수는 임의의 수의 문자열 인수를 받아 하나의 문자열로 결합한다. 각 문자열 사이에 공백을 추가하여 연결한다.

function concatenateStrings(...strings) {
  return strings.join(' ');
}

console.log(concatenateStrings("Hello", "world!")); // "Hello world!"
console.log(concatenateStrings("How", "are", "you", "today?")); // "How are you today?"

예제3. reduce를 사용하여 배열의 합 구하기

reduce를 활용하여 배열에 있는 요소들의 합을 구해보자. reduce함수의 구성은 다음과 같다.

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 함수 본문
}, initialValue)

• accumulator: 이전 콜백의 반환값이나, 제공된 초기값이다.
• currentValue:: 배열에서 현재 처리 중인 요소이다.
• currentIndex: (선택적): 배열에서 현재 처리 중인 요소의 인덱스이다.
• array: (선택적): reduce가 호출된 배열이다.

일반적으로, reduce함수는 accumulator와 currentValue만 필요로 하는 경우가 많다. 예를 들어, 배열의 모든 요소를 더하는 경우는 다음과 같다. (currentIndex와 array는 사용하지 않으므로 생략되었다.)

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(acc, val) {
  return acc + val;
}, 0); // 10

// 화살표 함수로는 다음과 같이 정의된다.
const sum = numbers.reduce((acc, val) => acc + val, 0); // 10

모든 파라미터를 활용한 경우는 아래를 참고...

Rest 파라미터의 특징

• 함수에 전달된 인수들을 배열로 변환한다.
• 주로 가변적인 수의 인수를 처리할 때 유용하다.
• 함수에서 마지막 매개변수로만 사용될 수 있다.

Rest 파라미터는 함수의 유연성을 높여 주고, 인수 리스트를 명시적으로 처리할 필요 없이 다양한 시나리오에 맞춰 함수를 쉽게 작성할 수 있게 도와준다.