[Front end] JavaScript Rest 파라미터 Spread 연산자

 

Rest 파라미터

Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터로 작성된 형태이다. Rest 파라미터를 이용하면 데이터를 배열로 전달받을 수 있다. 자바에서 가변 인자와 유사한 방식이다.

function foo(...rest) {
    console.log(Array.isArray(rest)); // true
    console.log(rest); // [ 1, 2, 3, 4, 5 ]
}
foo(1, 2, 3, 4, 5);

한 가지 유의할 점은 Rest 파라미터는 항상 제일 마지막 파라미터로 있어야 한다는 것이다.

 

Spread 연산자

Spread 연산자는 연산자의 배열 또는 이터레이블(iterable)을 개별적으로 분리한다. 이터레이블은 iterator를 통해 next()로 순회가 가능한 구조를 말한다. Array, String, Map, Set, Dom 구조가 대표적이다.

// 배열
console.log(...[1, 2, 3]); // -> 1, 2, 3
// 문자열
console.log(...'Helllo');  // H e l l l o

 

Rest와 Spread 혼동

Rest는 함수 선언문의 파라미터에 Spread(...) 연산자를 이용해서 가변 인자를 통해 배열로 데이터를 전달받는 것이고, 함수 호출 문의 파라미터에 Spread(...) 연산자를 이용해서 호출하면 배열이 해당 매개변수로 각각 매핑되는 것은 다르다.

//Rest
function foo(param, ...rest) {
    console.log(param); // 1
    console.log(rest);  // [ 2, 3 ]
}
foo(1, 2, 3);
 
//Spread
function bar(x, y, z) {
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // 3
}
bar(...[1, 2, 3]);