ES12 Features you should know in 2021
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-02-22 00:47:46




#### 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.

![](https://cdn-images-1.medium.com/max/800/0*y2lcxe3MPAHI63c8)

Photo by [Ben White](https://unsplash.com/@benwhitephotography?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef")[](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)

#### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry")[](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry)

#### 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](https://github.com/tc39/proposal-private-methods) 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](https://medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3 "https://medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3")[](https://medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3)

### Further Reading

[42 Tips and Tricks to Write Faster, Better-Optimized JavaScript Code](https://medium.com/javascript-in-plain-english/42-tips-and-tricks-to-write-faster-better-optimized-javascript-code-3a82c53d051e)

[25 Tips and Tricks to Write Faster, Better-Optimized TypeScript Code](https://medium.com/javascript-in-plain-english/25-tips-and-tricks-to-write-faster-better-optimized-typescript-code-c1826cf4730e)

[21 Arrays and Object Tricks in JavaScript/TypeScript](https://medium.com/javascript-in-plain-english/21-arrays-and-object-tricks-in-javascript-typescript-9d41f5f4966c)

[34 JavaScript Optimization Techniques to Know in 2021](https://medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3)

[22 Utility Functions To Ace Your JavaScript Coding Interview](https://medium.com/javascript-in-plain-english/22-utility-functions-to-ace-your-javascript-coding-interview-21ca676ad70)

[100 Coding Terms and Definitions Every Developer Should Know](https://medium.com/javascript-in-plain-english/100-coding-terms-and-definitions-every-developer-should-know-be22447b7579)

[20 Useful VS Code Extensions for Frontend Developers](https://medium.com/javascript-in-plain-english/20-useful-vs-code-extensions-for-frontend-developers-in-2021-8f0c6c5c9e50)