확장 연산자(...) 사용 방법

JavaScript에서 세 개점 연산자()를 사용하는 방법을 배우세요(...)는 확장 연산자라고도 합니다.

확장 연산자(spread operator)

JavaScript의 확장 연산자 (...)는 배열(또는 다른 탐색 가능 객체)을 더 많은 요소로 확장할 수 있습니다.

이는 기존 배열의 전체 또는 일부를 빠르게 다른 배열에 복사할 수 있게 합니다:

예제

JavaScript에서 확장 연산자로 두 개의 배열을 병합합니다

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

직접 시험해 보세요

확장 연산자는 필요한 부분을 배열에서 추출하는 데 자주 사용됩니다:

예제

numbers 배열의 첫 번째와 두 번째 요소를 변수에 할당하고 나머지를 또 다른 배열에 저장합니다:

const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;

직접 시험해 보세요

객체에 확장 연산자를 사용할 수도 있습니다:

예제

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  색상: 'red'
}
const updateMyVehicle = {
  type: 'car',
  year: 2021,
  색상: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

직접 시험해 보세요

불일치하는 속성은 결합되었지만 일치하는 속성 색상 최종 입력된 객체 updateMyVehicle 감사합니다. 최종 색상은 노란색입니다.

관련 페이지

강의:JavaScript ES6