#ES11
#NewFeatures
#java_script
New features in ES2020 (ES 11)
In this post, we introduce the new features that have been added to JavaScript under the title of ES2020.
You should know that ES stands for ECMAScript and it is the standard that JavaScript is built on and it started in 2015 and is a group of JavaScript developers and other people who collaborate in developing and adding new features to JavaScript. .
In ECMAScript, there are four steps to release a new feature:
Proposal
Draft
Candidate
Finished
When the new feature reaches the fourth stage, it is considered as a part of the ECMAScript release, and from now on it is the responsibility of the browser to implement that feature.
So before you use a new feature, make sure your browser has implemented it. For this purpose, you can use
Get help from the caniuse website.
In the following, we discuss the most important features of ES11
Nullish Coalescing Operator ()
When we want to access a property of an object, sometimes it is necessary to replace the default values only if the value of a variable or property is null or undefined.
In the past, for this purpose, the operator || What actually happened when using this operator was that the corresponding variable or property values were forcibly converted to Boolean by JavaScript, and if the specified variable or property value was falsy, the specified default value was considered. would be
The values of falsyType in JavaScript are:
(empty string) , 0, undefined, null, false, NaN , .
const falseTypes = {
emptyString: ,
zeroNum: 0,
falseBoolean: false,
nullValue: null,
}
const undefinedValue = falseTypes.undefinedValue || my default
Now, let’s consider a situation where the specified default value is considered only if the value of a property is null or undefined. Such a situation, when we are not aware of the data type of our variable, if we use the operator || If we use it, it causes unwanted behavior, for example, the value of the property may be false and because the hc operator || We used, JavaScript uses falsy check for this purpose, and again the default value will be considered.
While we only wanted the default value to be considered if the property value is null or undefined.
Solving this problem in ES11 is done with operator ().
If the value of the variable is only null or undefined, the default values will be considered.
Optional Chaining Operator (Elvis operator)
This operator makes it possible that when you are reading the properties of a nested object, you don’t have to worry about the existence or absence of the properties of that object, if the corresponding object does not have the specified property, undefined will be returned.
You can use this operator to make sure that there are properties and methods in the object.
In the past, for this purpose, we acted as follows:
const nestedObject = {
firstProp: {
secondProp: {
thirdProp: {
nestedProp: 3
}
}
}
};
if (nestedObject &&
nestedObject.firstProp &&
nestedObject.firstProp.secondProp && nestedObject.firstProp.secondProp.thirdProp && nestedObject.firstProp.secondProp.thirdProp.nestedProp) {
const validProperty = nestedObject.firstProp.secondProp.thirdProp.nestedProp
console.log(validProperty) // 3
}
But the ES11 solution is as follows:
const checkedProp = nestedObject?.firstProp?.secondProp?.thirdProp?.nestedProp
console.log(checkedProp)
Promise. all settled
This method, which was added in ES11, receives an array of promises. When you use this method, this method returns a promise as an output, which contains an array of promises given to it and the status of reject or The resolution of each of the promises given in it is clear, in fact, when you use this method, the resolution of all the promises is definitely not important.
@FullStackDevs
This post is written by MehdiSheykhveysi