자바스크립트의 Rest Parameter (나머지 매개변수)

Rest Parameter란?

• Rest Parameter는 함수 매개변수로 전달된 나머지 인수들을 배열로 묶어주는 기능입니다.
• 매개변수 이름 앞에 ...(점 3개, 스프레드 연산자) 를 붙여 선언합니다.
• 함수 호출 시 전달된 인수의 개수가 고정되지 않았을 때, 가변 인수를 처리하기 위해 사용합니다.

---

2️⃣ 기본 문법

function myFunction(...rest) {
  console.log(rest); // 전달된 모든 인수가 배열로 출력됨
}

• ...rest는 함수 호출 시 넘겨받은 모든 나머지 인수를 배열로 저장합니다.
• 반드시 마지막 매개변수로 선언해야 합니다.

---

3️⃣ Rest Parameter 사용 예제

예제 1: 모든 인수 출력하기

function logAllArguments(...args) {
  console.log(args);
}

logAllArguments(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

• 함수 호출 시 전달된 인수 1, 2, 3, 4, 5가 배열로 묶여 args에 저장됩니다.

---

예제 2: 고정 매개변수와 Rest Parameter 사용

function sumNumbers(first, second, ...rest) {
  console.log(`First: ${first}`); // 1
  console.log(`Second: ${second}`); // 2
  console.log(`Rest: ${rest}`); // [3, 4, 5]
}

sumNumbers(1, 2, 3, 4, 5);

• 고정 매개변수(first, second)는 각각 첫 번째와 두 번째 인수를 받습니다.
• 나머지 인수(3, 4, 5)는 ...rest에 배열로 저장됩니다.

---

예제 3: 배열 합계 구하기

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

console.log(sum(1, 2, 3, 4)); // 10

• Rest Parameter로 전달받은 숫자 배열(numbers)을 reduce 메서드로 합산합니다.

---

예제 4: 동적 HTML 태그 생성

function createElement(tag, ...content) {
  console.log(`Tag: ${tag}`);
  console.log(`Content: ${content}`);
}

createElement("div", "Hello", "World", "!");
// Tag: div
// Content: ["Hello", "World", "!"]

• Rest Parameter는 태그 이름 외에 모든 내용을 동적으로 처리하는 데 유용합니다.

---

4️⃣ Rest Parameter의 특징과 규칙

1. Rest Parameter는 반드시 마지막 매개변수여야 합니다.

function incorrectUsage(...rest, anotherParam) {
  // SyntaxError: Rest parameter must be last formal parameter
}

2. Rest Parameter는 항상 배열로 반환됩니다.

function showRest(...args) {
  console.log(Array.isArray(args)); // true 
  // console.log(args); // [1, 2, 3]
}
showRest(1, 2, 3);

3. Rest Parameter와 arguments의 차이점

특징 Rest Parameter (...) arguments 객체

형태	배열	유사 배열 객체
사용 가능한 메서드	배열 메서드 사용 가능 (map, reduce 등)	배열 메서드 사용 불가
스코프	화살표 함수 및 일반 함수 모두 사용 가능	화살표 함수에서 사용 불가

예제

function compareRestAndArguments(...rest) {
  console.log(rest); // [1, 2, 3]
  console.log(arguments); // 유사 배열 객체: {0: 1, 1: 2, 2: 3}
}

compareRestAndArguments(1, 2, 3);

---

5️⃣ Rest Parameter와 Spread Operator의 차이

Rest Parameter: 나머지 인수 묶기

• 함수의 매개변수로 사용되며, 전달된 나머지 인수들을 배열로 묶어줍니다.
• 정의 시 사용 → 전달된 나머지 인수들을 배열로 묶음.
• 문법: function(...args) {}

예제

function collectRest(...args) {
  console.log(args); // 전달된 나머지 인수들이 배열로 묶임
}

collectRest(1, 2, 3, 4); // [1, 2, 3, 4]

동작 설명:

1. ...args는 함수 호출 시 전달된 모든 인수를 하나의 배열로 묶습니다.
2. 결과적으로 args는 [1, 2, 3, 4]라는 배열이 됩니다.

Spread Operator: 배열이나 객체 풀기

• 배열 또는 객체의 요소를 개별적으로 풀어줍니다.
• 사용 시점: 함수 호출, 배열/객체 생성 시 사용됩니다.
• 문법: Math.max(...array)

예제

const numbers = [1, 2, 3, 4];
console.log(Math.max(...numbers)); // 4

동작 설명:

1. ...numbers는 [1, 2, 3, 4] 배열의 요소를 개별 값으로 풉니다.
2. 결과적으로 Math.max는 Math.max(1, 2, 3, 4)로 실행되어 최댓값 4를 반환합니다.

Rest vs Spread 한눈에 보기

특징 Rest Parameter Spread Operator

용도	나머지 인수들을 배열로 묶음	배열/객체 요소를 개별로 확장
사용 위치	함수 선언부의 매개변수	함수 호출, 배열/객체 생성
문법 예시	function(...args) {}	Math.max(...array)
결과 형태	배열로 묶임	개별 값으로 풀림

---

6️⃣ Rest Parameter 활용 사례

1. 동적 인수 처리

• 매개변수의 개수를 미리 알 수 없을 때 Rest Parameter로 유연하게 처리 가능.

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

console.log(concatenateStrings("Hello", "World", "!")); // "Hello World !"

2. 다중 인수 분리

• 고정 인수와 나머지 인수를 분리하여 처리 가능.

function processValues(first, ...others) {
  console.log(`First: ${first}`); // 10
  console.log(`Others: ${others}`); // [20, 30, 40]
}

processValues(10, 20, 30, 40);

---

7️⃣ 요약

특징	설명
Rest Parameter	전달된 나머지 인수를 배열로 묶음.
문법	매개변수 이름 앞에 ... 추가 (function(...args))
제한사항	반드시 마지막 매개변수로 선언.
배열 메서드 사용 가능 여부	가능 (Rest Parameter는 배열로 반환).
arguments와의 차이점	Rest Parameter는 배열, arguments는 유사 배열 객체.