모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
...은 나머지 매개변수나 전개문법으로 사용된다.
나머지 매개변수와 전개문법은 다음의 방법으로 구분할 수 있다.
...이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 ‘나머지 매개변수’이다....이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 ‘전개 문법’이다.
사용 패턴
- 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용한다.
- 다수의 인수를 받는 함수에 배열을 전달할 때 전개 문법을 사용한다.
둘을 함 께 사용하면 매개변수 목록과 배열 간 전환을 쉽게 할 수 있다.
예시
Math.max(arg1, arg2, ..., argN): 인수 중 가장 큰 수를 반환한다.Object.assign(dest, src1, src2, ..., src3):src..N의 프로퍼티를dest로 복사한다.
나머지 매개변수 ...
자바스크립트에서는 함수의 정의 방법과 상관 없이 함수에 넘겨주는 인수의 개수에는 제약이 없다.
1
2
function sum(a,b) { return a + b; }
alert( sum(1,2,3,4,5) );
위와 같이 여분의 인수를 전달하면 여분의 인수는 사용되지 않고, 에러가 발생하지 않는다.
여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ... 뒤에 붙여주면 함수 선언부에 포함시킬 수 있다. 이때 ...은 나머지 매개변수를 한데 모아 배열에 집어넣어라라는 것을 의미한다.
1
2
3
4
5
function sumAll(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
1
2
3
4
5
6
7
8
9
function showName(firstName, lastName, ...titles) {
alert( firstName + ' ' + lastName);
alert(titles[0]);
alert(titles[1]);
alert(titles.length);
}
alert("Julius", "Caesar", "Consul", "Imperator");
나머지 매개변수는 항상 마지막에 있어야 한다. 남아있는 인수를 모으는 역할을 하기 때문이다.
arguments 변수
arguments라는 반복 가능한 유사 배열 객체를 사용해도 인수 모두를 사용할 수 있다. 이것은 조금 오래된 방법이기는 하다. 배열 메서드를 사용할 수 없다는 단점이 있다. (ex: map()) 또한 인수 전체를 담기 때문에 나머지 변수처럼 인수의 일부만 사용할 수 없다는 단점이 있다.
1
2
3
4
5
function showName() {
alert( arguments.length );
alert( arguments[0] );
alert( arguments[1] );
}
화살표 함수에는
arguments가 없다. 화살표 함수에서 arguments 객체에 접근하면, 외부에 있는 일반 함수의 arguments 객체를 가져온다.
spread 문법
함수를 호출할 대 ...arr를 사용하면, 이터러블 객체 arr이 인수 목록으로 확장된다.
1
2
let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5
전개 문법을 평범한 값과 혼합해 사용할 수도 있다.
1
2
3
4
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(1, ...arr1, 2, ...arr2, 25)); //25
배열이 아니더라도 이터러블 객체이면 전개 문법을 사용할 수 있다.
1
2
let str = "Hello";
alert( [...str] ); // H, e, l, l, o
전개 문법은 for..of와 같은 방식으로 내부에서 iterator를 사용해 요소를 수집한다.
사실 메서드 Array.from은 이터러블 객체를 배열로 바꿔주기 때문에 [...str]과 동일한 작업을 할 수 있다.
1
alert( Array.from(str) ); // H, e, l, l, o
차이점이 있다면 Array.from(obj)는 유사 배열 객체와 이터러블 객체둘 다에 사용할 수 있지만, 전개 문법은 이터러블 객체에만 사용할 수 있다는 점이 다르다.
배열/객체 복사하기
전개 문법을 사용하면 Object.assign과 동일한 일을 할 수 있다.
1
2
let arr = [1, 2, 3];
let arrCopy = [...arr];
객체도 마찬가지이다.
1
2
let obj = {a: 1, b: 2, c: 3};
let objCopy = { ...obj };