정의 및 사용 방법

스프레드 구문(Spread Syntax, 전개 구문)은
이터러블 객체(배열, 문자열, DOM 컬렉션 등)의 항목들을 간단하게 개별적으로 펼쳐서 나열하는(spread) 자바스크립트 문법입니다.

스프레드 구문(Spread Syntax)은 '전개 구문' 또는 '스프레드 연산자'라고도 불립니다.

스프레드 구문(Spread Syntax)을 사용하면 배열이나 객체의 항목을 간편하게 복사하거나 합칠 수 있습니다.
복잡한 코드를 더 짧고 간단하게 작성할 수 있어서 편리합니다.

구문의 형식

스프레드 구문은 매우 간단합니다.
...(점 세 개) 뒤에 해당하는 이터러블 객체(배열, 문자열, DOM 컬렉션 등)를 붙이는 형태입니다.

기본 구문 예제를 통해 살펴보겠습니다.

JavaScript 
/* 배열 */
const arr = [1, 2, 3];
console.log(...arr); // 출력: 1 2 3

/* 문자열 */
const str = "Hello World";
console.log(...str); // 출력: "H e l l o   W o r l d"

/* DOM 컬렉션 */
const items = document.querySelectorAll(".item"); // NodeList 반환
const itemsArray = [...items]; // 스프레드 구문을 사용하여 배열로 변환

// 이제 배열 메서드를 사용할 수 있음
itemsArray.forEach(item => {
    console.log(item.textContent);
});

기본 예제

다음 예제는 스프레드 구문을 사용하여 두 개의 배열을 간편하게 병합하는 방법을 보여줍니다. 예제와 같이 스프레드 구문을 사용하면 배열이나 객체를 간단하게 복사하거나 합칠 수 있어, 복잡한 코드를 짧고 간단하게 작성할 수 있습니다.

JavaScript 
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArr = [...arr1, ...arr2];  // 배열 병합

console.log(mergedArr);  // [1, 2, 3, 4]

스프레스 구문을 사용할 수 있는 대상

스프레드 구문은 이터러블(iterable) 객체에만 사용할 수 있습니다.
자바스트립트는 순회 가능한 객체에 대해 통일된 규칙을 만들었습니다. 이 규칙을 이터러블 프로토콜(Iterable Protocol)이라고 하는데, 이터러블 객체는 이터러블 프로토콜을 준수라는 객체를 의미합니다.

이터러블 객체, 즉 스프레스 구문을 사용할 수 있는 대상은 다음과 같습니다.

  • 배열: 배열의 각 요소
  • 문자열: 문자열의 각 문자
  • DOM 컬렉션 객체(NodeList, HTMLCollection): 각 요소 객체
  • Map 객체: 각 키-값 쌍
  • Set 객체: 각 값
  • Function arguments 객체: 각 인자

객체 리터럴에서의 스프레스 구문 사용

객체 리터럴(Object Literal)은 이터러블 객체가 아닙니다.
스프레드 구문을 직접적으로 사용할 수 있는 대상이 아니라는 의미입니다.
하지만, ECMAScript 2018 (ES9)부터는 객체 리터럴 안에서 스프레드 구문은 다른 객체 리터럴의 속성을 펼쳐서 병합하거나 복사하는 데 사용할 수 있습니다.

활용 예제

예제들을 통해서 이터러블 객체에 스프레드 구문을 사용하는 활용 방법에 대해 살펴보겠습다.

배열의 확장

스프레드 구문을 사용하면 배열의 요소을 병합하거나 확장하기에 매우 편리합니다. 기존 배열의 요소를 새 배열에 복사하고, 새 요소를 추가하거나 다른 배열을 병합할 수 있습니다.

JavaScript 
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 두 배열을 병합
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // 출력: [1, 2, 3, 4, 5, 6]

// 새 요소를 추가하면서 배열을 확장
const extendedArray = [...arr1, 4, 5];
console.log(extendedArray); // 출력: [1, 2, 3, 4, 5]

함수 호출 시 인수 전달

함수를 호출할 때 스프레드 구문을 사용해서 배열 또는 인수 목록을 전달할 수 있습니다. 이렇게 하면 함수가 가변 인수를 허용하는 경우에도 배열로부터 개별 인수로 전달할 수 있습니다.

JavaScript 
function sum(a, b, c) {
    return (a + b + c);
}
  
const numbers = [1, 2, 3];
  
const result = sum(...numbers); // sum(1, 2, 3)과 동일한 결과를 반환
console.log(result); // 출력: 6

NodeList로 DOM 다루기

스프레드 구문을 사용하면 초보자가 NodeList와 같은 DOM 객체를 더 쉽게 다룰 수 있습니다. NodeList는 DOM 요소들의 컬렉션으로, 배열과 유사한 구조를 가지고 있지만 배열 메서드를 직접 사용할 수 없는 등 몇 가지 특별한 동작이 있기 때문에 초보자에게는 조금 어려울 수 있습니다.

스프레드 구문을 사용하면 NodeList를 배열로 변환하거나 다른 배열과 병합하는 것이 간단해집니다.

JavaScript 
// HTML 문서에 있는 .item 클래스를 가진 모든 요소를 선택
const items = document.querySelectorAll(".item");  // NodeList 반환

// 스프레드 구문을 사용해 NodeList를 배열로 변환
const itemsArray = [...items];  

// 이제 itemsArray는 배열로 변환되었기 때문에 배열 메서드를 사용할 수 있습니다.
itemsArray.forEach(item => {
    console.log(item.textContent);  // 각 .item 요소의 텍스트 내용을 출력
});

// 다른 배열과 병합하기
const newItems = ["New Item 1", "New Item 2"];
const allItems = [...itemsArray, ...newItems];  // 기존 NodeList와 새 배열 병합

console.log(allItems);  // NodeList + 새로운 배열

주의할 점

스프레드 구문을 사용할 때에는 다음의 몇 가지 주의할 점이 있습니다.

스프레스 구문 자체를 변수에 할당 금지

스프레스 구문은 피연산자를 연산하는 연산자(operator)가 아닙니다.

스프레드 구문을 흔히 '스프레드 연산자'라고도 부르는데, 이는 엄밀히 말해서 잘못된 표현입니다. 연산자는 피연산자를 연산하여 값으로 표현할 수 있어야 합니다. 따라서, 스프레스 구문을 스프레드 연산자라 말할 수 없고 맥락에서 사용 가능한 문법입니다.

JavaScript - 에러 
const items = ...[1, 2, 3, 4]; // Uncaught SyntaxError

객체 리터럴에서의 스프레스 구문 사용

스프레스 구문을 사용할 수 있는 대상에서 설명한 바와 같이 객체 리터럴은 이터러블 객체가 아닙니다. 스프레드 구문을 직접적으로 사용할 수 있는 대상이 아니라는 의미입니다.

하지만, ECMAScript 2018 (ES9)부터는 객체 리터럴 안에서 스프레드 구문은 다른 객체 리터럴의 속성을 펼쳐서 병합하거나 복사하는 데 사용할 수 있습니다.

스프레스 구문을 직접 사용할 수 있는 대상 아님

다음은 객체 리터럴이 스프레스 구문을 직접 사용할 수 있는 대상 아님을 알 수 있는 대표적인 예제입니다.

JavaScript - 에러 
const obj = {
    a: 1,
    b: 2,
    c: 3
}

console.log(...obj); // Uncaught TypeError
객체 리터럴 안에서 다른 객체 리터럴의 속성을 복사하거나 병합

ECMAScript 2018 (ES9)부터는 객체 리터럴 안에서 스프레드 구문은 다른 객체 리터럴의 속성을 펼쳐서 병합하거나 복사하는 데 사용할 수 있습니다.

JavaScript 
const obj1 = {
    x: 1,
    y: 2
}

const obj2 = {
    z: 3
};

// 객체 병합
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj);  // { x: 1, y: 2, z: 3 }

브라우저 호환성

스프레드 구문의 브라우저 호환성
구문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Spread syntax (...) 46 12 16 8
객체 리터럴 안에서 다른 객체 리터럴의 속성을 복사하거나 병합 60 79 55 11.1

참고문헌

같이 보기