33. Spread Operator (전개 연산자)

안녕하세요. 박기린 입니다.

이번에는 Spread Opeartor(전개 연산자)에 대해 알아보겠습니다.

 

Spread Operator - Array

Spread Opeartor(전개 연산자)는 기본적으로 모든 Array 요소를 한 번에 풀 수 있습니다.

기존의 방식

const arr = [7, 8, 9];
const badNewArr = [1, 2, a[0], a[1], a[2]];
console.log(badNewArr);

기존 Array를 새로운 Array에 담기 위해서는 일일이 'ArrayName[Index]' 구조를 통해서 하나씩 지정을 해줘야 했습니다.

 

 

전개 연산자를 이용

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

...ArrayName

전개 연산자(...)를 이용하면, 일일이 'ArrayName[Index]'로 지정할 필요 없이, 쉽고 정확하게 기존의 Array를 새 Array에 담을 수 있습니다.

 

console.log(...newArr); // 1, 2, 7, 8, 9

이전에 배운 Destructuring도 Array에서 요소들을 가져온다는 공통점이 있습니다.

차이점으로는, Destructuring과는 다르게 Spread Operator는 새로운 변수를 따로 생성하지 않는다는 점이 있습니다.

그래서 console을 찍을 때, 따로 변수에 저장하고 출력을 할 필요가 없습니다.

 

 

 

 

---

전개 연산자를 이용해서 Array 깊은 복사

JS의 Object 타입 변수는 얕은 복사와 깊은 복사의 개념이 있습니다. (이 개념에 대한 설명은 추후에 작성한 후 링크 연동하겠습니다.)

그리고 Array는 Object 타입입니다. (https://arnopark.tistory.com/501 - 맨 아래 섹션 'Array - object에서 파생된 형태' 참고)

그래서 Array도 얕은 복사과 깊은 복사의 개념이 존재합니다.

 

const mainMenu = ['pizza', 'chicken', 'salad']
const mainMenuCopy = [...mainMenu];

Array의 깊은 복사 방식 중 하나로 Spread Operator를 사용할 수 있습니다.

 

 

 

 

---

전개 연산자를 이용해서 두 개 이상의 Array를 하나로 합치기

const starterMenu = [salad, soup];
const mainMenu = [chicken, pizza];
const menu = [...starterMenu, ...mainMenu];

 

 

 

 

 

---

Spread Operator - Iterable

Spread Operator는 배열 뿐만 아니라 Iterable한 모든 value에서 사용가능합니다. 

Iterable : Array, String, Map, Set와 같이, 여러 개의 요소를 가질 수 있으면서 각 요소들을 하나씩 반환할 수 있는 형태를 말합니다. 다만 Object는 제외됩니다.

 

 

const str = 'pgira';
const letters = [...str, ' ', 's.'];
console.log(letters); // ['p', 'g', 'i', 'r', 'a', ' ', 's.']

String도 iterable해서 Spread Operator를 사용할 수 있습니다.

 

 

 

다만, Spread Operator를 아무때나 쓸 수 있는 것은 아닙니다.

console.log(...str); // OK
console.log(`${...str}`) // ERROR

쉼표로 구분된 여러 값을 필요로 하는 경우에만 Spread Operator를 사용할 수 있습니다. (ex: 함수에 인수를 전달할 때, 새 Array를 만들 때)

위 코드의 ${Template Literal}는 String 타입만을 받습니다. String 타입을 쪼갠 형태(ex: 's', 't', 'r')로 받는 것을 원하진 않습니다. 그러다보니 이 안에 Spread Operator를 전달해버리면 Error가 발생합니다.

 

 

 

 

 

 

 

---

Spread Operator를 이용해서 함수에 인수를 전달하기

function orderPasta (ing1, ing2, ing3) {
    console.log(`Here is your delicious pasta with ${ing1}, ${ing2} and ${ing3}.`);
}

const ingredients = [
  mushromms,
  asparagus,
  cheese,
]

orderPasta(ingredients[0], ingredients[1], ingredients[2]);
orderPasta(...ingredients); // 위와 동일한 결과

함수의 인수도 comma(,) sparated 이기 때문에, Spread Operator를 사용할 수 있습니다.

 

 

 

 

 

 

---

ES2018 Spread Operator - Object

ES2018 업데이트 이후로, Object가 비록 iterable하진 않아도 Spread Operator를 사용할 수 있게 되었습니다.

 

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
};

원활한 설명을 위해, 위의 restaurant라는 Object가 선언되었다고 가정하고 시작하겠습니다.

 

 

 

const newRestaurant = { foundedIn: 1998, ...restaurant, founder: 'Guiseppe'};
console.log(newRestaurant);

이를 통해서 기존의 object를 가져온 후, 거기에 새로운 property를 더 추가해서 새로운 object를 만들 수 있습니다.

 

 

 

 

---

전개 연산자를 이용해서 Object 깊은 복사

const restaurantCopy = {...restaurant};
restaurantCopy.name = 'Ristorante Roma';
console.log(restaurantCopy.name); // Ristorante Roma
console.log(restaurant.name); // Classico Italiano

Array와 마찬가지로 Object의 깊은 복사도 가능합니다.