rest parameter, arguments, spread 연산자

2020. 3. 3. 22:55JavaScript

* 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 parameterArray 인스턴스로 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