자바스크립트 스프레드(…) 문법 – 전개 구문

스프레스 문법(`...`)

스프레드 문법(spread syntax, 전개 구문)은
점 세 개 (...)를 사용하여 여러 값이 뭉쳐 있는 배열, 객체 또는 함수 인수 목록과 같은 여러 값들의 집합을 펼쳐서(spread) , 즉 전개해서 개별적인 항목으로 만드는 기능을 제공합니다.

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

Array
String
Map
Set
Function의 arguments
DOM 컬렉션 객체(NodeList, HTMLCollection)

위 1~6 리스트처럼 for...of 문으로 순회 가능한 이터러블(iterable) 객체가 대상이 됩니다.
그리고,

순회 가능하지 않은 객체 리터럴에서는 스프레드 문법은 객체의 속성을 열거하고 키-값 쌍을 생성 중인 객체에 추가합니다.

for...of 문 - 이터러블 객체를 순회하는 반복문

스프레드 문법의 구문

기본 구문 예제

JavaScript

// ...[1, 2, 3]은 배열 [1, 2, 3]을  개별적인 항목(1 2 3)으로 분리한다.
console.log(...[1, 2, 3]); // 출력: 1 2 3

// 문자열은 순회 가능한 iterable이다.
console.log(..."Hello World"); // 출력: "H e l l o   W o r l d"

// Map과 Set
console.log(...new Map([["apple", "red"], ["banana', "yellow"]])); // 출력: ['apple', 'red'] ['banana', 'yellow']
console.log(...new Set(["a", "b", "c"])); // 출력: "a b c"

// function의 arguments
function fn(arg1, arg2, arg3) {
    console.log(...arguments);
};

fn("arg_1", "arg_2", "arg_3"); // 출력: "arg_1 arg_2 arg_3"

기본 구문 예제: `HTMLCollection`

자바스크립트 HTMLCollection 이해하기

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>
        
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="test.js"></script>
    </body>
</html>

JavaScript

const nodeLi = document.getElementsByTagName("li");
const arr = [...nodeLi];

arr.forEach((li, index) => {
    console.log(`Item ${index + 1}: ${li.textContent}`);
});

/*
    출력:
    "Item 1: 김밥"
    "Item 2: 라면"
    "Item 3: 떡볶이"
*/

기본 구문 예제: 순회 가능(iterable)하지 않은 객체

JavaScript - 에러 순회 가능(itrable)하지 않은 객체는 스프레드 문법의 대상이 아님. 객체 전체를 스프레드하는 에러가 발생함

console.log(...{name: "홍길동", age: 24}); // Uncaught TypeError

위의 예제처럼 순회 가능(iterable)하지 않은 객체 전체를 스프레드 문법으로 전개하는 것은 지원되지 않습니다.

하지만, 아래의 예제처럼 순회 가능(iterable)하지 않은 객체라도 두 객체의 속성을 하나의 새로운 객체로 병합하는 것은 문제가 없습니다. JavaScript 엔진이 내부적으로 각 객체의 속성을 순회하면서 새로운 객체를 생성하게 됩니다. 이 과정에서 각 객체의 속성을 가져와 새로운 객체에 할당합니다.

순회 가능하지 않은 객체 리터럴에서 스프레드 문법은 객체의 속성을 열거하고 키-값 쌍을 생성 중인 객체에 추가합니다.

이러한 과정은 스프레드 문법을 사용하여 객체를 병합할 때 발생하며, 객체의 순회 가능 여부와 상관없이 동작합니다.

기본 구문 예제: 변수에 할당

JavaScript - 에러 스프레스 문법의 결과를 변수에 할당할 수 없음. 스프레드 문법은 값을 수행하는 연산자가 아님.

const items = ...[1, 2, 3, 4]; // Uncaught SyntaxError

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

변수는 단순 문법을 할당할 수 없습니다. 아래의 예제는 단순 문법이 왜 변수에 할당되면 에러를 발생하는지 쉽게 알 수 있게 해줍니다.

변수는 메모리에서 처리할 수 있는 데이터(값, 객체, 함수 등)만을 할당할 수 있습니다.

스프레드 문법의 활용

배열 확장

스프레드 문법을 사용하여 배열을 확장할 수 있습니다. 이를 통해 기존 배열의 요소를 새 배열에 복사하고, 새 요소를 추가하거나 다른 배열을 병합할 수 있습니다.

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

const obj1 = {x: 1, y: 2};
const obj2 = {z: 3};

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

// 새 속성을 추가하면서 객체를 확장
const extendedObject = {...obj1, a: 4};
console.log(extendedObject); // 출력: {x: 1, y: 2, a: 4}

함수 호출 시 인수 전달

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

JavaScript

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

`HTMLCollection`으로 DOM 객체 다루기

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

스프레드 문법을 사용하면 HTMLCollection을 배열로 변환하거나 다른 배열과 병합하는 것이 간단해집니다. 예를 들어, 아래의 코드는 HTMLCollection을 배열로 변환하여 스프레드 문법을 사용하여 다른 배열과 병합하는 방법을 보여줍니다.

JavaScript

// HTMLCollection 가져오기 (예: 모든 <p> 요소)
const paragraphs = document.getElementsByTagName("p");

// HTMLCollection을 배열로 변환하여 스프레드 문법을 사용하여 병합
const paragraphArray = [...paragraphs];
const combinedArray = [1, 2, 3, ...paragraphArray];