[REAL Deep Dive into JS] 35. 스프레드 문법

young_pallete·2022년 10월 11일

REAL JavaScript Deep Dive

목록 보기

36/46

🚦 본론

스프레드 문법이란

스프레드 문법은 ES6에 도입되었네요. (정말 ES6 때 추가된 게 많죠?!)
스프레드 문법은 정말 몇 가지 중요한 특징만 알면 매우 유용하고, 그렇게 어렵지 않은 친구에요.

이터러블한 친구들에게서 사용이 가능하구요!
객체 리터럴 내부에서도 예외적으로 사용이 가능합니다. (Object)는 절대 이터러블이 아닙니다! 혼동 금지!)
스프레드 문법을 사용한 결과는 값이 아닙니다. 그저, Symbol.iterator을 통해 순회된 값들의 목록입니다.
Rest와 혼동하지 말아야 합니다. Rest는 parameter들을 하나의 배열로 만들기 위한 것이며, Spread는 배열을 분해하여 일련의 값 목록으로 변환하는 작업입니다.

스프레드 문법의 이전

우리, 레거시를 이해할 필요도 있으니 이를 탐구해보는 것도 적절한 것 같아요.
당시에는 Function.prototype.apply를 통해서 배열을 인자로 전달했었습니다.

💡 아! 미리 말씀드리지만, 이러한 방식이 절대 나쁘다는 것이 아닙니다.
다만, 우리가 나중에 예전 코드를 봤을 때 "굳이..."라고 떠올릴 수 있기 때문에, 예전 코드들을 이해하자는 취지에서 서술합니다 😉

const values = [1,2,3,4,5]
console.log(Math.max.apply(null, arr)); // 5

// spread operator
console.log(Math.max(...arr)) // 5

또한, 이전에는 다음과 같이 배열을 전달해야만 했어요.

console.log([1,2,3].concat([4,5])) // [1,2,3,4,5]

// spread operator
console.log([1,2,3, ...[4,5]]) // [1,2,3,4,5]

배열 복사 역시 얇은 복사 차원에서 매우 간단합니다.

console.log([1,2,3,4,5].slice()) // [1,2,3,4,5]

// spread operator
console.log([...[1,2,3,4,5]) // [1,2,3,4,5]

이터러블의 경우에는 다음과 같이 배열로 변환했었는데요.
스프레드를 사용하니 매우 간편해졌군요!

function sum() {
   const args = Array.prototype.slice.call(arguments);
  
   return args.reduce(function (pre, cur) => pre + cur, 0)
}

// spread operator

function sum() {
   return [...arguments].reduce(function (pre, cur) => pre + cur, 0)
}

// Rest parameter

function sum(...args) {
   return args.reduce(function (pre, cur) => pre + cur, 0)
}

객체 리터럴에서의 사용

ES2021부터 통과된 표준인데요!
객체 리터럴에서는 객체가 이터러블이 아니지만 예외적으로 사용할 수 있게 되었습니다!

이전에는 Object.assign을 통해서 여러 객체를 병합하거나, 얇은 복사를 수행했어요.
하지만 스프레드 문법으로 이제 충분히 대체가 가능하다는 점, 참고해주세요!

const initialState = { a: 1, b: 2 }

const state = Object.assign(initialState, { c: 3 });

console.log(state)

// spread operator

const initialState = { a: 1, b: 2 }

const state = { ...initialState, { c: 3 }};

console.log(state)