▶ JavaScript Versions

JavaScript 2018

JavaScript 2018 (ES9): ECMAScript 2018의 주요 기능

*ECMAScript 2018 (ES9)**은 2018년에 발표된 JavaScript 표준으로, JavaScript의 비동기 처리와 객체 관련 기능들을 더욱 강화했습니다. 비동기 반복문, 객체 스프레드 연산자, 정규 표현식 개선 등 다양한 기능들이 추가되었습니다. 이를 통해 개발자들은 더 간결하고 직관적인 코드를 작성할 수 있게 되었습니다.

이 가이드는 **ES9(ECMAScript 2018)**에서 도입된 주요 기능과 사용 예시를 설명합니다.

1. 비동기 반복문 (`for await...of`)

비동기 반복문은 **async**와 **이터러블(iterable)**을 결합하여 비동기 작업을 순차적으로 처리할 수 있게 해줍니다. 기존의 for...of 반복문은 동기 이터러블만 처리할 수 있었지만, **for await...of**는 프로미스를 반환하는 비동기 이터러블을 처리할 수 있습니다.

1.1. `for await...of` 사용 예시

async function fetchData(urls) {
    for await (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}

const urls = [
    '<https://api.example.com/data1>',
    '<https://api.example.com/data2>',
];

fetchData(urls);

1.2. 주요 특징

*for await...of*는 비동기 이터러블 객체를 순차적으로 처리합니다.
프로미스가 해결될 때까지 기다렸다가 다음 이터러블을 처리합니다.

2. 객체 스프레드 연산자 (`...`)

객체 스프레드 연산자는 객체의 속성을 쉽게 복사하거나 병합할 수 있는 새로운 문법입니다. 기존의 **Object.assign()**을 사용하는 방법보다 더 간결하고 직관적으로 객체를 다룰 수 있습니다.

2.1. 객체 복사

const person = { name: 'Alice', age: 25 };
const personCopy = { ...person };
console.log(personCopy);  // { name: 'Alice', age: 25 }

2.2. 객체 병합

const person = { name: 'Alice', age: 25 };
const job = { jobTitle: 'Engineer' };
const personWithJob = { ...person, ...job };
console.log(personWithJob);  // { name: 'Alice', age: 25, jobTitle: 'Engineer' }

2.3. 기존 속성 덮어쓰기

const person = { name: 'Alice', age: 25 };
const updatedPerson = { ...person, age: 30 };
console.log(updatedPerson);  // { name: 'Alice', age: 30 }

객체 스프레드 연산자를 사용하면 객체 복사와 병합이 더 간편해지고, 기존의 객체 속성을 덮어쓸 수 있습니다.

3. `Promise.prototype.finally()`

*Promise.prototype.finally()*는 프로미스가 해결되거나 거부된 후에 항상 실행되는 후처리 로직을 작성할 수 있게 해줍니다. 이는 성공 여부와 관계없이 클린업 작업을 수행할 때 유용합니다.

3.1. `finally()` 사용 예시

fetch('<https://api.example.com/data>')
    .then(response => response.json())
    .catch(error => console.error('Error:', error))
    .finally(() => {
        console.log('작업 완료');
    });

3.2. 주요 특징

*finally()*는 프로미스가 해결되든 거부되든 마지막에 항상 실행됩니다.
이를 통해 리소스 해제 또는 종료 작업을 확실하게 처리할 수 있습니다.

4. 정규 표현식 개선

ES9에서는 **정규 표현식(RegExp)**에 몇 가지 새로운 기능이 추가되었습니다. 특히 **명명된 그룹 캡처(named capture groups)**와 Lookbehind Assertions가 도입되어, 더 강력한 패턴 매칭이 가능해졌습니다.

4.1. 명명된 그룹 캡처 (Named Capture Groups)

명명된 그룹 캡처를 사용하면 정규 표현식의 일치 결과를 이름으로 참조할 수 있습니다. 이는 숫자 기반 그룹 참조보다 가독성이 훨씬 높아집니다.

const regex = /(?<year>\\\\d{4})-(?<month>\\\\d{2})-(?<day>\\\\d{2})/;
const result = regex.exec('2024-10-10');

console.log(result.groups.year);  // '2024'
console.log(result.groups.month); // '10'
console.log(result.groups.day);   // '10'

4.2. Lookbehind Assertions

Lookbehind Assertions는 특정 패턴 앞에 다른 패턴이 존재하는지를 확인합니다.

const regex = /(?<=\\\\$)\\\\d+/;
const result = regex.exec('$100');
console.log(result[0]);  // '100'

5. 비동기 반복자

비동기 반복자는 이터러블 프로토콜을 비동기 방식으로 처리하는 기능입니다. 기존의 이터러블 객체를 비동기적으로 처리할 수 있으며, **for await...of**와 결합하여 비동기 데이터를 순차적으로 처리할 수 있습니다.

5.1. 비동기 반복자 예시

const asyncIterable = {
    [Symbol.asyncIterator]() {
        let i = 0;
        return {
            next() {
                if (i < 3) {
                    return Promise.resolve({ value: i++, done: false });
                }
                return Promise.resolve({ done: true });
            }
        };
    }
};

(async () => {
    for await (const num of asyncIterable) {
        console.log(num);  // 0, 1, 2
    }
})();

5.2. 주요 특징

비동기 반복자는 이터러블 프로토콜을 비동기 방식으로 처리할 수 있습니다.
프로미스와 비동기 함수를 결합해 데이터를 순차적으로 처리할 수 있습니다.

요약

*ES9(ECMAScript 2018)**은 비동기 처리와 객체 처리에 관련된 기능들을 확장하여, 개발자가 더 직관적이고 간결한 코드를 작성할 수 있도록 도왔습니다.
for await...of: 비동기 이터러블 객체를 순차적으로 처리할 수 있는 반복문.
객체 스프레드 연산자 (...): 객체의 속성을 쉽게 복사하거나 병합할 수 있는 간결한 문법.
Promise.prototype.finally(): 프로미스가 해결되거나 거부된 후에 항상 실행되는 후처리 메서드.
정규 표현식 개선: 명명된 그룹 캡처와 Lookbehind Assertions을 도입해 패턴 매칭을 더 강력하게 만듦.
비동기 반복자: 비동기 데이터를 순차적으로 처리할 수 있는 새로운 이터러블 프로토콜.

이러한 기능을 사용하면 JavaScript의 비동기 처리와 객체 처리에서 더 간단하고 효율적인 코드를 작성할 수 있습니다.

코딩 스쿨 JavaScript