Learn These New Features Introduced in JavaScript ES2021

This post covers the features introduced in ES2021 and also the history of JavaScript and ECMAScript.

This post covers the features introduced in ES2021 and also the history of JavaScript and ECMAScript.

Before we jump right into discussing the new ES12 features, let’s take time to shed some light on one of the problems new JavaScript developers have, which is the difference between JavaScript and ECMAScript.

A Little History on JavaScript and ECMAScript

It’s important to note that JavaScript came before ECMAscript. Also, JavaScript was originally named Mocha, a name chosen by Netscape founder Marc Andreessen. It was renamed four months later to LiveScript, then ultimately became JavaScript.

Brendan Eich, the creator of JavaScript, was asked to develop a language that resembled Java (Java was a very popular language then and still is) for the web. Eich, however, decided that Java was too complicated with all its rules and so set out to create a simpler language that was beginner-friendly.

After JavaScript/Mocha was complete, the marketing team of Netscape requested Sun Microsystems to allow them to name it JavaScript as a marketing stunt and hence why most people who have never used JavaScript think it’s related to Java. About a year and half after JavaScript’s release, Microsoft’s IE team took the language and started making its own implementations known as JScript. As at that time, IE was dominating the market, and not long after Netscape had to shut down its project.

Finally, before Netscape went down, they decided to start a standard that would guide the path of JavaScript, named ECMAScript. So ECMAScript can be seen as a language, whereas JavaScript, JScript and others are called “dialects.” According to Wikipedia:
“ECMAScript is a general-purpose programming language, standardized by Ecma International according to the document ECMA-262. It is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers.”

Now, back to the main purpose of this post, which is to introduce the new ES2021 features that are currently in the final stage (approval) of the four proposal stages.

Numeric Separator

This feature literally improves developer experience by enabling developers to make their numeric literals more readable by creating a visual separation between groups of digits. It’s similar to the way we use commas to separate numbers in writing. For example:

    const balance = 7_500_054_112

Using the underscore, deciphering the above number becomes a no-brainer, in contrast to not using the underscore as shown below.

    const balance = 7500054112

Promise.any vs. Promise.race

ES2020 introduced the promise.allSettled method used to run multiple promises in parallel and act when all of them were settled, either as fulfilled or as rejected. The new promise.any takes an array of promises and resolves to the value of the first promise to successfully fulfill. So basically if any promise in the array fulfills, promise.any resolves, and it rejects if all promises in the array reject.

There is a similarity between the promise.any and the promise.race, the only difference being that promise.race settles when any of the promises is settled—it doesn’t matter if it’s being rejected or fulfilled. So promise.any is applicable in cases whereby you try multiple requests and you need at least one fulfilling its promise.

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

WeakRef

According to the WeakRefs TC39, the WeakRef proposal encompasses two major new pieces of functionality:

  1. creating weak references to objects with the WeakRef class
  2. running user-defined finalizers after objects are garbage-collected, with the FinalizationRegistry class

These interfaces can be used independently or together, depending on the use case. To understand what WeakRef does, you need to first understand the concepts of object referencing and garbage collection in JavaScript.

Object Referencing

For example, when you assign an object to a variable, the V8 engine running on a browser (if you use a Chromium browser) allocates a memory address that stores the object. Now, the variable you assigned the object to stores the memory address of the object and not the value of the object itself—i.e., the variable holds a reference to the object assigned to it.

Garbage Collection

This is the process in which programs try to free up memory space that is no longer used by objects. Garbage collection is implemented differently for every language. Most high-level programming languages have some sort of garbage collection built in.

WeakRef creates a weak reference to the object passed to it. This means that whenever the browser needs to run garbage collection if the only reference to that object is from a WeakRef variable, the JavaScript engine can safely remove the object from memory and free up space. This could be ideal for WebSocket data because of their short lifespans.

    const weakRef = new WeakRef({
       age: 44;
    });
    console.log(weakRef.deref().age)
    
    //output: 44

String.replaceAll

This is a method that addresses a specific lack in String.prototype.replace. With the String.replaceAll you can easily replace all occurrences of a given string. For example:

    const name = "nikola edison edison";
    const nawName = name.replaceAll("edison", "tesla");
    console.log(str1)
    
    //output: nikola tesla tesla

Logical Assignment Operators

You might be familiar with logical operations like ??, &&, or || and the assignment operator =. The Logical Assignment Operator introduced in ES2021 combines logical operations like ??, && or || with an assignment operator =. Let’s see an example:

    //Using a Logical Assignment Operator
    var a = true
    var b = false
    
    // Old
    if (!a) {
      a = b
    }
    // New
    a ||= b // returns a
    
    // Old
    if (a) {
      a = b
    }
    // New
    a &&= b // returns b

Summary

At this point, you may have noticed that most of the features added in ES12 are features that make your everyday development experience easier and more fun. I hope you were able to learn something new.


Print Share Comment Cite Upload Translate
APA
Chinedu Imoh | Sciencx (2024-03-28T08:47:25+00:00) » Learn These New Features Introduced in JavaScript ES2021. Retrieved from https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/.
MLA
" » Learn These New Features Introduced in JavaScript ES2021." Chinedu Imoh | Sciencx - Thursday June 17, 2021, https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/
HARVARD
Chinedu Imoh | Sciencx Thursday June 17, 2021 » Learn These New Features Introduced in JavaScript ES2021., viewed 2024-03-28T08:47:25+00:00,<https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/>
VANCOUVER
Chinedu Imoh | Sciencx - » Learn These New Features Introduced in JavaScript ES2021. [Internet]. [Accessed 2024-03-28T08:47:25+00:00]. Available from: https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/
CHICAGO
" » Learn These New Features Introduced in JavaScript ES2021." Chinedu Imoh | Sciencx - Accessed 2024-03-28T08:47:25+00:00. https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/
IEEE
" » Learn These New Features Introduced in JavaScript ES2021." Chinedu Imoh | Sciencx [Online]. Available: https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/. [Accessed: 2024-03-28T08:47:25+00:00]
rf:citation
» Learn These New Features Introduced in JavaScript ES2021 | Chinedu Imoh | Sciencx | https://www.scien.cx/2021/06/17/learn-these-new-features-introduced-in-javascript-es2021/ | 2024-03-28T08:47:25+00:00
https://github.com/addpipe/simple-recorderjs-demo