Optional Chaining
The optional chaining ?.
is an error-proof way to access nested object properties, even if an intermediate property doesn’t exist. Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, undefined
will be returned.
Here is the example of one of most common error caused due to accessing non-exist property of an object.
Let’s see how optional chaining can rescue us to get avoid this error.
Optional Chaining With Missing Object Property
|
|
You will get an error while trying to read the non-existence city
property of a person
object. Using optional chaining (?.) will prevent this error and output the undefined value.
Optional Chaining With an Empty Or Null Array
When you try to access an element of an empty or null array, it will throw an exception.
|
|
Now, use optional chaining to prevent this error.
|
|
Optional Chaining With an Missing function
|
|
When we try to access a function which is null, it will throw an exception. Optional chaining will prevent this error and return an undefined value here.
Nullish Coalescing
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.
Contrary to the logical OR (||
) operator, the left operand is returned if it is a falsy value which is not null
or undefined
. In other words, if you use ||
to provide some default value to another variable foo
, you may encounter unexpected behaviors if you consider some falsy values as usable (eg. ''
or 0
). See below for more examples.
|
|
In this example, we will provide default values but keep values other than null
or undefined
.
|
|
BigInt
BigInt can be used to represent whole numbers larger than 253 - 1. BigInt
can be used for arbitrarily large integers.
A bigint is created by appending n
to the end of an integer literal or by calling the function BigInt
that creates bigints from strings, numbers etc.
|
|
Dynamic Import
Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively.
This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.
|
|
Private Field
One of the main purposes of classes is to contain our code into more reusable modules. Because you’ll create a class that’s used in many different places you may not want everything inside it to be available globally.
Now, by adding a simple hash symbol in front of our variable or function we can reserve them entirely for internal use inside the class.
|
|
Promise.allSettled
To wait for multiple promises to finish, Promise.all([promise_1, promise_2]) can be used. The problem is that if one of them fails, then an error will be thrown. Nevertheless, there are cases in which it is ok for one of the promises to fail, and the rest should still resolve. To achieve that, ES11 introduced Promise.allSettled.
|
|
MatchAll
matchAll
is a new method added to the String
prototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another.
globalThis
Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use window
, self
, or frames
- but in Web Workers only self
will work. In Node.js none of these work, and you must instead use global
.
The this
keyword could be used inside functions running in non–strict mode, but this
will be undefined
in Modules and inside functions running in strict mode. You can also use Function('return this')()
, but environments that disable eval()
, like CSP in browsers, prevent use of Function
in this way.
The globalThis
property provides a standard way of accessing the global this
value (and hence the global object itself) across environments. Unlike similar properties such as window
and self
, it’s guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in.To help you remember the name, just remember that in global scope the this
value is globalThis
.
Static Fields
Static fields in classes is a new feature that’s coming soon to browsers and Node.js. It lets us add static fields for classes that do not need an instance of the class to be created to be accessed. They can both be private or public. It’s a handy replacement for enums.
|
|
Summary
I hope you found this article useful and are as excited as I am about the new features that are coming to JavaScript.
Further Reading
Learn about module design pattern in JavaScript