The development of the web today is also a reason why javascript has a strong explosion. Whether at any time or in this stage, JS is always used in real projects. According to a StackOverflow 2020 survey, Javascript is the most used language today and the number of people using it has increased dramatically.
Even so, the vast majority of users know that in the beginning of Javascript it got really hard to build, even making some jokes on the internet about its functions. Today things have changed, and several versions of EcmaScript (European Association for Information and Communication System Standardization) came out to standardize these functions.
In 2020, a new version of EcmaScript appears, along with a number of features added to the browser. In this article, we will go through each one and explore its uses. Are you ready?
BigInt
Integer representations are one of the new features in ES11. Previously, the maximum representation in javascript was 9007199254740991 .
Now, with bigInt, we can go far beyond that.
Dynamic import
Now, with Javascript, we can import modules dynamically through variables. Variables that receive modules can include the namespaces of these modules globally.
1 2 3 4 5 6 7 8 9 10 11 | let Dmodule; if ("react") { Dmodule = await import('react') } else { Dmodule = await import('vue') } /* It is possible to use Dmodule. (Methods) throughout the file globally */ |
Exporting modules
A new syntax has been added to allow importing the same modules as it already exists, see the example below:
1 2 3 4 5 6 | // Existing in JS import * as MyComponent from './Component.js' // Added in ES11 export * as MyComponent from './Component.js' |
Optional Chaining
The options string, known to babel users, is now powered by Javascript. This function removes the need for pre-conditions to call a variable or method contained in it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const user = { "name": "Aryclenio Barros", "age": 22, "alive": true, "address": { "street": "Hyrule street", "number": 24, } } // Without optional chaining const number = user.address && user.address.number // With optional chaining const number = user.address?.number |
Nullish Coalescing Operator
A new operator has been added to Javascript. It leads to the difference between the falsey value of Javascript. We use the falsey with || operator. The falsey values are:
- 0
- undefined
- null
- false
- NaN
The new operator allows only undefined and null, allowing variables to include the rest of the values to be true under a condition. Note that, unlike the above, the values 0, NaN, and false are preserved even if a non-falsey value is passed.
Promise.AllSettled
The Promise.AllSettled property allows you to make a condition that observes whether all the promises in an array have been resolved. See the example below:
1 2 3 4 5 6 7 8 9 10 | const myArrayOfPromises = [ Promise.resomve(myPromise), Promise.reject(0), Promise.resolve(anotherPromise) ] Promise.AllSettled(myArrayOfPromises).then ((result) => { // Do your stuff }) |
matchAll
The matchAll method is a feature that makes a more detailed representation of regex comparisons within a string. Its result is an array indicating the locations, as well as the string group and the search source. See for example regex that allows values 0 through 5 with the matchAll method.
Conclusion
Besides these features, there are tons of cool new features, you can see all the changes on the official website of Ecma.
Reference link here