JavaScript의 Rest 파라미터 사용하기
ES2015(ES6) 에서 새로 생긴 Rest 파라미터를 알아보겠습니다.
앞서 살펴보았던 spread operator 는 iterable 객체에 ...을 붙여서 요소 하나 하나를 손쉽게 전개시켜 주는 역할을 하였습니다.
...을 어디에 어떻게 사용하냐에 따라, Spread Syntax가 될 수도 있고, Rest Syntax가 될 수도 있습니다.
요소를 하나씩 모두 전개시킬 때는 Spread의 역할을, 그리고 나머지 요소를 묶을 때는 Rest의 역할이라고 생각하면 편합니다.
Rest 파라미터
Rest 파라미터는 말 그대로 Rest의 역할을 하는 함수 파라미터입니다. ES2015(ES6) 에서 처음 도입된 것으로, 함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아 줍니다.
형태는 아래와 같습니다.
1
2
3
4
5
function test(a, b, ...rest){ // Rest 파라미터 (...rest)
console.log(a, b); // 1 2
console.log(rest); // [3, 4, 5]
}
test(1, 2, 3, 4, 5);
위에서 볼 수 있듯이, test 함수 파라미터는 a, b, ...rest로 작성되어 있습니다. test 함수 호출 시 인자에 1, 2, 3, 4, 5 를 넣어서 호출하고 있는데, 파라미터 앞에서부터 차례대로 1은 a, 2는 b에 대응되고, 그 나머지 부분(3, 4, 5)는 ...rest 가 받아서 [3, 4, 5] 로 나타내 줍니다.
주의할 점은 Rest 파라미터는 대응시키고 남은 인수들을 배열로 만들어 주기 때문에, 아래와 같이 처음이나 중간에 올 수 없고, 마지막에만 올 수 있습니다.
spread 문법과 혼동하지 않도록 유의해 주세요! 함수의 파라미터에 선언된 Rest 파라미터가 마지막에만 올 수 있다는 의미입니다. spread operator는 전개할 수 있는 어디에든 붙여서 사용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 틀린 예시
function bar(a, ...rest, c){
console.log(a, rest, c); // Error: Rest parameter must be last formal parameter
}
bar(1, 2, 3, 4, 5);
// 올바른 예시
function foo(a, b, ...rest){ // Rest 파라미터는 마지막에 위치
console.log(a, b); // 1 2
console.log(rest); // [3, 4, 5]
}
foo(1, 2, 3, 4, 5);
// 응용 예시
function myFunc(a, b, ...rest){
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
}
// spread 연산자는 역할에 맞게 자유로이 사용
const arrA = [1, 2];
const arrB = [3, 4, 5];
myFunc(...arr, ...arrB); // arrA가 전개되어 1, 2가 되고, arrB가 전개되어 3, 4, 5가 된다. 즉, myFunc(1, 2, 3, 4, 5)와 동일하다.
Rest 파라미터라고 해서 반드시 뒤에 남는 마지막 것들만 받아줄 수 있다는 의미는 아닙니다. 함수 선언 시 아래와 같이 Rest 파라미터만 존재해도 전혀 문제가 없습니다.
1
2
3
4
function foo(...theArgs){
console.log(theArgs);
}
foo(1, 2, 3); // [1, 2, 3]
Rest 파라미터를 사용한 다양한 예시는 아래 링크에서 확인하실 수 있습니다! 꼭 참고해 보시는 것을 추천드립니다.
다음 포스팅에서는 구조 분해 할당(Destructuring Assignment)에 대해서 살펴보도록 하겠습니다.
참고 링크