ECMAScript 2018: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 JavaScript 마법사 여러분! ECMAScript 2018의 흥미로운 여정을 함께 안내하게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저는 이 새로운 기능들을 여러분과 공유하게 되어 기대합니다. 코딩에 처음 도전하는 분이라면 걱정하지 마세요 - 단계별로 함께 진행하면 곧 프로처럼 JavaScript를 작성할 수 있을 것입니다!

ECMAScript 2018에 추가된 새로운 기능

ECMAScript 2018, 또는 ES9는 JavaScript 언어에 몇 가지 훌륭한 추가 기능을 가져왔습니다. 코딩 여정에 새로운 도구 상자를 얻은 것 같은 느낌입니다! 이 기능들을 하나씩 탐구해 보겠습니다.

JavaScript 비동기 반복

버페트에서 한 번에 모든 음식을 접시에 쌓는 대신, 각 식사를 먹고 싶을 때마다 마법처럼 소환할 수 있다면 어떨까요? 비동기 반복은 코드에 대해 그와 비슷한 일을 합니다!

for-await-of 루프

이 새로운 루프는 비동기 데이터 소스를 더 쉽게 처리할 수 있도록 합니다. 다음은 예제입니다:

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// 출력:
// 1
// 2
// 3

이 예제에서 numberGenerator는 프로미스를 생성하는 비동기 생성자 함수입니다. for-await-of 루프는 각 프로미스가 해결될 때까지 기다렸다가 다음 반복으로 이동합니다. 친구가 각 입을 먹고 난 후 다음 식사를 제공하는 것과 같은 느낌입니다!

RegExp() 객체의 새로운 기능

RegExp, 또는 정규 표현식은 텍스트 처리의 스위스 아ーノ이 청이 됩니다. ECMAScript 2018은 이 도구에 몇 가지 새로운 기능을 추가했습니다.

유니코드 속성 이스케이프

이 기능은 유니코드 속성을 기반으로 문자를 일치시킬 수 있게 합니다. 국제 텍스트를 처리할 때 매우 유용합니다!

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

여기서 \p{Script=Greek}은 그리스 스크립트에 속한 모든 문자를 일치시킵니다. u 플래그는 유니코드 모드를 활성화합니다.

룩백 어서션

이제 우리는 일치하는 부분 뒤에 무엇이 왔는지 확인할 수 있습니다. 코딩 세계에서 목을 돌리는 것과 같은 느낌입니다!

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

이 예제에서 (?<=\$)은 일치하는 부분이 dollor 기호 뒤에 왔는지 확인하는 긍정적인 룩백 어서션입니다. dollor 기호는 일치 결과에 포함되지 않습니다.

이름을 가진 캡처 그룹

이제 우리는 캡처 그룹에 이름을 지을 수 있어 정규 표현식을 더 읽기 쉽고 유지보수하기 쉽게 만들 수 있습니다.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

이는 도구 상자의 각 부분에 이름을 지어 모든 것이 더 쉽게 찾을 수 있게 하는 것과 같습니다!

JavaScript Promise finally()

JavaScript의 프로미스는 친구와 계획을 세우는 것과 같습니다. 때로는 성공하고, 때로는 실패하지만, 어느 쪽이든 그 후에 무언가를 하고 싶을 수 있습니다. 그때 finally()가 나타납니다!

function fetchData() {
return new Promise((resolve, reject) => {
// API 호출 시뮬레이션
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation completed"));

이 예제에서, 프로미스가 해결되든 거부되든, finally 블록은 항상 실행됩니다. 성공하든 실패하든, 청소하고 집으로 돌아가자는 것과 같은 느낌입니다.

JavaScript REST 객체 속성

REST 연산자 (...)는 객체 리터럴에서는 남은 모든 것을 담을 수 있는 마법의 가방과 같습니다. 일부 속성을 나머지 것과 분리하고 싶을 때 매우 유용합니다.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

이 예제에서 우리는 name과 age를 꺼내고 나머지 모든 것을 rest에 담습니다. 옷을 정리할 때 양말을 하나의 쌍으로 정리하고 나머지 것을 다른 쌍으로 정리하는 것과 같은 느낌입니다!

결론

이제 여러분은 ECMAScript 2018의 흥미로운 새로운 기능을 경험했습니다. 기억해 두세요, 배우는 가장 좋은 방법은 직접 해보는 것입니다. 이 새로운 도구들을 실험해 보지 마세요. 코딩은 요리와 같습니다 - 많이 연습할수록 더 잘 됩니다!

여기 우리가 다루었던 메서드의 빠른 참조 표입니다:

기능	설명
for-await-of	프로미스를 반복문으로 비동기적으로 처리
유니코드 속성 이스케이프	정규 표현식에서 유니코드 속성을 기반으로 문자 일치
룩백 어서션	정규 표현식에서 일치하는 부분 앞에 무엇이 왔는지 확인
이름을 가진 캡처 그룹	정규 표현식에서 캡처 그룹에 이름을 지어 읽기 쉽고 유지보수하기 쉽게 만들기
Promise.prototype.finally()	프로미스가 해결되든 거부되든, 항상 실행되는 콜백 지정
REST 객체 속성	객체 리터럴에서 나머지 속성을 새로운 객체로 담기

기쁜 코딩을 기원하며, JavaScript의 여정이 항상 흥미롭기를 바랍니다!

Credits: Image by storyset