Javascript ES6+ spread operator (펼치기 연산자)

 

 

 

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)

//결과:
//["eagle", "pigeon", "whale", "rabbit", "cat"]
//["eagle", "pigeon", "whale", "rabbit", "cat"]

 

• 위와 같이 .concat이라는 메소드를 쓰지 않고도 더 효율적으로 배열을 만들어 낼 수 있다는 것을 볼 수 있다.
• 배열안에 ...(변수)만 해주면 ...으로 선언한 변수의 배열들의 값이 쭉 들어온다.

 

 

 

 

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))

//결과:
//55

 

• 위와 같이 앞뒤로 다른 값들을 함께 ...(변수)을 사용할 수도 있다.

 

 

 

 

 

 

 

 

const str = 'Hello!'
const splitArr = str.split('')
const restArr = [...str]
console.log(splitArr, restArr)

//결과:
//["H", "e", "l", "l", "o", "!"] ["H", "e", "l", "l", "o", "!"]

 

• 위와 같이 iterable한 모든 데이터는 펼칠 수 있다.

 

 

 

 

 

let originalArr = [2, 3]
const preArr    = [-2, -1]
const sufArr    = [6, 7]

originalArr.unshift(1)
originalArr.push(4)
originalArr = [0, ...originalArr, 5]
console.log(originalArr)

const concatArr = preArr.concat(originalArr, sufArr)
const restArr = [...preArr, ...originalArr, ...sufArr]
console.log(concatArr, restArr)

//결과:
//[0, 1, 2, 3, 4, 5]
//[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7] [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7]

 

• 위와 같이 메소드 push, unshift, concat 등의 기능을 대체할 수 있다.

 

 

 

 

 

 

새로운 배열을 만드는 거다.

 

let originalArray = [1, 2]
let copiedArray = [...originalArray]
console.log(originalArray === copiedArray)

originalArray.push(3)
console.log(originalArray)
console.log(copiedArray)

//결과:
//false
//[1, 2, 3]
//[1, 2]

 

• 위의 코드 결과를 보면 ...(변수)로 만든 배열과 원래의 배열과 같지 않다는 결과를 보여준다. 즉 새로운 배열을 만드는 것으로 간주해야한다.

 

 

 

 

얕은복사만을 수행한다.

 

let originalArray = [{
  first: 'Hello,',
  second: 'World!'
}, {
  first: 'Welcome',
  second: 'ES6!'
}]
let copiedArray = [...originalArray]
console.log(originalArray[0].first)

copiedArray[0].first = "Hi,"
console.log(originalArray[0].first)

originalArray[0]


//결과:
//Hello,
//Hi,
//{first: "Hi,", second: "World!"}

 

• 위의 결과를 보면 얇은 복사 즉 참조가 바뀌지 않은 것을 확인 할수 있다.
• 복사하기 전 원래의 배열의 변수인 originalArray의 0번의 객체의 프로퍼티 first 값 또한 바뀐 것을 볼 수 있다. 즉 위의 코드들은 똑같은 참조를 하고 있는 것이 원인이다.
• 깊은 복사를 확실히 해줄려면 위의 코드처럼 펼치기가 아닌 객체마다의 프로퍼티들을 각각 따로 복사를 해줘야한다.