spread operator와 rest parameter

1. spread

2. rest

---

JavaScript(ES6)에서 . . .기호는 Spread Operator와 Rest Parameter 이렇게 2가지 방법으로 쓰인다.

 

1. spread operator

spread operator는 반복 가능한 객체(iterable object)를 함수의 인자 혹은 배열 literal의 요소로 확장한다. 쉽게 설명하자면, 배열과 같은 여러 개의 데이터를 가진 데이터 타입을 , , , 으로 구분되는 여러 개의 요소로 펼치는(spread) 곳에 사용한다는 것이다.

 

대표적인 사용법 중 하나는 iterable 객체를 함수의 인자로 펼쳐서 호출하는 것이다.

function foo(a, b, c, d) {

    console.log(a, b, c, d);
    
}

const arr = ['a', 'b', 'c', 'd'];

foo(...arr); // a b c d

 

Map과 Set 또한 iterable 객체이므로 다음과 같이 확장이 가능하다.

 

function foo(a, b, c, d) {

    console.log(a, b, c, d);
    
}

const map = new Map([

    ['a', 1],
    
    ['b', 2],
    
    ['c', 3],
    
    ['d', 4],
    
]);

foo(...map); // ['a', 1] ['b', 2] ['c', 3] ['d', 4]

const set = new Set(['a', 'b', 'c', 'd']);

foo(...set); // a b c d

 

다른 배열의 요소로 펼치는 방법도 있다.

 

[1, 2, 3, 4]와 같은 형태를 array literal이라고 한다. 배열을 정의하기 위해서 흔하게 사용하는 방법이다. spread는 이 array literal에 다른 배열의 요소를 넣기 위해서 사용한다.

 

const arr = ["a", "b", "c", "d"];

const arr2 = [...arr]; // 배열의 얕은 복사

console.log(arr2); // a b c d

const arr3 = [...arr, "e"] // 새로운 요소 추가

console.log(arr3); // a b c d e

 

아래와 같이 여러 개의 배열을 연결한 새로운 배열을 생성하거나, 배열의 중간에 다른 배열 요소를 추가할 수 있다.

 

const arr = ["a", "b"];

const arr1 = ["c", "d"];

const arr2 = [...arr, ...arr1]; // 두 배열의 요소를 합친 새로운 배열 생성

console.log(arr2); // ["a", "b", "c", "d"]

const arr3 = ["b", "c"];

const arr4 = ["a", ...arr, "d"]; // 배열의 중간에 다른 배열의 요소를 추가하여 새로운 배열 생성

 

 

2. rest parameter

function foo(a, ...rest) {

    console.log(rest); // ['b', 'c', 'd']
    
}

foo("a", "b", "c", "d");

 

rest parameter는 하나의 함수에서 여러 개의 인자를 받을 때, 앞 쪽에서 받은 인자를 제외한 나머지(rest) 인자들을 배열로 합쳐서 받을 수 있게 해준다.

 

const arr = ["a", "b", "c", "d"];

const [firstElement, ...rest] = arr;

console.log(firstElement); // a

console.log(rest); // ['b', 'c', 'd']

 

위의 예제와 같이 rest parameter를 사용해서 "a" property를 뺀 새로운 배열 rest를 얻을 수 있다. 이는 배열 뿐만 아니라 객체에도 똑같이 적용된다.

 

가끔 . . . 이 spread operator인지 rest parameter인지 구분하기 어려울 때가 있다. 이 때 rest parameter임을 알 수 있는 몇 가지 단서가 있다.

• rest가 이미 선언되어 있던 변수가 아니다.
• rest는 대입 연산자의 좌항에 존재한다.
• IDE에서 마우스 포인터를 변수명 위에 놓아서 배열이라는 것을 확인한다.

 

[ 요약 ]

- spread operator는 펼치고, rest parameter는 모은다.

- spread operator는 주는 쪽이고, rest parameter는 받는 쪽이다.- spread operator는 기존의 변수를 사용하고, rest parameter는 새로운 변수를 만든다.