JavaScript - ECMAScript 2021: A Beginner's Guide

Hello there, future coding superstar! I'm thrilled to be your guide on this exciting journey into the world of ECMAScript 2021. As a computer science teacher with years of experience, I've seen countless students go from complete beginners to confident programmers. Today, we're going to explore the latest features of JavaScript, and I promise to make it as fun and easy to understand as possible. So, grab your favorite beverage, get comfortable, and let's dive in!

What is ECMAScript 2021?

Before we jump into the new features, let's quickly chat about what ECMAScript is. Think of ECMAScript as the recipe book for JavaScript. Every year, the chefs (a.k.a. the language developers) add new recipes (features) to make our coding lives easier and more delicious. ECMAScript 2021, also known as ES12, is the latest edition of this recipe book.

New Features Added in ECMAScript 2021

ECMAScript 2021 brings us some exciting new tools to play with. It's like getting a shiny new set of LEGO blocks to add to our collection. Let's explore each of these new features one by one.

Numeric Separators (_)

Have you ever tried to read a really long number, like 1000000000? It's a bit of a headache, right? Well, the numeric separator is here to save the day!

// Without numeric separator
const billion = 1000000000;

// With numeric separator
const billionReadable = 1_000_000_000;

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

The underscore (_) in 1_000_000_000 doesn't change the value of the number. It's just there to make it easier for us humans to read. Isn't that neat? It's like adding spaces in a long sentence to make it more readable.

Promise any() Method

Promises in JavaScript are like making a bunch of phone calls at once and waiting for someone to pick up. The Promise.any() method is a new way to handle multiple 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));

// Output: promise2

In this example, Promise.any() resolves as soon as one of the promises in the array is fulfilled. It's like a race where we only care about the first person to cross the finish line, regardless of who comes in second or third.

String replaceAll() Method

Have you ever played a word replacement game? The replaceAll() method is kind of like that, but for strings in JavaScript.

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

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

Before replaceAll(), we had to use regular expressions or loops to replace all occurrences of a substring. Now, it's as easy as calling a single method!

Logical Assignment Operators

ECMAScript 2021 introduces three new logical assignment operators. These are like shorthand ways of writing common patterns in JavaScript. Let's look at each one:

Logical AND Assignment (&&=) Operator

let x = 1;
let y = 2;

x &&= y;

console.log(x); // Output: 2

// This is equivalent to:
// x && (x = y);

The &&= operator assigns the right value only if the left value is truthy. It's like saying, "If x is true, then make it equal to y."

Logical OR Assignment (||=) Operator

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

a ||= b;

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

// This is equivalent to:
// a || (a = b);

The ||= operator assigns the right value only if the left value is falsy. It's perfect for setting default values!

Nullish Coalescing Assignment (??=) Operator

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

foo ??= bar;

console.log(foo); // Output: "baz"

// This is equivalent to:
// foo ?? (foo = bar);

The ??= operator assigns the right value only if the left value is null or undefined. It's similar to ||=, but more specific about what it considers "empty".

Methods Summary

Here's a handy table summarizing the new methods we've learned:

Method	Description	Example
Numeric Separators	Makes large numbers more readable	1_000_000_000
Promise.any()	Resolves when any promise in an array fulfills	Promise.any([promise1, promise2, promise3])
String.replaceAll()	Replaces all occurrences of a substring	"hello hello".replaceAll("hello", "hi")
&&=	Assigns if left side is truthy	x &&= y
||=	Assigns if left side is falsy	x \|\|= y
??=	Assigns if left side is null or undefined	x ??= y

And there you have it, folks! We've journeyed through the exciting new features of ECMAScript 2021. Remember, the best way to learn programming is by doing. So, I encourage you to play around with these new features, experiment, and most importantly, have fun!

As my old programming professor used to say, "Coding is like cooking. You might burn a few dishes at first, but with practice, you'll be creating masterpieces in no time!" So don't be afraid to make mistakes – they're all part of the learning process.

Keep coding, stay curious, and happy learning!

Credits: Image by storyset