Rest 파라미터

오늘은 rest 와 spread의 차이점을 살펴보려 한다.

 

시작하기 전에 간략하게 말하자면 rest 는 단축식이고 spread 는 퍼뜨리는 형식이다.

 

Rest 같은 경우는 함수에서 흔히 발견할 수 있는데

 

예를 들어 : 

function sum(...args) {
  return args.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(4, 5, 6));
// expected output: 15

console.log(sum(2, 2, 1));
// expected output: 5

 

에서 볼 수 있듯이 숫자들의 합을 구하는 함수에 들어가는 인자 개수가 지정되어있지 않았을 때에는 " . "을 세 개를 연속으로 이어주어 인자들을 하나로 묶을 수 있다. 이 때 돌아오는 반환 타입은 '표준' 자바스크립트 배열이다. 또한 사용할 때 주의해야 할 점은 제일 마지막 파라미터 값으로 지정해야 된다는 것이다. 그래야만 사용 가능하다.

 

헷갈릴 수도 있는 게 arguments와의 차이점인데, rest 같은 경우에는 지정되어 있지 않은 값들만 묶어주지만 arguments는 모든 인자들을 포함하기 때문에 다르다는 것을 분명히 해야한다. 

 

또한 재밌는 것은 만약에 

function sum(...[a, b, c]) {
  //code goes here
}

 

를 적었다면 rest는 분리가 된다는 것이다.

MDN에서 들어주는 예시를 보면 조금 더 이해가 잘 될 것이다.

 

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b 와 c 는 undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)

 

이처럼 만약에 지정된 값들이 있으면 그 값들이 없는 상황에서는 인자들이 undefined로 변환되고

만약에 지정된 인자들의 개수보다 더 많으면 해체가 아예되지 않는다

 

이런 부분들만 유의하면 rest는 얼마든지 유용하게 사용할 수 있다는 것!