[javascript] ES6 rest 파라미터와 Spread Syntax(전개 구문)

REST 파라미터

Rest 파라미터는 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수를 의미한다. Rest 파라미터의 특징은 특정 인수의 갯수를 지정할 필요가 없이 들어온 인수를 배열로 바꿔 전달받을 수 있다는 점이다.

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

example(1,2,3,4,5,6);

함수에 전달된 인수들은 순서대로 파라미터와 rest 파라미터에 할당된다.

function example(param1, param2, ...rest){
    console.log(param1);
    console.log(param2);
    console.log(rest);
}

example(1,2,3,4,5,6);

또한 ES6 문법 중 하나인

화살표 함수에는 함수 객체의 arguments 프로퍼티가 없으므로 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 rest 파라미터를 사용해야 한다.

<< ?

// ES6 : 처음부터 배열이므로 변환의 필요성이 없음

function sum(...args) {
  console.log(arguments);  console.log(Array.isArray(args));
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); 


//ES5

function sum() {
  var array = Array.prototype.slice.call(arguments);
  return array.reduce(function (pre, cur) {
    return pre + cur;
  });
}

console.log(sum(1, 2, 3, 4, 5)); // 15

Spread Syntax

Spread Syntax는 피연산자를 개별적으로 분리하는 문법으로, rest 파라미터는 이로부터 나온다. 배열과 문자 set과 map은 이터러블이며 일반 객체는 spread 문법의 대상이 될 수 없다.

console.log(...[1, 2, 3]) // 1, 2, 3
console.log(...'Hello');  // H e l l o

console.log(...new Map([['a', '1'], ['b', '2']]));  // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3]));  // 1 2 3

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

Spread 문법의 사용방법

// push

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]

//slice

const arr1 = [1, 2, 3, 6];
const arr2 = [4, 5];

arr1.splice(3, 0, ...arr2);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]