javascript - spread operator 사용법

사용방법

// spread operator
const arr = [7,8,9];
const newArr = [1,2,3, ...arr];
console.log(newArr)

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

const newMenu = [...restaurant.mainMenu, 'Kimchi'];
console.log(newMenu)

 

배열은 iterable 하기때문에 spread operator를 사용할 수 있습니다.

 

iterable : member를 하나씩 차례로 반환 가능한 object를 말한다

배열, string, map, set 등은 iterable이라서 spread operator 사용가능하며, object는 iterable하지 않습니다.

 

따라서 아래처럼 string에서도 spread operator가 동작하게됩니다.

const str = 'overaction';
const letters = [...str, ' ', 'rabbit'];

console.log(letters);

 

함수의 파라미터로 넘겨줄 때 사용하기

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'],

  orderPasta: function(a,b,c) {
    console.log(`파스타 재료 3가지 ${a}, ${b}, ${c} 입니다.`);
  }
};

const ingred = ['면', '소스', '물'];
restaurant.orderPasta(...ingred);

 

객체에서의 사용

ES 2018 이후에, spread operator는 객체에서도 작동하게 되었습니다.

// 객체
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]];
  },

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

  orderDelivery: function({starterIndex = 1, mainIndex = 0, time, address}) {
    console.log(time,address);
    console.log(this.starterMenu[starterIndex], this.mainMenu[mainIndex])
  },

  orderPasta: function(a,b,c) {
    console.log(`파스타 재료 3가지 ${a}, ${b}, ${c} 입니다.`);
  }
};

// spread operator
const newRestaurant = {foundedIn: 1998, ...restaurant, founder: 'overaction'}

console.log(newRestaurant);