[자바스크립트] spread operator

영어 그대로 펼치기 연산자라고 한다. 한번 정확히 알아보자

var birds = ['eagle', 'pigeon']
var mammals = ['rabbit', 'cat']
var animals = birds.concat('whale').concat(mammals)
console.log(animals)

const animals2 = [...birds, 'whale', ...mammals]
console.log(animals2)

concat을 통해 배열을 합치지 필요 없이 ES6 문법인 ...을 통해 처리할 수 있다.

그렇다면 어디에서 활용할 수 있을까?

const values = [20, 10, 30, 50, 40]
console.log(20, 10, 30, 50, 40)
console.log(...values)

console.log(Math.max(20, 10, 30, 50, 40))
console.log(Math.max.apply(null, values))
console.log(Math.max(...values))

다음과 같이 최대값을 구할 때 인자들을 일일이 적어줘야 된다. 때문에 ES6 이전에는 apply를 이용해서 했지만 위에서 봤듯이 ...을 이용해서 배열을 펼칠 수 있다.

const values = [3, 4, 5, 6, 7, 8]
const sum = function (...args) {
  return args.reduce(function (p, c) {
    return p + c
  })
}
console.log(sum(1, 2, ...values, 9, 10))

다른 방법으로는 앞뒤로 다른 값들을 함께 사용할 수도 있다.

 

출처

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax