기본값+rest+spread

1. 매개변수 기본값 (Default Parameter value)

• 함수를 호출할 때 인수를 전달하지 않은 경우에도 에러가 발생하지는 않는다.
• 함수는 매개변수와 인수의 개수를 체크하지 않는다. 
• 인수가 부족한 경우, 매개변수의 값은 undefined이다.

function sum(x, y) {
  // 매개변수의 값이 falsy value인 경우, 기본값을 할당한다.
  x = x || 0;
  y = y || 0;

  return x + y;
}

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

ES6에서는 매개변수 기본값을 사용하여 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.

( 매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우에만 유효하다. )

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

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

 

 

2. Rest 파라미터

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
• 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다

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

• rest 파라미터는 반드시 마지막 파라미터여야 한다.

function foo( ...rest, param1, param2) { }

foo(1, 2, 3, 4, 5);
// SyntaxError: Rest parameter must be last formal parameter

• 함수 정의시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다

function foo(...rest) {}
console.log(foo.length); // 0

function bar(x, ...rest) {}
console.log(bar.length); // 1

function baz(x, y, ...rest) {}
console.log(baz.length); // 2

 

ES5에서는 인자의 개수를 사전에 알 수 없는 경우 arguments 객체를 통해서 인수를 확인한다.

**arguments 객체: 전달된 인수들의 정보를 담고 있는 순회가능한 유사배열 객체

// ES5
var foo = function () {
  console.log(arguments);
};

foo(1, 2); // { '0': 1, '1': 2 }

배열이 아닌 유사배열 객체이므로 배열메소드를 사용하려면 Function.prototype.call을 사용하는 번거로움이 있다

// ES5
function sum() {
  /*
  가변 인자 함수는 arguments 객체를 통해 인수를 전달받는다.
  유사 배열 객체인 arguments 객체를 배열로 변환한다.
  */
  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

 

ES6에서는 rest 파라미터를 사용해서 가변인자의 목록을 배열로 전달받을 수 있다.

유사배열객체를 배열로 변환하는 번거로움을 피할 수 있다!

/ ES6
function sum(...args) {
  console.log(arguments); // Arguments(5) [1, 2, 3, 4, 5, callee: (...), Symbol(Symbol.iterator): ƒ]
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

 

 

3. spread 문법

• spread 연산자는 연산자의 대상 배열 또는 이터러블을 개별 요소로 분리한다.

**이터러블: Array, String, Map, Set, DOM구조,     for...of로 순회할 수 있는 자료구조.

// 문자열은 이터러블이다.
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

 

함수의 파라미터로 사용하는 방법

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

const arr = [1,2,3]
/* ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
   spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다. */
foo(...arr);

 

Rest와 헷갈리지 않기!!

• Rest 파라미터는 함수 선언문의 파라미터에 spread 연산자(...)를 이용해서 받으면 가변인자를 받아 배열로 만들어서 사용하는 것 즉, spread 문법을 사용해서 파라미터를 정의한 것.
• 함수 호출문의 파라미터에 spread 연산자(...)를 이용해서 호출하면 배열이 해당 매개변수로 각각 매핑되는 것.      (= spread 문법을 사용한 배열을 인수로 함수에 전달하면 배열의 요소를 순차적으로 파라미터에 할당하는 것.)
• 또한, Rest 파라미터는 반드시 마지막에 써야 하지만, spread 호출(spread 문법을 사용한 인수)에서는 자유롭게 사용할 수 있다.

//Rest
function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3 ]
}
foo(1, 2, 3);
 
//Spread호출
function bar(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
bar(...[1, 2, 3]);

 

1. 배열에서 사용하기

//ES5
var arr = [1, 2, 3];
console.log(arr.concat([4, 5, 6])); // [ 1, 2, 3, 4, 5, 6 ]
 
// ES6
const arr = [1, 2, 3];
// ...arr은 [1, 2, 3]을 개별 요소로 분리한다
console.log([...arr, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]

-> concat() 대신 가독성이 좋아졌다

 

// ES5
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
 
// apply 메소드의 2번째 인자는 배열. 이것은 개별 인자로 push 메소드에 전달된다.
Array.prototype.push.apply(arr1, arr2);
//arr1.push(4, 5, 6); 하는 것과 동일하다
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]
 
// ES6
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
 
// ...arr2는 [4, 5, 6]을 개별 요소로 분리한다
arr1.push(...arr2); // == arr1.push(4, 5, 6);
 
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]

-> push 를 개별 요소로 전달할 수 있으니 훨씬 간결하고 가독성 또한 좋아졌다.

 

const htmlCollection = document.getElementsByTagName('li');

// 유사 배열인 HTMLCollection을 배열로 변환한다.
const newArray = [...htmlCollection]; // Spread 문법

// ES6의 Array.from 메소드를 사용할 수도 있다.
// const newArray = Array.from(htmlCollection);

-> 유사 배열 객체(Array-like Object)를 배열로 손쉽게 변환할 수 있다.

 

 

2. 객체에서 사용하기

const o1 = { x: 1, y: 2 };
const o2 = { ...o1, z: 3 };
console.log(o2); // { x: 1, y: 2, z: 3 }
 
const target = { x: 1, y: 2 };
const source = { z: 3 };
// Object.assign를 사용하여도 동일한 작업을 할 수 있다.
// Object.assign은 타깃 객체를 반환한다
console.log(Object.assign(target, source)); // { x: 1, y: 2, z: 3 }

-> Object.assign을 대체할 수 있는 간편한 문법이다.

 

 

 

 

참고,출처

https://poiemaweb.com/es6-extended-parameter-handling

https://jeong-pro.tistory.com/117