JavaScript Features in 2020

JavaScript continues to evolve rapidly, with 2020 introducing several exciting features that enhance the language’s robustness, flexibility, and overall utility. These updates not only simplify common coding patterns but also improve performance and reduce boilerplate code. Let’s dive into the new features that JavaScript brought in 2020.

New Features in JavaScript 2020

Optional Chaining

Optional chaining is a syntax feature that allows developers to access deeply nested properties of an object without having to check if each property exists. It uses the ?. operator for safe property access.

Use cases and benefits

Scenario	With Optional Chaining	Without Optional Chaining
Accessing a nested property	let city = user?.address?.city;	let city = user && user.address && user.address.city;

This feature significantly reduces the amount of boilerplate code and makes APIs easier to interact with, especially where data may not always be available.

Nullish Coalescing Operator

The nullish coalescing operator (??) provides a way to set default values for null or undefined variables only. This is different from the traditional logical OR operator (||), which triggers a default even for ” (empty string) or 0.

Comparing with logical OR operator

Expression	Using ||	Using ??
let value = input || 'default';	0 or “” would trigger default
let value = input ?? 'default';		Only null or undefined trigger default

Dynamic Import

Dynamic import is a feature that allows you to import modules asynchronously. This is useful for code splitting, which can significantly improve the load time of applications where only certain modules are needed at a given time.

Advantages of using dynamic import

With dynamic import, you can load modules on demand rather than at startup, optimizing resource use.

async function loadModule() {
    const module = await import('./myModule.js');
    module.doSomething();
}

BigInt

BigInt is a new primitive that provides a way to represent whole numbers larger than Number.MAX_SAFE_INTEGER (2^53 – 1). It is created by appending ‘n’ to the end of an integer or by using the BigInt() constructor.

Use cases for BigInt

BigInt is particularly useful when performing calculations with large integers, such as in cryptography or high-precision computations.

const largeNumber = BigInt(123456789012345678901234567890);
const anotherLargeNumber = 12345678901234567890n;

Promise.allSettled()

Promise.allSettled() is a method that allows you to handle multiple promises simultaneously. Unlike Promise.all(), which rejects as soon as one promise is rejected, Promise.allSettled() resolves after all the promises have settled, regardless of their outcome.

Differences from Promise.all()

Method	Outcome Handling
Promise.all()	Rejects if any promise rejects
Promise.allSettled()	Always resolves, returning an array of objects with status

Promise.allSettled([promise1, promise2])
    .then((results) => {
        results.forEach((result) => console.log(result.status));
    });

for…of Loop with String

The for…of loop now allows iteration over strings directly. Each iteration will yield each character of the string, making it easier to work with string data without converting it to an array.

Benefits for string iteration

const str = 'Hello';
for (const char of str) {
    console.log(char);
}
// Output: H E L L O

Other Improvements

New Global Object

JavaScript introduces a new global globalThis variable, which provides a standard way to access the global object across different environments (browser, Node.js, etc.). This is significant for writing libraries that function consistently across environments.

import.meta

import.meta is an object that contains metadata about the module itself. This can be useful for getting the URL of the current module or for dynamically loading related resources.

console.log(import.meta.url); // Prints the URL of the current module

Module Script

Module scripts allow JavaScript modules to be loaded more reliably in the browser. This separation of concerns improves code organization and helps prevent conflicts between scripts.

<script type="module">
    import { ModuleName } from './moduleFile.js';
</script>

Conclusion

In summary, 2020 brought several valuable features to JavaScript, making it more robust, easier to use, and efficient. Features like optional chaining, nullish coalescing, dynamic import, BigInt, and enhancements to promises and loops represent a significant evolution in JavaScript. Looking ahead, as the language continues to grow and adapt, developers can expect even more features that focus on code efficiency and improved handling of complex data types.

FAQ

What is optional chaining in JavaScript?

Optional chaining is a feature that allows access to deeply nested properties of objects without checking for their existence, preventing runtime errors.

What is the nullish coalescing operator?

The nullish coalescing operator (??) returns the right-hand operand when the left-hand operand is null or undefined, unlike the logical OR operator that considers other falsy values.

When should I use BigInt?

You should use BigInt when you need to work with integers larger than Number.MAX_SAFE_INTEGER or need precision in arithmetic operations involving large numbers.

What does Promise.allSettled() do?

Promise.allSettled() returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects describing the outcome of each promise.

What is the significance of import.meta?

import.meta provides useful metadata about the module, such as its URL, allowing modules to load resources dynamically within their context.