New Features of JavaScript 2021

 

Nowadays we should know about some programming languages like C language, C++, CSS, JavaScript, Python, etc. Today we discuss new features of JavaScript that are very useful for programmers/ coders/ developers.

 

JavaScript is the easiest programming language to learn for beginners. You can learn it from the tutorial by yourself.JavaScript is the front-end programming language.JavaScript gives some new features in 2021 that are very helpful for developers/ coders/ programmers. A few of the features of JavaScript given below: 

List of Best New Features in JavaScript 2021

1. Logical Operators

 

JavaScript have AND, OR, NOT operators but in new JavaScript updated three new logical operators are as follow: 

A. &&= Operator

If X variable has a specific value in the new logical operator, then the variable should be assigned the value of variable Y. That's why we use a console.use(X), now the value of the variable of X is a change from 10 to 15. Let see the example:

 ----------------------------------------------------------------------------

    let X = 10;

    let Y = 15;

    X &&= Y;

    console.use(X);

    // Now, the output of variable X is 15.

 ----------------------------------------------------------------------------

B. ||= Operator

This operator is the opposite of &&= operator. In this case value of variable X is not change. If variable X has the wrong value then variable X and variable Y will be equal. Let see the example:

---------------------------------------------------------------------------- 

let X = 10;

let Y = 15;

X &&= Y;

console.use(X);

// Now, the output of variable X is 10.

---------------------------------------------------------------------------- 

C. ??= Operator

This operator is used to check the value of the variable is NULL or not. Let see the example:

---------------------------------------------------------------------------- 

        let X;

    let Y = 15;

    X ??= 10;

    console.use(X);

    // Now, the output of variable X is 10.

 

Logic of this operator:

    if(X == NULL ||  X == undefined){

    X = 10

    };

----------------------------------------------------------------------------

2. replaceAll method using String

 

We all use the replaceAll method using string. The new JavaScript replace method to have a limitation to change the word in a string. It changes only one word at a time. If you want to replace all words at a time you can use the regular expression. Now let see the example:

-----------------------------------------------------------------------------------------

// with regex
let str = "Hello World!, Hello Their;"
console.log(str.replace(/Hello/g, "Hii"));
// Output will be "Hii World!, Hii Their;"

// without regex
let str = "Hello World!, Hello Their;"
console.log(str.replace('Hello', 'Hii'));
// output will be"Hii World!, Hello Their;"

-----------------------------------------------------------------------------------------

3. Using underscores for integers as a separator 

Sometimes Integers are used as a data type in a string and array. It's very difficult to find out the perfect number of elements that are in million or billion.

 

But now in the latest JavaScript, we can easily find the number with the help of underscores(_). We can use underscores as separators in the integer. Let see the example below:

-------------------------------------------------------------------------------------------------

       let number = 1_000_000; // one million
    console.log(number);

    // output will be 1000000(the number will remain an integer)

--------------------------------------------------------------------------------------------------

4. Promise.any() 

 

Promise.any() is a new function in JavaScript.Promise. any() takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise. If no promises in the iterable fulfill, then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors. This method is opposite from the promisee. all(). Let see the example:

--------------------------------------------------------------------------------------------------

        const promise1 = Promise.reject(0);
        const promise2 = new Promise((resolve) => setTimeout(resolve, 25, 'Even'));
        const promise3 = new Promise((resolve) => setTimeout(resolve, 30, 'Odd'));
        const promises = [promise1, promise2, promise3];
        Promise.any(promises).then((value) => console.log(value));
        // output will be "Even" 

---------------------------------------------------------------------------------------------------

5. WeakRef

WeakRef objects contain Weak reference, which is called its target or referent. A weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector.

---------------------------------------------------------------------------------------------------

        class Student {
        constructor(element) {
        this.ref = new WeakRef(element);
        this.start();
          }

        start() {
       if (this.timer) {
       return;
        }
       this.std = 0;
       const tick = () => {
       const element = this.ref.deref();
       if (element) {
       element.textContent = ++this.std;
          } else {        console.log("The element is gone.");
        this.stop();
        this.ref = null;
              }
        };
       tick();
       this.timer = setInterval(tick, 250);    

  }
      stop() {
      if (this.timer) {
      clearInterval(this.timer);
      this.timer = 0;
    }
  }
}
      const Student = new                                              Student(document.getElementById("Student"));
      setTimeout(() => {
      document.getElementById("Student").remove();
      }, 2500);

---------------------------------------------------------------------------------------------------

6. Finalizers

FinalizationRegistry provides a way to request that a cleanup callback get called at some point when garbage-collected. Cleanup callbacks are called finalizers. Cleanup callbacks are not used for program logic. Let see the example:

----------------------------------------------------------------------------------------------------------------

     const counter = new FinalizationRegistry(data =>                  console.log(data));
     const obj = {'Say': 'Hello!'};
     counter.register(obj, 'obj is collected now!')

----------------------------------------------------------------------------------------------------------------

counter. register takes 2 arguments. First, the object that is garbage collection, and second is the message that we want to display to the console when the object is garbage collected.

 

 

Read More:: 3 Ways to Write Elegant JavaScript Code

Read More:: Why I Failed As a Junior Programmer