[ECMA Script6] 4. 스프레드 연산자

1. 스프레드 연산자

스프레드 연산자는 세 개의 점(...)으로 이루어진 연산자 입니다. 이 스프레드 연산자를 통해 배열의 내용을 조합 할 수 있습니다.

아래예제는 스프레드 연산자를 이용하여 arrNum, arrAlphabet 배열을 조합한 arrMerge 배열을 만드는 예제입니다.

var arrNum = ["1","2","3","4"]
var arrAlphabet = ["A","B","C"]
var arrMerge = [...arrNum, ...arrAlphabet]
 
console.log(arrMerge.join(', ')) // 1, 2, 3, 4, A, B, C

만약에, arrNum배열의 마지막 원소를 변수에 담고싶다고 가정해보면 초기화 할 때 arrNum 배열의 내용을  reverse()함수를 이용하여 뒤집어놓은 후 구조분해를 이용하면 될 것입니다.
그런데 문제는, reverse()함수를 사용하면 원본 베열이 변경된다는 점입니다.

var arrNum = ["1","2","3","4"]
var [last]= arrNum.reverse()
 
console.log(last) //4
console.log(arrNum.join(', ')) // 4, 3, 2, 1

스프레드 연산자를 사용한다면 원본 배열이 변경되지 않고, 복사본을 만들어 배열을 조작 할 수 있습니다.

var arrNum = ["1","2","3","4"]
var [last]= [...arrNum].reverse()
 
console.log(last) //4
console.log(arrNum.join(', ')) // 1, 2, 3, 4

또한, 스프레드 연산자를 사용하여 나머지 배열의 원소를 얻을 수도 있다.

var arrNum = ["1","2","3","4"]
var [first, ...rest] = arrNum
 
console.log(arrNum.join(', ')) // 2, 3, 4

함수의 인자를 배열로 모아 사용 할 수도 있습니다.

function directions(...args){
    var [start, ...remaining] = args
    var [finish, ...stops] = remaining.revers()
 
    console.log(`${args.length}개 도시를 운행합니다.`)
    console.log(`${start}에서 출발합니다.`)
    console.log(`목적지는 ${finish} 입니다.`)
    console.log(`중간에 ${stops.length}군데 도시를 들립니다.`)
}
 
directions(
    "서울",
    "수원",
    "천안",
    "대전",
    "대구",
    "부산"
)
 
//6개 도시를 운행합니다.
//서울 에서 출발합니다.
//목적지는 부산 입니다.
//4개의 도시를 들립니다.