1) BigInt:

BigInt allows us to store bigger integer values in our javascript code. At present the maximum safe integer in javascript is “pow(2, 53) – 1”. It is called Number.MAX_SAFE_INTEGER because it’s the maximum number that javascript allows to store as an integer. So, if you go beyond that number then javascript will give out unexpected results

Nullish Coalescing operator is useful when we need to check whether the value is “null” or “undefined” and based on that return some value. Before nullish coalescing we use the logical OR operator (||) which works in the similar way but it checks for the falsy values instead of the nullish values. In javascript “0, nul

2) Nullish Coalescing Operator:

Nullish Coalescing operator is useful when we need to check whether the value is “null” or “undefined” and based on that return some value. Before nullish coalescing we use the logical OR operator (||) which works in the similar way but it checks for the falsy values instead of the nullish values. In javascript “0, null, undefined, false, NaN” all are considered as falsy values. Below is the example of nullish coalescing operator.

3) Optional Chaining:

While working with objects in javascript, very often we need to check that whether the object exists, whether the property exists in the object or not, so on and so forth. Before optional chaining we would do these by using the logical AND operator (&&). But, soon it becomes very tedious task if the objects are deeply nested.

Well, with the new addition in javascript we no longer need to write those longer strings to check whether the property exists or not. Yes, you got it right!! It’s optional chaining. If the property exits then it will return the property value, else it will return undefined. Below is the example of optional chaining.

4) Promise.allSettled()

Promise.allSettled() accepts an array of promises and will return the data from the promises regardless of whether the promise is resolved or rejected. It will wait until the promises finishes their execution and once the promise executes it will return the data. Below is the example of Promise.allSettled().

5) globalThis:

There are different global objects for different runtime. For exampe, If you writing some javascript code in the browser then the global object is “window”. If you are writing some backend code in Node JS then the global object is “global”. So, we can’t use the “window” global object in the Node JS runtime because it’s for the browser. “globalThis” is the new addtion to the language which always refer to the global object, no matter where you are executing your code. Below is the example of globalThis.

React 17 Features

There are no major developer facing features added to React 17, instead this version is primarily focused on making it easier to upgrade React itself

As mentioned in the React Docs

In React 17, React will no longer attach event handlers at the document level, instead it will attach the event handler to the root DOM container into which the react tree is rendered

What it means is that react will not attach the events to the html document as it does in the previous versions, instead it will attach those event handlers to the root div element where our React App gets rendered.

React 17 will also provide support for the new version of JSX transform. With the new JSX transform, you can still use JSX without importing React in your application.