JS - Rest 파라미터 구문

 

ES6의 문법중 객체 비구조화 할당, 전개연산자(Spread)도 많이 사용되지만 Rest 파라미터라는것도 심심찮게 많이 사용하는 문법중 하나인것같다. ( 리액트를 할때도 많이 쓰이는거같음! )

 

MDN에서는 Rest 파라미터의 설명이 다음과 같이 나와있다.

 

- Rest 파라미터 구문은 정해지지 않은 수 (an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

 

이게 무슨말이냐면, Rest 파라미터 구문은 말 그대로 함수의 파라미터에서 사용하는 구문같은것이당.

예시를 보면 바로 이해할 수 있다.

 

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

보면 myFun이라는 함수의 파라미터로 a, b, ...manyMoreArgs 이렇게 세 개의 인자가 들어가고있다.

 

여기서 ...manyMoreArgs < 이게 Rest 파라미터이다.

보시다싶이 함수의 파라미터로 들어가는 부분에서 전개연산자처럼 점 세개를 붙여서 사용한다.

 

위 코드를 보면 3개의 인자를 받는 myFun 함수는 각각 전달받은 인자들을 로그에 찍어주는 역할을 하는 함수이다.

그리고 전달하는 인자는 ("one", "two", "three", "four", "five", "six") 를 전달받고있다.

 

결과를 보면

one

two

[three, four, five, six]

를 로그에 출력하고있다.

 

이렇게 함수에 여러 인자를 전달할때, 명시된 인자를 제외하고 나머지 인자는 배열로 만들어서 전달 받을수 있는것이다.

 

코드를 다음과 같이 수정한다면?

 

function myFun(a, b, c, d, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("c", c);
  console.log("d", d);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// > "a" "one"
// > "b" "two"
// > "c" "three"
// > "d" "four"
// > "manyMoreArgs" Array ["five", "six"]

a, b, c, d 를 제외한 "five", "six" 가 manyMoreArgs에 들어간다.

주의할점은 Rest 파라미터는 함수의 파라미터를 받는 부분의 마지막 부분에 명시해야한다!! (꼭임!)