[JavaScript] 나머지 매개변수와 스프레드 구문

나머지 매개변수(rest parameters)

나머지 매개변수는 함수 정의 시 매개변수 목록에서 ...을 사용하여, 함수가 호출될 때 전달된 나머지 인수들을 배열로 수집합니다. 이 방식은 인수의 개수가 정해지지 않은 함수나, 일부 인수만 따로 처리하고 나머지를 배열로 다룰 때 유용하게 활용할 수 있습니다.

모든 인수의 평균 계산 예제

function calculateAverage(...numbers) {
  const total = numbers.reduce((sum, num) => sum + num, 0);
  return numbers.length === 0 ? 0 : total / numbers.length;
}

console.log(calculateAverage(10, 20, 30));       // 출력: 20
console.log(calculateAverage(5, 15));            // 출력: 10
console.log(calculateAverage());                 // 출력: 0

필수 인수와 옵션 인수 구분 예제

function introduce(name, age, ...hobbies) {
  console.log(`안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}살입니다.`);
  if (hobbies.length > 0) {
    console.log(`취미는 ${hobbies.join(", ")}입니다.`);
  } else {
    console.log("취미는 없습니다.");
  }
}

introduce("지민", 25, "독서", "등산");
// 출력:
// 안녕하세요, 제 이름은 지민이고, 나이는 25살입니다.
// 취미는 독서, 등산입니다.

introduce("영수", 30);
// 출력:
// 안녕하세요, 제 이름은 영수이고, 나이는 30살입니다.
// 취미는 없습니다.

나머지 매개변수는 함수 매개변수 목록의 마지막에 위치해야 하며, 하나의 함수에서 한 번만 사용할 수 있습니다.

스프레드 구문 (Spread Syntax)

스프레드 구문은 배열이나 이터러블 객체를 ...를 사용하여 개별 요소로 확장할 때 사용합니다. 이를 통해 함수 호출, 배열 및 객체 리터럴에서 요소나 프로퍼티를 손쉽게 다룰 수 있습니다.

배열 확장하기

const temperatures = [23, 19, 30, 21];

const lowestTemp = Math.min(...temperatures);
console.log(`가장 낮은 온도는 ${lowestTemp}도입니다.`);
// 출력: 가장 낮은 온도는 19도입니다.

 

 

배열 복사 및 요소 추가

const fruits = ['사과', '바나나'];
const moreFruits = [...fruits, '오렌지', '포도'];

console.log(moreFruits);
// 출력: ['사과', '바나나', '오렌지', '포도']

객체 병합

const baseConfig = {
  server: 'localhost',
  port: 8080
};

const customConfig = {
  port: 3000,
  debug: true
};

const finalConfig = { ...baseConfig, ...customConfig };

console.log(finalConfig);
// 출력: { server: 'localhost', port: 3000, debug: true }

 

arguments 객체와 비교

모든 인수에 접근하기 위해 arguments 객체를 사용했지만, arguments는 배열이 아닌 유사 배열 객체이기 때문에 배열 메서드를 직접 사용할 수 없습니다.

function sumArguments() {
  // arguments를 배열로 변환해야 배열 메서드를 사용할 수 있습니다.
  const argsArray = Array.from(arguments);
  return argsArray.reduce((sum, num) => sum + num, 0);
}

console.log(sumArguments(1, 2, 3, 4)); // 출력: 10

나머지 매개변수를 사용하면 진짜 배열이 생성되어, map, filter, reduce 등의 배열 메서드를 자연스럽게 활용할 수 있습니다.

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

console.log(sumNumbers(1, 2, 3, 4)); // 출력: 10