나머지 매개변수 …
function sum(a, b) {
return a + b;
}
alert( sum(1, 2, 3, 4, 5) );함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다.
함수를 정의할 땐 인수를 두 개만 받도록 하고, 실제 함수를 호출할 땐 이보다 더 많은 ‘여분의’ 인수를 전달했지만, 에러가 발생하지 않는다.
다만 반환 값은 처음 두 개의 인수만을 사용해 계산된다.
이렇게 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ...뒤에 붙여주면 함수 선언부에 포함시킬 수 있다. 이때 마침표 세 개 ...는 "나머지 매개변수들을 한데 모아 배열에 집어넣어라."는 것을 의미한다.
아래 예시에선 모든 인수가 배열 args에 모인다.
function sumAll(...args) { // args는 배열의 이름입니다.
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6아래 예시에선 처음 두 인수는 변수에, 나머지 인수들은 titles이라는 배열에 할당된다.
function showName(firstName, lastName, ...titles) {
alert( firstName + ' ' + lastName ); // Julius Caesar
// 나머지 인수들은 배열 titles의 요소가 됩니다.
// titles = ["Consul", "Imperator"]
alert( titles[0] ); // Consul
alert( titles[1] ); // Imperator
alert( titles.length ); // 2
}
showName("Julius", "Caesar", "Consul", "Imperator");💡 나머지 매개변수…rest는 항상 마지막에 있어야 한다.
‘arguments’ 변수
arguements라는 특별한 유사 배열 객체(array-like object)를 이용하면 인덱스를 사용해 모든 인수에 접근할 수 있다.
function showName() {
alert( arguments.length );
alert( arguments[0] );
alert( arguments[1] );
// arguments는 이터러블 객체이기 때문에
// for(let arg of arguments) alert(arg); 를 사용해 인수를 나열할 수 있습니다.
}
// 2, Julius, Caesar가 출력됨
showName("Julius", "Caesar");
// 1, Bora, undefined가 출력됨(두 번째 인수는 없음)
showName("Bora");과거엔 함수의 인수 전체를 얻어내는 방법이 arguments를 사용하는 것밖에 없었다.
arguments는 유사 배열 객체이면서 이터러블(반복 가능한) 객체이다. 따라서 배열 메서드를 사용할 수 없다.arguments.map (…)을 호출할 수 없다.arguments는 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다.- 따라서 배열 메서드를 사용하고 싶거나 인수 일부만 사용하고자 할 때는 나머지 매개변수를 사용하는 것이 좋다.
spread 문법
alert( Math.max(3, 5, 1) ); // 5전개 문법(spread syntax) 은 …를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 전개 문법은 나머지 매개변수와 반대의 역할을 한다.
let arr = [3, 5, 1];
alert( Math.max(arr) ); // NaN배열 [3, 5, 1]가 있고, 이 배열을 대상으로 Math.max를 호출하고 싶다고 가정해보자.
아무런 조작 없이 배열을 ‘있는 그대로’ Math.max에 넘기면 원하는 대로 동작하지 않는다. 그 이유는 Math.max가 배열이 아닌 숫자 목록을 인수로 받기 때문이다.
함수를 호출 할 때 …arr를 사용하면, 이터러블 객체 arr이 인수 목록으로 ‘확장’된다.
let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5 (전개 문법이 배열을 인수 목록으로 바꿔주었습니다.)전개 문법을 사용해 문자열을 문자 배열로 변환시켜보자.
let str = "Hello";
alert( [...str] ); // H,e,l,l,o메서드 Array.from은 문자열 같은 이터러블 객체를 배열로 바꿔주기 때문에 […str]과 동일한 결과 출력됨.
let str = "Hello";
// Array.from은 이터러블을 배열로 바꿔줍니다.
alert( Array.from(str) ); // H,e,l,l,o💡b하지만, Array.from(obj)와 [...obj]에는 다음과 같은 미묘한 차이가 있다.
- Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용 가능
- 전개 문법은 이터러블 객체에만 사용 가능
때문에 무언가를 배열로 바꿀 때는 전개 문법보다Array.from이 보편적으로 사용된다.
📝 정리
“…”은 나머지 매개변수나 전개 문법으로 사용된다.
나머지 매개변수
…이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아준다.- 인수 개수에 제한이 없는 함수를 만들 때 사용
전개 문법
…이 함수 호출 시 사용되면 배열을 목록으로 확장해준다.- 다수의 인수를 받는 함수에 배열을 전달할 때 사용
