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

Rest 연산자는 스프레드 연산자와 마찬가지로 ... 세 개의 점을 사용하지만, 그 역할은 정반대입니다. 스프레드 연산자가 배열이나 객체를 펼쳐서 개별 요소로 만드는 반면, Rest 연산자는 여러 개의 인수를 하나의 배열로 모읍니다. 즉, 나머지 인수들을 모아서 배열로 만들어주는 역할을 합니다.

function 함수명(...변수명) {
  // 변수명은 배열 형태로 전달된 나머지 인수들을 담게 됩니다.
}

Rest 연산자 사용 예시

1. 가변 인자 함수

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

const result = sum(1, 2, 3, 4, 5); // 15

• 함수에 전달되는 인자의 개수가 정해지지 않을 때 유용합니다.
• numbers 변수는 전달된 모든 인자를 담는 배열이 됩니다.

2. 배열의 나머지 요소 추출

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

• 배열의 처음 몇 개의 요소를 제외하고 나머지 요소들을 새로운 배열에 담습니다.

3. 객체에서 나머지 속성 추출

const options = { color: 'red', size: 'large', default: true };
const { color, ...rest } = options;
console.log(color);  // red
console.log(rest);   // { size: 'large', default: true }

• 객체에서 특정 속성을 제외하고 나머지 속성들을 새로운 객체에 담습니다.

스프레드 연산자와 Rest 연산자 비교

... (스프레드)	배열이나 객체를 펼쳐서 개별 요소로 만듦	[...array1, ...array2]
... (Rest)	여러 개의 인수를 하나의 배열로 모음	function sum(...numbers) {}

주의할 점

• Rest 파라미터는 함수의 매개변수 목록에서 반드시 마지막에 위치해야 합니다.
• 스프레드 연산자와 마찬가지로 얕은 복사가 이루어집니다.

 

Rest 연산자 활용 예시 심화

Rest 연산자는 함수의 가변 인자를 처리하고, 배열이나 객체에서 나머지 요소를 추출하는 등 다양한 용도로 활용됩니다.

1. 가변 인자 함수

• 합계 계산:

  function sum(...numbers) {
      return numbers.reduce((total, num) => total + num, 0);
  }
  
  const result1 = sum(1, 2, 3); // 결과: 6
  const result2 = sum(10, 20, 30, 40, 50); // 결과: 150
  const result3 = sum(); // 결과: 0

• 최대값, 최소값 찾기:

  function findMinMax(...numbers) {
      return { min: Math.min(...numbers), max: Math.max(...numbers) };
  }
  
  const result1 = findMinMax(3, 7, 2, 9, 5); // 결과: { min: 2, max: 9 }
  const result2 = findMinMax(-10, 0, 10); // 결과: { min: -10, max: 10 }
  const result3 = findMinMax(5); // 결과: { min: 5, max: 5 }

• 평균 계산:

  function average(...numbers) {
      return numbers.reduce((total, num) => total + num, 0) / numbers.length;
  }
  
  const result1 = average(1, 2, 3); // 결과: 2
  const result2 = average(10, 20, 30, 40, 50); // 결과: 30
  const result3 = average(5, 8, 12); // 결과: 8.333333333333334

2. 배열 처리

• 배열 슬라이싱:

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

• 배열 복사 (일부 제외):

  const [first, , ...rest] = [1, 2, 3, 4, 5]; // 2를 제외하고 복사
  

• 배열 파괴 할당:

  const numbers = [1, 2, 3, 4, 5];
  const [head, ...tail] = numbers;
  

3. 객체 처리

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

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

• 객체 병합:

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

4. 함수에서의 활용

• 콜백 함수:

  function higherOrderFunction(...args) {
    return (...innerArgs) => {
      const sum = args.reduce((total, num) => total + num, 0);
      const product = innerArgs.reduce((total, num) => total * num, 1);
      return sum * product;
    };
  }

 

이 함수는 고차 함수(higher-order function)입니다. 즉, 다른 함수를 반환하는 함수입니다.
위 예시에서는 args의 합과 innerArgs의 곱을 구하여 곱한 결과를 반환합니다.

• ...args: 초기 인수들을 배열 args에 담습니다.
• (...innerArgs) => ...: 내부 함수를 반환하며, 이 내부 함수는 다시 인수들을 배열 innerArgs에 담습니다.

실제 사용 예시:

const add = higherOrderFunction(1, 2);
const result = add(3, 4); // result는 10이 됩니다.

const multiply = higherOrderFunction(2, 3);
const anotherResult = multiply(4, 5); // anotherResult는 40이 됩니다.

작동 원리:

1. higherOrderFunction(1, 2)를 호출하면, 내부 함수를 반환합니다. 이 내부 함수는 args에 [1, 2]를 가지고 있습니다.
2. 반환된 내부 함수에 3, 4를 전달하면, innerArgs에 [3, 4]가 담기고, args와 innerArgs를 이용하여 원하는 연산을 수행합니다.

 

higherOrderFunction은 매우 유연한 함수로, 다양한 방식으로 활용될 수 있습니다.

• 커링(currying): 함수를 부분적으로 적용하여 새로운 함수를 만드는 기법
• 함수 조합: 여러 함수를 연결하여 새로운 함수를 만드는 기법
• 데이터 변환: 데이터를 원하는 형태로 변환하는 함수 생성

실제 사용 예시: 로그 함수

function log(...args) {
  const now = new Date().toISOString();
  console.log(`${now}:`, ...args);
}

log('Hello', 'world', '!');
log('Error:', 'Something went wrong');

 

// 1.
function sum (a, b, c, d, e) {
  console.log(d) // 4
}
sum(1, 2, 3, 4, 5)

// 2.
function sum (a, b, c, d, e) {
  console.log(d) // 4
}
const numbers = [1, 2, 3, 4, 5]
sum.apply(null, numbers) // apply()

// 3.
function sum (...numbers) {
  console.log(numbers[3]) // 4
}
sum(1, 2, 3, 4, 5)


const colors = ["red", "green", "blue", "yellow", "orange"]
const [firstColor, secondColor, ...restColors] = colors
console.log(restColors); // ["blue", "yellow", "orange"]