javascript - rest element

Rest 파라미터는 spread 연산자와 반대되는 개념입니다.

= 을 기준으로 오른쪽에서 사용하면 spread, 왼쪽에서 사용하면 rest 라고 할 수 있습니다.

// SPREAD : ( = 의 오른쪽 부분 )
const arr = [1,2,3, ...[4,5]];

// REST : ( = 의 왼쪽 부분 )
const [a,b, ...other] = [1,2,3,4,5];

 

Rest element를 사용해서 분해하기

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  order: function (starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
}

// rest element는 나머지를 전부 가져오기떄문에 항상 마지막에 위치해야한다
const [pizza, , risotto, ...otherFood] = [
  ...restaurant.mainMenu,
  ...restaurant.starterMenu
]

console.log(pizza,risotto, otherFood)

이런식으로 원하는 값을 제외한 나머지를 rest로 지정해서 가져올 수 있습니다.

단, 나머지를 전부 가져오기 때문에 마지막에 작성해줘야 합니다.

 

const restaurant = {
  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0,
      close: 24,
    },
  },
};

// sat를 제외한 나머지를 weekDays로
const {sat, ...weekDays} = restaurant.openingHours;

console.log(weekDays);

객체 또한 동일하게 사용할 수 있습니다.

 

함수의 파라미터로 사용하기

이전 포스팅에서는 spread 연산자를 사용해서 함수의 파라미터로 전달해주었는데,

 

여기서도 동일하지만 반대로 사용할 수 있습니다.

const add = function(...numbers) {
  console.log(numbers);
};

add(8,2,5,3,2,1,4);