스프레드 연산자는 ES6에서 추가된, 배열을 합치고 분해하는 데 편리하게 사용할 수 있는 자바스크립트 문법이다.

1. 스프레드 연산자의 기본 문법 알아보기

const array1 = [1, 2, 3]
const array2 = [4, 5]

이러한 배열이 있을 때, 다음 코드와 같이 스프레드 연산자 ...라는 문법을 사용해서 두 배열을 합칠 수 있다.

const array1 = [1, 2, 3]
const array2 = [...array1, 4, 5]

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

array2 안에 ...를 사용해서 array1라는 배열을 마치 원소처럼 넣어주기만 하면 서로 다른 두 배열을 합칠 수 있다. 콘솔에 단순히 찍기만 하면 재미 없으니 여기서 조금만 더 나아가보자.

const array1 = [1, 2, 3]
const array2 = [...array, 4, 5]

const array3 = array2.map((item) => item * 2)

console.log(array3) // [2, 4, 6, 8, 10]

map() 메서드를 이용해 array2 배열의 원소에 각각 2를 곱한 array3을 만들어보았다.
그럼 현실에서 이 스프레드 연산자를 어떻게 활용할 수 있는지 영화 예매창 화면에서 볼 수 있는 기능들을 통해 조금 더 심화해서 살펴보자.

2. 스프레드 연산자 활용하기

//빈 자리, 선택한 자리 수, 총 가격을 의미하는 엘리먼트 선택하기
const seats = document.querySelectorAll('.row .seat:not(.occupied)')
const count = document.getElementById('count')
const total = document.getElementById('total')

//빈 자리를 선택한 경우, 선택한 자리와 영화의 가격에 따라 합계를 업데이트해주는 함수
function updateSelectedCount() {
  const selectedSeats = document.querySelectorAll('.row .seat.selected')
  const selectedSeatsCount = selectedSeats.length 

  const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat))
  localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex))

  count.innerText = selectedSeatsCount
  total.innerText = selectedSeatsCount * ticketPrice
}

1. 고객이 선택한 자리를 의미하는 selectedSeats와, 그 자리에 대한 인덱스 값을 나타내는 seatsIndex만 유의해서 보면 된다.
2. 자리 선택 시 동적으로 토글되는 selected라는 클래스를 모두 선택한 selectedSeats를, seatsIndex라는 새로운 배열에 ...라는 스프레드 연산자를 활용하여 추가해 주었다. 위에서 스프레드 연산자는 배열 안에 원소처럼 넣을 수 있다고 했는데, 단독으로 넣어줘도 상관 없다.
3. map() 메서드를 이용해 [...selectedSeats]로 표현된 선택한 자리 배열의 각 원소에 대한 index를 배열로 리턴해준다.
4. 이렇게 해서 고객이 선택한 자리를 인덱스로 나타낼 수 있고, 나중에 해당 정보까지 localStorage에 함께 저장할 수 있다.