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

안녕하세요, 미래의 코딩 슈퍼스타! ECMAScript 2021의 세계로의 흥미로운 여정을 안내해드리게 되어 기쁩니다. 컴퓨터 과학 교사로서 수년간의 경험을 가진 저는 수많은 학생들이 전혀 모르는 상태에서 자신감 넘치는 프로그래머로 성장하는 모습을 목격했습니다. 오늘 우리는 자바스크립트의 최신 기능을 탐구할 것입니다. 가능한 한 재미있고 쉽게 이해할 수 있도록 하겠습니다. 좋아하는 음료를 한 잔 챙기고 편안하게 앉아, 시작해봅시다!

ECMAScript 2021이란?

새로운 기능에 뛰어들기 전에 잠시 ECMAScript에 대해 이야기해보겠습니다. ECMAScript는 자바스크립트의 레시피 책을 생각해보세요. 매년, 셰프(즉, 언어 개발자)들이 우리의 코딩 생활을 더 쉽고 맛있게 만들기 위해 새로운 레시피(기능)를 추가합니다. ECMAScript 2021, 또는 ES12는 이 레시피 책의 최신 版입니다.

ECMAScript 2021에 추가된 새로운 기능

ECMAScript 2021은 우리에게 흥미로운 새로운 도구를 제공합니다. 새로운 LEGO 블록 세트를 추가하는 것처럼 느껴집니다. 이제 이 새로운 기능들을 하나씩 탐구해보겠습니다.

수학 분리자 (_)

아주 긴 숫자를 읽어보았나요? 예를 들어, 1000000000과 같은 숫자는 머리 아파요, 아닙니까? 수학 분리자가 이 문제를 해결해줍니다!

// 수학 분리자 없음
const billion = 1000000000;

// 수학 분리자 사용
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // 출력: true

1_000_000_000의 밑줄은 숫자의 값을 변하지 않습니다. 그저 우리 인간들이 더 쉽게 읽을 수 있도록 하는 것입니다. 멋지지 않나요? 문장에 공백을 추가하여 더 읽기 쉽게 만드는 것과 같은 이치입니다.

Promise any() 메서드

자바스크립트의 Promises는 한 번에 여러 통화를 걸고 누군가가 받아들이기를 기다리는 것과 같습니다. Promise.any() 메서드는 여러 Promises를 처리하는 새로운 방법입니다.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// 출력: promise2

이 예제에서, Promise.any()는 배열에 있는 Promises 중 하나가 이루어지면 바로 해결됩니다. 마치 누군가가 결승선을 먼저 통과하는 데 관심이 있고, 2위나 3위는 상관하지 않는 경주와 같습니다.

String replaceAll() 메서드

단어 대체 게임을 해보았나요? replaceAll() 메서드는 자바스크립트의 문자열에 대해 그런 방식으로 작동합니다.

const sentence = "I love cats. Cats are great pets.";
const newSentence = sentence.replaceAll("cats", "dogs");

console.log(newSentence); // 출력: "I love dogs. Dogs are great pets."

replaceAll() 이전에는 정규 표현식이나 루프를 사용하여 모든 발생을 대체해야 했습니다. 이제는 단일 메서드 호출이면 충분합니다!

논리 대입 연산자

ECMAScript 2021은 세 가지 새로운 논리 대입 연산자를 도입합니다. 이들은 자바스크립트에서 일반적인 패턴을 짧게 쓰는 방법입니다. 하나씩 살펴보겠습니다:

논리 AND 대입 (&&=) 연산자

let x = 1;
let y = 2;

x &&= y;

console.log(x); // 출력: 2

// 이는 다음과 동일합니다:
// x && (x = y);

&&= 연산자는 왼쪽 값이 참이면 오른쪽 값을 대입합니다. "x가 참이면 y로 만들어라"와 같은 의미입니다.

논리 OR 대입 (||=) 연산자

let a = null;
let b = 'default value';

a ||= b;

console.log(a); // 출력: "default value"

// 이는 다음과 동일합니다:
// a || (a = b);

||= 연산자는 왼쪽 값이 거짓이면 오른쪽 값을 대입합니다. 기본 값 설정에 완벽합니다!

Nullish 대입 (??=) 연산자

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // 출력: "baz"

// 이는 다음과 동일합니다:
// foo ?? (foo = bar);

??= 연산자는 왼쪽 값이 null이나 undefined이면 오른쪽 값을 대입합니다. ||=과 비슷하지만, "빈" 것을 더 구체적으로 고려합니다.

메서드 요약

여기서 우리가 배운 새로운 메서드의 요약 표입니다:

메서드	설명	예제
수학 분리자	큰 숫자를 더 읽기 쉽게 만들기	1_000_000_000
Promise.any()	배열에 있는 Promises 중 하나가 이루어지면 해결	Promise.any([promise1, promise2, promise3])
String.replaceAll()	모든 발생을 대체	"hello hello".replaceAll("hello", "hi")
&&=	왼쪽이 참이면 대입	x &&= y
||=	왼쪽이 거짓이면 대입	x \|\|= y
??=	왼쪽이 null이나 undefined이면 대입	x ??= y

그렇게 되면, ECMAScript 2021의 흥미로운 새로운 기능을 함께 탐구했습니다. 기억하시기 바랍니다, 프로그래밍을 배우는 가장 좋은 방법은 직접 해보는 것입니다. 이 새로운 기능들을 실험하고, 가장 중요한 것은 즐겁게 만들어보세요!

제가 알고 있는 오래된 프로그래밍 교수님이 말했던 것처럼, "코딩은 요리와 같습니다.처음에는 몇 가지 요리를 타버릴지도 모르지만, 연습을 하면 얼마 지나지 않아 masterpieces를 만들 수 있을 것입니다!" 실수를 두려워 말아요 - 그것들은 배우는 과정의 일부입니다.

계속 코딩하시고, 호기심을 유지하시고, 행복하게 배우세요!

Credits: Image by storyset