[JavaScript] rest syntax와 spread syntax

Rest 파라미터(Rest Parameter)

Rest 파라미터는 매개변수 이름 앞에 세개의 점(...)을 붙여 정의한 매개변수로 여러 개의 인자들을 하나의 배열로 만들 수 있습니다.

그래서 인수의 갯수를 지정해주지 않고도 들어온 모든 인수를 배열로 바꿔 전달받을 수 있습니다.

function foo(...rest) {
    console.log(rest);
}

foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

 

함수의 마지막 파라미터 앞에 ...를 붙여 앞의 인수를 제외한 나머지 갯수의 인수들을 배열로 대체할 수 있습니다.

즉, 함수에 전달된 인수들은 순서대로 파라미터와 Rest 파라미터에 할당됩니다.

중요한 점은 마지막 파라미터만 Rest 파라미터가 될 수 있습니다.

function foo(a, b, ...moreArgs) {
    console.log(moreArgs);
}

foo(1, 2, 3, 4, 5); // [3, 4, 5]

function fooError(a, ...moreArgs, b) {
    // error
}

 

Argument와 Rest 파라미터의 차이점

Argument:

유사 배열 객체(array-like object)로 배열처럼 사용할 수 있는 객체입니다.

따라서 순회 가능(iterable)하고 length의 값을 알수있지만 array 메서드는 사용할 수 없습니다.

 

Rest 파라미터:

배열이므로 array 메서드를 사용할 수 있습니다.

 

 

Spread 구문(Spread Syntax)

Spread 구문은 객체 혹은 배열들을 개별 요소로 분리하여 펼칠 수 있게 해줍니다.

Spread 구문을 사용하려면 배열이나 객체 앞에 세개의 점(...)을 붙여주면 됩니다.

 

1. 펼칠 대상이 객체인 경우

const obj2 = {...obj1}

이때, obj1 === obj2하면 false가 나오는데 서로 다른 주소값을 가진 독립적인 객체이기 때문입니다.

 

2. 펼칠 대상이 배열인 경우

const arr2 = [...arr1]

서로 다른 주소값을 가진 독립적인 배열이 됩니다.

const obj = {...arr}

배열의 index가 property의 name이 됩니다.

 

Rest 파라미터와 Spread 구문의 차이점

Rest 파라미터:

함수 선언문의 파라미터에 '...'를 이용하면 가변인자를 받아 배열로 만들어서 함수 내에서 사용하게 됩니다.

제일 마지막 파라미터에만 사용 가능합니다.

 

Spread 구문:

함수 호풀문의 파라미터에 '...'를 이용해서 호출하면 배열이 해당 매개변수로 각각 매핑됩니다.

어느 위치에서든 사용 가능합니다.

 

 

Reference

• Rest 파라미터-MDN
• 전개 구문-MDN