[ Javascript ] 알아두면 유용한 문법 - Rest

안녕하세요 코띵입니다.

지난번에는 spread에 대해서 알아보았는데요,

어쩌면 그와 반대되는 개념을 포스팅해보겠습니다.

 

| Rest

spread와는 다르게 '모아온다' 라고 생각하시면 됩니다. 그 외 '나머지' 같은 의미라고도 할 수 있겠습니다.

rest는 객체, 배열, 함수의 파라미터에서 사용할 수 있습니다.

 

예시를 들어보겠습니다. 먼저 객체의 경우를 보겠습니다.

 

const Dog = {
    name: '두부',
    attribute: 'cute',
    color: 'white'
};
 
const { name, ...cuteDog } = Dog;
console.log(name); // 두부
console.log(cuteDog); // attribute와 color의 값이 들어있음

 

비구조화 할당을 통해 rest를 사용하면 다음과 같은 결과가 나옵니다.

cuteDog에는 Dog에서 name값을 제외한 값들이 들어가게 됩니다.

...뒤에 붙여지는 이름은 임의로 설정해주면 됩니다.

 

그럼 배열의 예시도 보겠습니다.

 

const numbers = [1, 2, 3, 4, 5]
const [one, ...rest] = numbers; 
 
console.log(one); // 1
console.log(rest) // [2,3,4,5]

 

마찬가지로 비구조화 할당을 통해 rest를 사용하면 다음과 같은 결과가 나옵니다.

주의할 점은, rest는 앞에 오지 못하고 반드시 마지막에 와야한다는 점입니다.

 

마지막으로 함수의 파라미터의 예시를 보겠습니다.

 

function sum(a, b, c, d, e, f, g) {
  return a + b + c + d + e + f + g;
}
 
console.log(sum(1,2,3,4,5,6,7)) // 28
console.log(sum(1,2,3,4,5,6)) // NaN

 

다음과 같은 함수가 있을 때, 파라미터 값으로 1개라도 주지 않을 경우 NaN 결과가 나오게 됩니다.

파라미터로 값을 넘겨주지 못할 경우 파라미터의 값이 undefined 가 되기 때문입니다.

 

이와 같은 문제를 rest를 쓰면 간단히 해결할 수 있습니다. 

 

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}
 
console.log(sum(1,2,3,4,5)) // 10

 

rest를 쓰면 파라미터의 개수를 지정하지 않아도 됩니다.

그래서 원하는만큼의 파라미터를 보낼 수 있고, 파라미터가 undefined 나는 경우가 생기지 않게 됩니다.

reduce구문을 통해 덧셈 함수를 다음과 같이 간단하게 정의할 수 있습니다.

 

 

도움이 돼셨다면 좋아요 꾸욱!

부탁드립니다. 감사합니다

 

[ 사용된 다른 구문 ] 비구조화 할당

[ Javascript ] 알아두면 유용한 문법 - 비구조화 할당(1)