ES6알아보기 06 - Rest Vs Spread Operator

ES6알아보기 06 - Rest Vs Spread Operator

2018, Jun 06    

Rest Parameter 와 Spread Operator 는 동일하게 ... 으로 표현되기 때문에 햇갈리기 쉬운 걔념입니다.

먼저 양쪽이 어떤식으로 사용되는지 부터 간단하게 살펴보겠습니다.

Rest Parameter

function foo(...arg) {
  console.log(arg.toString());
  // 출력결과
  // a, b, c
}
foo(['a', 'b', 'c']);

Spread Operator

let arr1 = ['a', 'b', 'c'];
let arr2 = ['d', ...arr1, 'e'];
console.log(arr2.toString());
// 출력결과
// d, a, b, c, e

차이가 보이시나요? 간단하게 풀면 Rest 의 경우는 하나의 배열타입의 변수로 모으는 것, Spread 의 경우는 itarable 변수를 펼치는 것 입니다. Rest parameter 의 경우는 파라미터를 받는 경우에만 사용할 수 있습니다.

한가지 경우를 더 살펴보겠습니다.

function foo(...arg) {
  console.log(arg.toString());
}
let arr = ['a', 'b', 'c'];
foo(...arr); // foo('a', 'b', 'c')와 동일합니다.

재밌는 모양이 되었습니다.
함수 호출쪽과 정의쪽의 인수가 동일하게 ... 으로 표현되어 있기 때문에 햇갈릴 수 있지만 양쪽의 ... 의 역활은 분명히 다릅니다. 함수 호출쪽은 전개연산자, 함수 정의쪽은 나머지 파라미터 입니다.

지금까지 살펴본 spread operator 의 사용방법은 아래와 같았습니다.

  1. 함수(메소드)를 호출할 때 
    myFunction(...iterableObj);
  2. 배열안에서 펼칠때 
    [...iterableObj, 4, 5, 6]

여기서 한가지 더 추가하자면 아래와 같은 사용방법 이 있습니다.

  1. 기존의 배열을 나눌때(비구조화: destructuring) 
    [a, b, ...iterableObj] = [1, 2, 3, 4, 5];
// a 는 1
// b 는 2
// iterableObj 는 [3, 4, 5] 로써 하나의 배열로써 들어오게 됩니다.
// 걔념상 spread보다는 ...rest parameter에 더 가깝겠네요.

    참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator

Twitter Facebook Google+
# javascript