Web development

4 new javascript syntax to watch out for in 2021

Since 2015, javascript syntax has been updated to the language every year. 2021 is no different: this year, several new features have reached Phase 4 of the TC39 Workflow and are already available in Node.js and most major modern browsers.

In this article, we’ll take a look at four of the most important new features. We’ll cover a new string method, a new Promise method, readability improvements, and new abbreviations for assignments.

replaceAll()

First, we have a new string prototype method, replaceAll, that replaces every instance of a substring.

While we can do this with the existing replace method, we have to switch to a regular expression such as this:

"1990-01-01".replace(/-/g, "/");

replaceAll is supposed to be more readable:

"1990-01-01".replaceAll("-", "/");

With ReplaceAll, there is no need for regex. However, it can still be used, as long as the g flag is provided.

"1990-01-01".replaceAll(/-/g, "/");

Support
Chrome: 85+
Firefox: 77+
Safari: 13.1+
Node: 15.0.0+

Promise.any

This year has seen further improvements to asynchronous code handling with Promise.any, which takes an array of Promises and returns the first result. If every Promise is rejected, an error will occur.

Take four Promises and see what happens:

const p1 = new Promise((resolve, reject) => setTimeout(reject,  1000, "p1"));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, "p2"));
const p3 = new Promise((resolve, reject) => setTimeout(reject,  3000, "p3"));
const p4 = new Promise((resolve, reject) => setTimeout(resolve, 4000, "p4"));

Promise.any will return whichever is resolved first. In this case, p2. We can test this using the code below:

async function getFirstResolvedPromise() {
  const result = await Promise.any([p1, p2, p3, p4]);
  console.log(result);
};
getFirstResolvedPromise(); // "p2"

Now there are four methods we can use to work with an array of Promises:

  • Promise.all – returns an array of resolved Promises, after all Promises have been resolved
  • Promises.allSettled (new in 2020) – returns an array of Promises, whether they are resolved or rejected, after all Promises are resolved or rejected
  • Promise.race – returns the first Promise that is resolved or rejected
  • Promise.any – returns the first Promise resolved

Support
Chrome: 85+
Firefox: 79+
Safari: 14+
Node: 15.0.0+

Logical assignment operator

Since the introduction of the nullish association operator ?? in 2020 we now have three logical operators:

  • && — logical AND
  • ||— logical OR
  • ??— nullish coalescing operator

These shortcuts allow us to succinctly resolve expressions based on whether a value is true or false – or in the case of ?? – whether a value is nullish (null or undefined).

Now, we have a more concise way of assigning values ​​using the following operators:

  • && = – assigns a variable, if the variable is true
  • ||= — assign a variable, if the variable is false
  • ??= — assign a variable, if the variable is empty

In the code below, each group consists of three equivalent statements:

// Logical AND assignment
a &&= b;
a = a && b;
a = a ? b : a;
// Logical OR assignment
a ||= b;
a = a || b;
a = a ? a : b;
// Logical nullish assignment
a ??= b;
a = a ?? b;
a = a === null || a === undefined ? b : a;

In the example below, the variable a will be reassigned to a new value when every expression runs. Here is the code:

let a = true;
const b = false, c = null, d = 10;
a &&= b;
console.log(a); // false
a ||= c;
console.log(a); // null
a ??= d;
console.log(a); // 10

These new assignment operators participate in the mathematical assignment operators += , -= , = , /= , = and %= , as well as bitwise operator assignments.

Support
Chrome: 85+
Firefox: 79+
Safari: 14+
Node: 15.0.0+

Thousand character separator

Finally, this year has seen widespread adoption of a feature that offers a significant increase in readability for those working with large or many decimal places!

Now, we can use underscores to separate digits.

const a = 100000000;
const b = 100_000_000;
console.log(a === b); // true

Although a and b are identical, b is easily identified as 100 million.

In practice, the number separator is mainly useful as a thousand separator, although this usage is not enforced. The number separator is usable with float and BigInt values ​​(introduced in 2020). Here is some code to show how they work:

const float = 3.141_592_653_59;
const bigInt = 9_007_199_254_740_992n;

Note that _ cannot be used at the beginning or end of a number (or after the first zero). Also, it must not be adjacent to the decimal point and cannot use multiple underscores in a row.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button