JavaScript ES2020 Features

By Halil 14 January 2021 103 0
JavaScript ES2020 Features

Note: It’s necessary to have a basic knowledge of JavaScript to fully understand the best ones introduced.

Late 2020, the latest JavaScript features have been finalized and released as ECMAScript 2020 (or ES2020).

The new JavaScript features in ES2020 are:

  •  globalThis
  •  Nullish coalescing Operator
  •  Optional Chaining
  •  BigInt
  •  for-in mechanics
  •  String.prototype.matchAll
  •  import()
  •  Promise.allSettled

ES20 introduced a number of useful additions. In this article, I will discuss my favorite new features from ES2020 that I think can make the code a little cleaner and also have usage in our daily work.

  • globalThis

ES2020 brings us the globalThis property which always refers to the global object, no matter where you are executing your code. This property really shines when you aren’t sure what environment the code is going to run in. Probably you know that now we run JavaScript in Browsers, Web Workers and Server.

Simple example: We can set up a simple global variable by doing this in the browser: 

		globalThis.example = "I am on the globalThis "
		

Now if we type GlobalThis and open the object, we can see out "example" with the value that we assigned to it and we can access this anytime but Note that directly in the browser when we refresh, the value does not persist.


  • Nullish Coalescing Operator

I personally find this very easy and useful that in certain cases can make our code cleaner.

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Simple examples: 

		  const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;

const firstVal= nullValue ?? "default for A";
const secondVal= emptyText ?? "default for B";
const thirdVal= someNumber ?? 0;

console.log(firstVal); // "default for A"
console.log(secondVal); // "" (as the empty string is not null or undefined)
console.log(thirdVal); // 42
		

Chaining Nullish Coalescing Operator ( ?? ) with AND ( && ) or OR ( || ) operators It’s not possible to chain AND ( && ) and OR ( || ) operators directly with ?? operator. If you need to combine them, then you must wrap && or || operator in the parenthesis.

		const person = {
    firstName:"",
    LastName: null
}

const valA = person.firstName || person.lastName ?? "Someone without a name :("  // => produces error

const valB = ( person.firstName || person.lastName) ?? "Someone without a name :("  // => "Someone without a name :("
		


  • Optional Chaining

A simple explenation of this: Optional Chaining syntax allows you to access deeply nested objects without worrying about whether the property exists or not.
I am sure at some point we all have encountered this error: TypeError: Cannot read property <abc> of undefined.

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

Simple example:

		const person = {
  name: 'John',
  sharkName: {
    name: 'toothy'
  }
};

const dolphinName = person.dolphin?.name;  // => undefined
const sharkName = person.sharkName?.name; // => 'toothy'
		


  • BigInt

BigInt is a built-in object that provides a way to represent whole numbers larger than 253 - 1, which is the largest number JavaScript can reliably represent with the Number primitive and represented by the Number.MAX_SAFE_INTEGER constant. BigInt can be used for arbitrarily large integers. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.

This means that the variables can now represent 253 numbers and not just max out at 9007199254740992.

Simple examples:

		//Before limit was :
const maxLimit = Number.MAX_SAFE_INTEGER // =>9007199254740991
maxLimit + 1 // 9007199254740992
maxLimit + 2 // 9007199254740992 => exceeded

const hugeNumber = BigInt(9007199254740991) //=> 9007199254740991n
const hugeHex = BigInt("0x1fffffffffffff") // => 9007199254740991n
const hugeString = BigInt("9007199254740991") //  => 9007199254740991n
		

When tested against typeof, a BigInt will give "bigint":

		typeof 1n === 'bigint'           // true
typeof BigInt('1') === 'bigint'  // true
		


typeof 10; // number
typeof 10n; // bigint


Conclusion:

As I said in the beginning, here i covered the ones i find useful for now but that doesn't mean the rest of them has no usage. it means that i haven't tried a good usage of them yet in my projects but i am sure everything that is being developed is for the good of the developers, to make our lives easier. Maybe ES20 didnt bring as many new features as ES6 did, but i find all of them great for JavaScript developers.