ES6 - Default Parameter / Spread operator / Rest parameters

 

 Default Parameter 

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

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

이렇게 x,y 값을 default 0으로 설정해놓으면 전달인자가 전달되지 않은 경우에는 자동으로 0으로 설정이 된다!

 

 

 

 

 Spread operator 

배열을 인자로!

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

                                                                                                              Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체

                                                                                                                                          대표적으로 array 와 string

let a = '12345';
console.log(...a); // 1 2 3 4 5
console.log([...a]); // ["1", "2", "3", "4", "5"]

iterator 전용으로 객체에는 활용할 수 없기 때문에 객체를 ()로 감싸줘야 에러가 발생하지 않는다.

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

:: spread operator 활용 1 - concat() ::

array method인 concat 대신 쓸 수 있다!

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];

let result = array1.concat(array2);
console.log(result); // ['one', 'two', 'three', 'four']

concat을 이용하면 이렇게 써야했던 것을 조금 더 직관적으로 spread operator를 이용해서 바꿔보자.

 

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];

let result = [...array1, ...array2];
console.log(result); // ['one', 'two', 'three', 'four']

짠 ! 이렇게

굳이 이렇게 쓰는 이유를 모르겠다면 아래 예제를 보자.

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];

let result = ['hello', ...array1, 'world', ...array2];
console.log(result); // ['hello', 'one', 'two', 'world', 'three', 'four']

이렇게 배열 중간 중간에 element를 추가할 수도 있다는 것이 포인트!

 

:: spread operator 활용 2 - 배열 복사 ::

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); 

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

 

 

 Rest parameter 

인자를 배열로!

 

spread operator를 활용해서 파라미터를 정의한 것을 말한다.

함수를 정의할 때 매개변수에 얼마나 많은 변수가 들어올지 예상할 수 없을 때 사용한다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

 

:: rest parameter에서 주의할 점 ::

나머지 남은 파라미터를 모두 포함하는 것이기 때문에 반드시 마지막 파라미터여야 한다.

 

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

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