🧴

[JS] 스프레드 문법과 나머지 매개변수


나머지 매개변수

상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않는다.

Math.max(arg1, ..., argN)와 같이 말이다. 이렇게 임의의 수의 인수를 어떻게 받을까?

여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ... 뒤에 붙여주면 함수 선언부에 포함시킬 수 있다. 아래 예시에서는 모든 인수가 args 배열에 모이게 된다.

1function sumAll(...args) {
2 let sum = 0;
3
4 for (let arg of args) sum += arg;
5
6 return sum;
7}
8console.log(sumAll(1, 2, 3));
9// -> 6

앞부분의 매개변수는 변수로, 나머지는 배열로 모으는 것도 가능하다.

1function example(first, second, ...rest) {}

여기서 주의해야할 점은 나머지 매개변수는 항상 마지막에 있어야 한다는 것이다.

나머지 매개변수를 사용하기 전까지는 arguments라는 유사객체를 사용해 인수에 접근할 수 있었다. 유사 객체이기 때문에 배열 메서드를 사용할 수 없고, 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다는 단점도 있다. 따라서 배열 메서드나 인수 일부만 사용할 떄는 나머지 매개변수를 사용하는 것이 좋다.

스프레드 문법

나머지 매개변수를 받는 함수에 100개의 인자를 전달하고 싶을 때 어떻게 할까? 수동으로 나열하는 방법은 상상만해도 끔찍하다.

이때 사용할 수 있는 것이 '스프레드 문법'이다. ...을 사용하지만 나머지 매개변수와 반대되는 역할을 한다.

함수를 호출할 때 ...arr를 사용하면, 이터러블 객체 arr이 인수 목록으로 확장된다.

1let arr = new Array(100).fill(0).map((_, i) => i);
2
3console.log(Math.max(...arr));
4// -> 99

이터러블 객체 여러 개를 전달하는 것도 가능하고, 스프레드 문법을 평범한 값과 혼합해 사용하는 것도 가능하다. 배열을 합칠때도 사용할 수 있다.

1Math.max(...arr1, 3, ...arr2);
2let arr3 = [...arr1, ...arr2];

참조:
ko.javascript.info