2020. 3. 3. 22:55ㆍJavaScript
* rest parameter
- 전달되는 매개변수의 숫자를 알 수 없을 경우 사용
- 함수의 마지막 파라미터 앞에 ...를 붙여 전달된 인수들을 배열로 전달받음
function foo(...rest) {
console.log(rest);
}
foo(0, 1, 2, 3, 4);
// result: [0, 1, 2, 3, 4]
- rest 파라미터는 반드시 마지막 파라미터여야 함
function foo(a, b, ...rest) {
console.log(rest);
}
foo(0, 1, 2, 3, 4);
// result: [2, 3, 4]
function bar(...rest, a, b) {
console.log(rest);
}
// Uncaught SyntaxError: Rest parameter must be last formal parameter
* arguments
- 전달되는 매개변수의 숫자를 알 수 없을 경우 arguments 객체를 사용해 모든 인수 참조 가능
- 항목은 인덱스를 이용해 접근할 수 있음
function foo(){
console.log(arguments);
}
foo(0, 1, 2, 3, 4);
// result: Arguments(5) [0, 1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
function bar(){
console.log(arguments[0]); // 0
console.log(arguments[1]); // 1
console.log(arguments[2]); // 2
}
bar(0, 1, 2);
- arguments 객체는 Array와 비슷하지만 Array가 아니므로 length를 제외하고는 Array 속성을 사용할 수 없음
- 배열 메소드를 사용하려면 Array.prototype.call( )을 사용해야 함
- 실제 Array로 변환 가능
function foo() {
let array1 = Array.prototype.slice.call(arguments); // [0, 1, 2, 3]
let array2 = [].slice.call(arguments); // [0, 1, 2, 3]
let array3 = Array.from(arguments); // [0, 1, 2, 3]
let array4 = [...arguments]; // [0, 1, 2, 3]
}
foo(0, 1, 2, 3);
* rest parameter와 arguments
- rest parameter는 인수 중 구분된 이름이 주어지지 않은 유일한 대상이지만, arguments 객체는 전달된 모든 인수 포함
- rest parameter는 Array 인스턴스로 Array 메소드를 적용가능하지만, arguments 객체는 실제 배열이 아님
- arguments 객체에는 자체에 특정 추가 기능 존재 (callee, caller 등)
- ES6의 arrow function에는 arguments 프로퍼티가 없기 때문에 rest parameter를 사용해야 함
* spread 연산자
- 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수나 요소로 분리
- Function.prototype.apply( )의 대체로 사용 가능
let numbers = [0, 1, 2, 3, 4];
console.log(...numbers); // result: 0 1 2 3 4
Math.max(...numbers); // result: 4
Math.max.apply(null, numbers) // result: 4
'JavaScript' 카테고리의 다른 글
이벤트 버블링과 캡쳐 (0) | 2020.03.26 |
---|---|
function method, this (0) | 2020.03.18 |
template 태그 & fragment (0) | 2020.03.01 |
split, slice, substring (0) | 2020.02.15 |
concat, indexOf, includes (0) | 2020.02.15 |