Alan Montgomery's Blog

Alan Montgomery's Blog

Javascript ES2021 - Features to be included this year in ES12

Javascript ES2021 - Features to be included this year in ES12

Subscribe to my newsletter and never miss my upcoming articles

ES12 is planned to be released in June 2021. So we're a little bit off yet, but there are some cool things that have been announced already, one of which is going to be awesome!

Here's a breakdown of what I'm going to briefly cover:

  • Numeric separators
  • String.prototype.replaceAll()
  • Logical assignment operators
  • Promise.any
  • WeakRef

Numeric Separators

It can be quite hard to read a large number when written in Javascript for example;

let population = 81760456;

Looking at this number right away, it's not easy to see that it is in fact 81 million, you spend a second just figuring out how many digits there are in your head before you come to that conclusion.

With ES12 we will have the ability to separate out our numbers when assigning a value to a variable like so;

let population = 81_760_456;

It's a lot more readable and easier to understand right? Using the underscore character, we'll be able to neatly separate numbers and can now clearly see that this number is 81 million.......

String.prototype.replaceAll()

This is a big win! I'm sure all JS devs and even all web developers generically will agree on this point! It's not a HUGE benefit, but it's definitely a neat addition.

Rightly so, as the function name suggests, we will be able to replace all occurrences in a string! Previously, as you'll know, you would have had to use the replace() function with a regex or pattern like;

let sentence = "Looking outside I can see 5 flowers, 1 flower is red, another flower is blue, and another is green.";
sentence = sentence.replace(/flower/g, 'car');

// This would replace all the instances of "flower" with "car"

With the new replaceAll, there is no need for our regex now and we could simply do;

sentence = sentence.replaceAll("flower", "car");

Why didn't this ever exist in the first place? 😅

Logical assignment operators

We will have three introductions of new logical operators;

  1. &&= (AND AND EQUALS)
  2. ||= (OR OR EQUALS)
  3. ??= (QUESTION QUESTION EQUALS)

&&= (AND AND EQUALS)

This operator will perform an assignment when the left is a true value, for example;

let var1 = 100;
let var2 = 150;

var1 &&= var2;

// Just like saying if var1 then var1 = var2
if (var1) {
   var1 = var2
}

||= (OR OR EQUALS)

The new logical OR is like the opposite of the above - the assignment will happen when the left is a false value, for example;

let var1 = null;
let var2 = 150;

var1 ||= var2;

// Just like saying if !var1 then var1 = var2
if (!var1) {
   var1 = var2
}

// Which means var1 will now hold the value of var2 in this case

??= (QUESTION QUESTION EQUALS)

With this new operator, the assignment happens when the left operand is null or it is undefined. For example;

let var1 = null;
let var2 = 150;

var1 ??= var2;

// Just like saying if var1 is null or undefined then var1 = var2
if (var1 == null || var1 == undefined) {
   var1 = var2
}

// Which means var1 will now hold the value of var2 in this case as var1 is actually null.

NOTE: It only checks for null or undefined and not for example a FALSE value.

Promise.any

This new method will take multiple promises and resolves whenever any of the promises are resolved. What does this mean?

Promise.any() will take whatever promise resolves first. If no promise resolves then we'll get thrown an error.

WeakRef

Also known as Weak References - this can be used to hold a weak reference to another object.

You can create a Weak Reference by using new WeakRef, and you can read a reference by calling the deref() method. A simple example would be;

const largeObject = new WeakRef({
     name: "CacheMechanism",
     type: "Cache",
     implementation: "WeakRef"
});

largeObject.deref();
largeObject.deref().name;
largeObject.deref().type;
largeObject.deref().implementation;

My favourite feature coming in ES12 is definitely the replaceAll method, which will save a lot of confusion is nothing else. I also like the new operators.

What's your favourite?

Are you on Twitter? Let's connect! @93alan

I also have a YouTube channel where I post coding tutorials, tips, tricks, reviews and more! I'd love to see you over there, I'd appreciate it:

#javascript#reactjs#web-development#mobile-development
 
Share this