Before getting into the main topic, let’s establish what ES / ECMAScript implies in this context. ECMA is the group that is in charge of standardizing JavaScript usage. ECMA stands for The European Computer Manufacturers Association. Its objective is to make standards and technical reports to standardize the use of information communication technology and consumer electronics, encourage the proper application of standards by influencing the environment in which they are used, and publish these standards and reports in both electronic and printed form.

In its simplest form, JavaScript is the best programming language of ECMAScript itself proposed by ECMA. JavaScript not only implements everything that ECMAScript means but builds on it constantly. Every year (mostly), a new edition of ECMAScript appears. Therefore, you may have seen ECMAScript shortened in length to “ES.”

Here are all the ECMAScript releases so far:

• ES1: June 1997 
• ES2: June 1998 
• ES3: December 1999 

The first three releases of ECMAScript happened in rapid succession year after year, unlike the fourth release, which is ES4: Abandoned. Due to political concerns, the fourth release was canceled. Companies like Microsoft were among those that opposed ES4, claiming that the list of capabilities was becoming too much for them to handle as it grew year after year.

• ES5: December 2009 (almost ten years after ES3!) 
• ES6 / ES2015: June 2015 
• ES2016 (ES7): June 2016 
• ES2017 (ES8): June 2017 
• ES2018(ES9): June 2018 
• ES2019(ES10): June 2019 
• ES2020(ES11): June 2020 

The next feature we will discuss here is the latest Feature of ECMAScript, which is ES12. If you want to try this feature, go to this link and read this reference to get started more clearly.

The ES12 was released in June 2021, and while it has many new features, many of you may not be able to look over it yet due to being busy with projects. We will summarize all the new features from Javascript for developers to look at during their free time since many of them may be useful in developing applications. So let’s look at some of the new features that are still ongoing.

• Numeric separators
• String.prototype.replaceAll()
• Logical Assignment Separators (&&=,||=, and ??=)
• Promise.any
• WeakRef

Before talking about these features with examples, you might want to try it yourself with your code editor. You can use any version of Node.JS, but you must install babel. If you are confused about what babel is, you can go to this link to read it more clearly.   

Numeric Separators

Have you ever worked with large numbers before? Have you ever had trouble seeing what the actual number is? The new ES12 has a solution to this problem. When you face large numbers, for example, 12345678, you must pay close attention to see that it’s 12 million. One of the new features that can solve this problem is numeric separators. With the new feature, you can write 12345678, and it will become 12_345_678.

You don’t have to pay close attention again while working with large numbers. Instead, you use underscores to improve the readability. You don’t have to worry about the performance. It is only to help programmers out for readability and does not have to affect the performance of your application.

Previous syntax before ES12 :

const intVar = 12345678;

With numeric separator :

const intVar = 12_345_678;

String.prototype.replaceAll()

The next one is replaceAll(). Let me give an example of a problem to make this feature a solution. First, let’s say you try to solve a code challenge from hackerRank or codeWar. The challenge is to change the characters in string data type, underscore, to complete the word.

Let’s see how the new feature tackles this problem as an example:

Replace all underscore characters “_” with an alphabet:

const question = “hell_ w_rld!!!”;

Let’s apply the new feature now:

question.replaceAll("_", "o");

The characters will now be changed to “hello world!!!” by simply using replaceAll(). Thanks to ES12 for making such a useful feature to make our efforts in string data type problems easier.

Logical Assignment Operators

The next feature is about a logical assignment. The new logical assignment operators are “&&=”, “||=” and “??=”. You can assign a value to the first variable with the value of the second variable, but you must check the first variable based on a logical operation. It should combine the logical operators with the assignment expression.

Before giving you an example of these features, it will be easier to understand a problem and how to use the new feature to solve it. For example, let’s say we have middleware in node-express web applications. Here, the middleware is to authenticate whenever the user tries to call the API, whether it has a token or not. If the user doesn’t have it or uses the wrong one, the user won’t have permission to retrieve data from the API. Here’s an example of the logical assignment feature.

A function to authenticate an attached token from the request before with ES12 features:

function authenticateTheToken (token) { 
// Here is the process to check the token. 
…. 
 
// after token has processed, then give the response to the user. 
const nullMessage = “Authentication error. Token undefined.”; 
const trueMessage = “You have been authenticated. Go on.”; 
const falseMessage = “Authentication error. You bring the wrong token.”; 
If (token == null || undefined) { 
 		return token = nullMessage; 
} else if (token) { 
 		return token = trueMessage; 
} else { 
 		return token = falseMessage; 
}; 
}; 
 
# after applying the new features. 
 
function authenticateTheToken (token) { 
// Here is the process to check the token. 
…. 
// after the token has been processed, give the response to the user. 
 
const nullMessage = “Authentication error. Token undefined.”; 
const trueMessage = “You have been authenticated. Go on.”; 
const falseMessage = “Authentication error. You bring the wrong 		token.”; 
token &&= trueMessage; 
token ||= falseMessage; 
token ??= nullMessage; 
return token; 
}; 

You can see the differences between before and after. The after-code example is more straightforward. Let’s go more in-depth and see what this logical operator “&&=” means:

• If the token is true, then the variable trueMessage is assigned to the token. Token = “You have been authenticated. Go on.”. 
• Otherwise, if the token is false (false, 0, -0, 0n, “, null, undefined, and NaN), it does not do anything – trueMessage is not assigned to the token. 

Let’s see “||=”:

• The variable falseMessage is assigned to the token if the token is false. Token = “You bring the wrong token.” 
• Otherwise, if the first is true, then it does not do anything – falseMessage is not assigned to token. 

The last one is “??=”. It is the same with “||=.” But it is more specific to “null” or “undefined” value.

Promise.any

We have another new Promise method in this new feature – Promise.any(). This feature will resolve if any of the supplied promised is resolved. It will not wait until all promises are resolved. So Promise.any() here takes whichever Promise resolves first. That is why it is called – any.

try { 
 const resolvedPromises = Promise.any(arrPromises); 
 // do more work with the resolved promises 
} catch (err) { 
 // catch the error if the promises failed to be resolved 
}; 

On the other hand, if no promise resolves, Promise.any() throws an AggregateError exception. It also gives you information about the reason for rejecting all the rejected promises.

WeakRef

WeakRef stands for Weak References. Its primary use is to hold a weak reference to another object. This means it does not prevent the garbage collector from collecting the object. The Weak Reference comes in handy when we do not want to keep the object in the memory forever.

But why do we need the WeakRef in the first place? In JavaScript, the garbage collector doesn’t collect the object as long as a reference to that object is exists. For this reason, it keeps the object in the memory, which leaves you with more memory. Finally, the WeakRef feature lets the garbage collector collect the object.

You can create a Weak Reference by using the new WeakRef, and you can read a reference by calling the deref() method. Let’s see the example below:

const hugeObject = new WeakRef({ 
 cacheName : “CacheMechanism”, 
 cacheType : "Cache", 
 cacheApplying : "WeakRef" 
}) 
hugeObject.deref(); 
hugeObject.deref().cacheName; 
hugeObject.deref().cacheType; 
hugeObject.deref().cacheApplying; 

This example is just for illustrative purposes, to show how to access and read weak references.

Be careful when using them. Even though the WeakRef can be helpful in some cases, the TC39 Proposal advises avoiding it if possible. For example, “The W3C TAG Design Principles recommend against creating APIs that expose garbage collection. It’s best if WeakRef objects are used to avoid excessive memory usage, or as a backstop against certain bugs, rather than as a normal way to clean up external resources or observe what’s allocated.”

Conclusion

These are some of the new features of ES12. If you still have a problem understanding these features, you can go to the ECMAScript finished proposals to get complete documentation. 

Author: Muhammad Kholid, Software Engineer