매개변수

기존의 ES5에선 매개변수에 값을 입력하지 않거나 인수가 부족한 경우, 매개변수의 값은 undefined이다.

function sum(x, y) {
  return x + y;
}

console.log(sum(1)); // NaN
// 1 + undefine = NaN

ES6에서는 매개변수 기본값을 사용하여 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다. 매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우에만 유효하다.

function sum(x = 0, y = 0) {
  return x + y;
}

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

Rest 파라미터 (...rest)

지정한 매개변수 외에 나머지 매개변수들을 배열로 묶어버리는 것 나머지의 값을 받기 때문에 마지막에 사용하여야 함

좋은 점은 rest가 없던 JS는 arguments의 객체를 받아 사용하여야 했는데 이때 유사배열객체 이므로 배열로 변경 후 사용하여야 하는 복잡함이 있었다. 하지마 ...rest 는 배열로 나오기 때문에 사용하기에 좋다

!!ES6의 화살표함수에는 함수 객체의 arguments 프로퍼티가 없다.

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

foo(1, 2, 3, 4, 5);

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

Spread 문법

Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 이터러블 이어야 한다.

// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]) // 1, 2, 3

// 문자열은 이터러블이다.
console.log(...'Hello');  // H e l l o

// Map과 Set은 이터러블이다.
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

함수의 인수로 배열을 사용하고 싶을 경우 배열을 분해해서 원하는 값을 가져와야 함으로 apply를 사용한다

// ES5
function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}

// 배열을 분해하여 배열의 각 요소를 파라미터에 전달하려고 한다.
const arr = [1, 2, 3];

**// apply 함수의 2번째 인수(배열)는 분해되어 함수 foo의 파라이터에 전달된다.**
foo.apply(null, arr);
// foo.call(null, 1, 2, 3);

ES6의 Spread 문법(…)을 사용한 배열을 인수로 함수에 전달하면 배열의 요소를 분해하여 순차적으로 파라미터에 할당한다.

Rest 파라미터는 반드시 마지막 파라미터이어야 하지만 Spread 문법을 사용한 인수는 자유롭게 사용할 수 있다