Rest Pattern and Parameters

spread operator와 rest pattern 차이점

Spread: 배열을 언팩해서 원소로 만드는 것
Rest: 원소를 모아서 배열로 만드는 것

모양은 ...로 똑같지만 하는 역할이 다르다.
예를 들어 다음 코드를 보자.

//SPREAD, because on Right side of =
const arr = [1, 2, ...[3, 4]];

//REST, because on LEFT side of =
const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a,b, others);//1,2,[3,4,5]

spread는 =의 오른쪽에 ...가 있고 rest는 =의 왼쪽에 ...가 있다. spread는 배열 [3,4]을 풀어서 원소로 만들어주므로 const arr = [1,2,3,4]가 되는 것이다.

rest는 a,b자리에 1,2가 각각 들어가고 ...others에 나머지 배열 원소가 배열 형태로 들어가게 된다.

이제 다음 코드 예제를 보자.

const [pizza, , risotto, ...otherFood] = [
  ...restaurant.mainMenu,
  ...restaurant.starterMenu,
];
console.log(pizza, risotto, otherFood);

이렇게 하면 pizza, risotto 후에 otherFood의 원소들이 배열 형태로 들어가게 된다. 아래가 결과 값이다.

Pizza Risotto Array(4)0: 
"Focaccia"1: "Bruschetta"2: 
"Garlic Bread"3: "Caprese Salad"length: 4[[Prototype]]: Array(0)

Pizza Risotto 후에 4개의 원소가 들어있는 배열이 나오는것을 볼 수 있다.

참고로 위에 나온것처럼 rest를 가장 마지막에 써줘야 한다. (여기서는 otherFood) rest는 나머지 원소들을 배열에 넣어주는건데 마지막에 안쓰면 오류가 생긴다.

rest pattern in object

다음으로 rest pattern은 object에서도 사용할 수 있다. 아래의 코드를 보자.

openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },

여기서 sat빼주고 thu와 fri만 object에 넣어주고 싶을 때 object는 {}을 쓰면 되는데 빼주고 싶은 sat를 적어주고 ...한뒤에 새로운 array 생성되도록 ...weekdays를 적어준다. openingHours는 restaurant 객체 안에 있으므로 restaurant.openingHours라고 써준 것이다.

const {sat,...weekdays} = restaurant.openingHours;
console.log(weekdays)
//fri: {open: 11, close: 23}thu: {open: 12, close: 22}

rest parameters in function

다음으로 function에서 Rest parameters에 대해 알아보자

const add = function(...numbers) {
console.log(numbers);
}
add(2,3)
add(5,3,7,2)
add(8,2,5,3,2,1,4)

이렇게 ... numbers를 넣어주면 arguments의 갯수에 상관없이 유동적으로 ...numbers에 들어가게 된다.따라서 위의 코드는 아래와 같은 배열을 출력한다.

(2) [2, 3]
(4) [5, 3, 7, 2]
(7) [8, 2, 5, 3, 2, 1, 4]

const add = function (...numbers) {
  let sum = 0;
  for(let i = 0; i<numbers.length; i++) sum+= number[i];
  console.log(sum);
};
add(2, 3);
add(5, 3, 7, 2);

const x = [23, 5 , 7];
add(...x);

이 코드에서 23, 5, 7를 argument로 한번에 넣어주려면 ...x로 spread operator를 이용해주면 된다.