JAVASCRIPT ) Rest 파라미터

Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다.

따라서 Rest 파라미터는 반드시 마지막 파라미터여야 한다.

Rest 파라미터는 ... 으로 사용한다.

 

function foo(v1, v2, ...v3){
    document.write(v1 +"<br>"); //1
    document.write(v2 +"<br>"); //2
    document.write(v3 +"<br>"); //3,4,5
}
foo(1,2,3,4,5);

 

 

Rest 파라미터의 주요 특징

• 가변 인자 처리: Rest 파라미터는 함수에 전달되는 가변 인자(정해지지 않은 개수의 인자들)를 배열로 묶어줍니다.

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

console.log(sum(1, 2, 3));        // 6
console.log(sum(4, 5, 6, 7, 8));  // 30

 

위 예시에서 sum 함수는 여러 개의 숫자를 인자로 받습니다. ...numbers는 전달된 인자들을 배열로 모아서, reduce 함수를 통해 모든 인자를 더하는 데 사용됩니다.

 

• Rest 파라미터는 매개변수 목록의 마지막에 위치해야 함: Rest 파라미터는 함수 매개변수 목록에서 항상 마지막에 와야 합니다. Rest 파라미터 뒤에 다른 매개변수가 올 수 없습니다.

function example(a, b, ...rest) {
  // 올바른 사용법
}

function exampleInvalid(...rest, a, b) {
  // SyntaxError: Rest parameter must be last formal parameter
}

 

• 전달된 인자가 없을 경우: 함수가 호출될 때, Rest 파라미터에 해당하는 인자가 없으면, 그 파라미터는 빈 배열이 됩니다.

function logNumbers(...numbers) {
  console.log(numbers); // 전달된 인자들이 배열로 나타남
}

logNumbers(); // []

 

• 배열 메서드 사용 가능: Rest 파라미터는 배열로 모아지므로, 배열 메서드(map, filter, reduce, forEach 등)를 사용할 수 있습니다.

function multiply(multiplier, ...numbers) {
  return numbers.map(num => num * multiplier);
}

console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

 

 

Rest 파라미터와 arguments 객체의 차이점

자바스크립트에는 Rest 파라미터와 비슷하게 동작하는 arguments 객체가 있습니다. 하지만 둘 사이에는 중요한 차이점이 있습니다.

1. 배열 vs 유사 배열 객체:
   • Rest 파라미터는 진짜 배열입니다. 그래서 배열 메서드를 바로 사용할 수 있습니다.
   • arguments 객체는 유사 배열 객체(array-like object)로 배열 메서드를 바로 사용할 수 없습니다. 배열 메서드를 사용하려면 Array.prototype의 메서드를 빌려와야 합니다.
2. 화살표 함수에서 사용 가능 여부:
   • Rest 파라미터는 모든 함수에서 사용할 수 있습니다.
   • 반면, arguments 객체는 화살표 함수에서는 사용할 수 없습니다. 화살표 함수는 arguments 객체를 지원하지 않기 때문에, 이 경우 Rest 파라미터를 사용해야 합니다.
3. 고정 인자 포함 가능:
   • Rest 파라미터는 고정된 매개변수와 함께 사용할 수 있습니다. 즉, 함수에 고정된 매개변수 뒤에 나머지 인자를 배열로 받을 수 있습니다.
   • 반면 arguments 객체는 고정된 매개변수와의 조합이 더 직관적이지 않고, 모든 인자를 단순히 나열합니다.

function oldStyleFunc() {
  console.log(arguments); // 유사 배열 객체
}

oldStyleFunc(1, 2, 3); // [1, 2, 3]

const newStyleFunc = (...args) => {
  console.log(args); // 배열
};

newStyleFunc(1, 2, 3); // [1, 2, 3]