ES12 Features you should know in 2021

Optimize your JavaScript Code with new ES2021 Features

The future of JavaScript is going to be brilliant. Keeping up with the changes shouldn’t be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.

Photo by Ben White on Unsplash

You might be doing JavaScript development for a long time but sometimes you might be not updated with the newest features which can solve your issues without doing or writing some extra codes. These techniques can help you to write clean and optimized JavaScript Code. Moreover, these topics can help you to prepare yourself for JavaScript interviews in 2021.

Here I am coming with a new series to cover all JavaScript features (with versions) that help you to write more clean and optimized JavaScript Code. This is a Cheat list for JavaScript Coding you must know in 2021.

Let’s understand these features ES2021 features with examples.

1. replaceAll

The replaceAll() method returns a new string with all matches of a pattern replaced by the new replacement word.

The Pattern can be string or Regexp.

const p = 'my name is atit';

const regex = /atit/gi;

console.log(p.replaceAll(regex, 'patel'));  
// expected output: my name is patel

console.log(p.replaceAll('atit', 'patel'));  
// expected output: my name is patel

2. Promise.any()

It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.

const promise1 = Promise.reject(0);

const promise2 = new Promise((resolve) => setTimeout(resolve, 50, 'fast'));

const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value)); //fast

3. Weakref

This object holds a weak reference to another object without preventing that object from getting garbage-collected.

For example checkout below link

WeakRef

_A WeakRef object lets you hold a weak reference to another object, without preventing that object from getting…_developer.mozilla.org

4. FinalizationRegistry

Lets you request a callback when an object is garbage collected.

For example checkout below link

FinalizationRegistry

_A FinalizationRegistry object lets you request a callback when an object is garbage-collected. FinalizationRegistry…_developer.mozilla.org

5. Private visibility modifier for methods and accessors

Class properties are public by default and can be examined or modified outside the class. There is however a stage 3 proposal to allow defining private class fields using a hash # prefix.

class TestClass {  
  #privateVariable  
}

class TestClass {  
  #privateMethod() {  
    return 'test'  
  }  
}

class TestClass {  
  static #PRIVATE_STATIC_FIELD  
}

6. Logical Operators

The logical OR assignment (x ||= y) operator only assigns if x is false.

const a = { duration: 50, title: '' };

a.duration ||= 10;  
console.log(a.duration);  
// expected output: 50

a.title ||= 'title is empty.';  
console.log(a.title);  
// expected output: "title is empty"

The logical AND assignment (x &&= y) operator only assigns if x is truthy.

let a = 1;  
let b = 0;

a &&= 2;  
console.log(a);  
// expected output: 2

b &&= 2;  
console.log(b);  
// expected output: 0

7. Numeric Separators

This is the feature that helps us to relieve some pain while reading large numbers.

const value = 1000000000000;

There is a feature in JavaScript that enables underscore as a separator in numeric literals to improve readability.

Example:

const value = 1_000_000_000_000;

You can also use this for binary, octal, and hex numbers.

const n1 = 0b1010_0101_1001; // binaryconst n2 = 0o2_3_5_7; // octalconst n3 = 0xA_B_C_D_E; // hex

8. Intl.ListFormat

This object enables language-sensitive list formatting.

const data = ['abc', 'test', 'cde'];

const formatter1 = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });  
console.log(formatter.format(data));  
// expected output: "abc, test, and cde"

const formatter2 = new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });  
console.log(formatter3.format(data));  
// expected output: "abc test cde"

9. Intl.DateTimeFormat

This object enables the language-sensitive date and time formatting.

// Specify default date formatting for language (locale)  
console.log(new Intl.DateTimeFormat('en-US').format(date));  
// expected output: "01/04/2021"

// Specify date and time format using "style" options (i.e. full, long, medium, short)  
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));  
// Expected output "Monday, 04 January 2021 at 14:23:16 GMT+11"

If you are looking to Optimize your JavaScript code using modern shorthand techniques, tips, and tricks check out this article.

34 JavaScript Optimization Techniques to Know in 2021

_Optimize your JavaScript code using modern shorthand techniques, tips, and tricks_medium.com

Further Reading

42 Tips and Tricks to Write Faster, Better-Optimized JavaScript Code

25 Tips and Tricks to Write Faster, Better-Optimized TypeScript Code

21 Arrays and Object Tricks in JavaScript/TypeScript

34 JavaScript Optimization Techniques to Know in 2021

22 Utility Functions To Ace Your JavaScript Coding Interview

100 Coding Terms and Definitions Every Developer Should Know

20 Useful VS Code Extensions for Frontend Developers