자바스크립트 - ECMAScript 2020: 초보자 가이드

안녕하세요, 열망하는 프로그래머 여러분! ECMAScript 2020의 fascinлеling 여정을 안내해드리게 되어 기쁩니다. 컴퓨터 과학 교사로서 수년간의 경험을 가지고, 이 개념들을 습득하면서 학생들이 빛나는 것을 수없이 목격했습니다. 그麼, 이제 ES2020이 자바스크립트 언어에 가져다주는 놀라운 기능을 탐구해보아요!

ECMAScript 2020에서 추가된 기능

ECMAScript 2020, 또는 ES2020은 자바스크립트 개발자를 위한 반짝이는 새로운 도구 상자입니다. 우리의 코딩 생활을 더 쉽고 효율적으로 만들어주는 몇 가지 흥미로운 기능을 소개합니다. 이 상자를 함께 열어보고 무엇을 찾을 수 있는지 확인해보아요!

BigInt 원시 데이터 타입

밤하늘의 별을数えて보세요. 수십억 개가 있습니다! 과거에는 자바스크립트가 수의 크기를 제한했지만, 지금은 BigInt가 있어서 하늘의 경계를 넘어갈 수 있습니다(의도된 말퀴리입니다!):

BigInt는 매우 큰 정수를 다루는 데 사용할 수 있습니다. 다음과 같이 사용할 수 있습니다:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// 출력: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// 출력: 1234567890123456789012345678901234567891n

이 예제에서, 우리는 숫자 끝에 'n'을 추가하여 BigInt를 만듭니다. 'n'은 자바스크립트에게 "이것은 BigInt야!"라고 알립니다. BigInt에 대해 작업할 때는 'n'을 숫자에 추가해야 기억하세요.

nullish 연결 연산자 (??)

Presents" 게임을 해보셨나요? 상자를 흔들어서 소리가 나지 않으면 비어 있다고 추측합니다. nullish 연결 연산자는 코드에 대해 이와 유사한 방식으로 작동합니다!

이 연산자는 값이 null이나 undefined인지 확인하고, 그렇다면 기본 값을 제공할 수 있습니다. 다음과 같이 작동합니다:

let username = null;
console.log(username ?? "Guest");
// 출력: "Guest"

username = "Alice";
console.log(username ?? "Guest");
// 출력: "Alice"

첫 번째 경우, username이 null이므로 연산자는 "Guest"를 반환합니다. 두 번째 경우, username에 값이 있으므로 해당 값을 반환합니다. 마치 "상자가 비어 있다면, 테디베어라고 가정해보자!"하는 것과 같습니다.

Promise allSettled() 메서드

교사(저처럼!)로서 학생들이 시험을 모두 마치기를 기다리는 상상해보세요. 일부는 성공적으로 마치고, 다른 일부는 포기할 수 있습니다. Promise.allSettled()는 모든 사람이 자기의 시험지를 내는 것을 기다리는 것과 같습니다.

다음은 예제입니다:

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// 출력:
// "fulfilled"
// "rejected"

이 코드에서, 우리는 두 가지 Promise를 가지고 있습니다. 하나는 성공적으로 해결되고, 다른 하나는 거부됩니다. Promise.allSettled()는 모든 Promise가 완료되기를 기다렸다가 각각의 상태를 제공합니다.

String matchAll() 메서드

"Where's Waldo?" 게임을 해보셨나요? matchAll()은 텍스트에서 패턴의 모든 발생을 찾는 것과 같습니다!

다음은 그것을 작동시키는 예제입니다:

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// 출력: [
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

여기서, 우리는 텍스트에서 "at"의 모든 발생을 찾고 있습니다. matchAll()은 이터레이터를 반환하며, 우리는 확장 연산자(...)를 사용하여 배열로 변환합니다. 각 매치는 문자열에서 발견된 위치에 대한 정보를 제공합니다.

Optional Chaining 연산자 (?.)

마지막으로, Optional Chaining 연산자에 대해 이야기해보겠습니다. 이 연산자는 신중한 탐험가처럼, 각 단계를 신중하게 확인한 후 진행합니다.

다음은 그 작동 방식입니다:

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// 출력: "123 Main St"

console.log(user.phoneNumber?.home);
// 출력: undefined

이 예제에서, 우리는 존재할 수 있는 속성에 접근하려고 합니다. Optional Chaining 연산자는 안전하게 접근할 수 있게 해줍니다. user.address가 존재하면 street에 접근하려고 시도합니다. user.phoneNumber이 존재하지 않으면, 오류를 발생시키지 않고 undefined를 반환합니다.

메서드 표

이제 우리가 배운 새로운 메서드를 요약한 표를 제공합니다:

메서드	설명
BigInt	큰 정수를 다루는 데 사용
?? (Nullish Coalescing)	null이나 undefined인 경우 기본 값을 제공
Promise.allSettled()	모든 Promise가 해결될 때까지 기다림
String.matchAll()	텍스트에서 패턴의 모든 발생을 찾음
?. (Optional Chaining)	안전하게 중첩된 객체 속성에 접근

그렇게 되면, ECMAScript 2020의 흥미로운 새로운 기능을 탐구했습니다. 기억하시오, 가장 좋은 방법은 직접 해보는 것입니다. 코드 편집기를 열고 이 새로운 도구들을 실험해보세요. 행복한 코딩 되세요, 그리고 자바스크립트 여정이 흥분과 발견으로 가득 차기를 바랍니다!

Credits: Image by storyset