Top 3 new JS features that made my life better

I’ve been working with JavaScript for the last 3-4 years but the last year I’ve seen massive improvement in the language. In my opinion ES2020 was a huge step in the right direction and ES2021 seems to have some great stuff to offer too. With ES2020 we have seen some very useful features added but I will talk about my top 3 that saved me countless hours. My top 3 (relatively) new features are:

• Dynamic imports
• Optional Chaining
• Nullish Coalescing

Dynamic imports

Until now for every library, component, module or anything else you wanted to use in your code you needed to import it first at the top of your file. Even if it is used only in certain situations (like if the user clicks a button something shows up) the code will be imported. This could have a huge impact on performance because you load a lot of things you don’t use. For this dynamic imports have been a lifesaver. With dynamic imports you can lazily import a module at runtime. This means you can delay the loading of non-essential modules until they are required.

For example instead of statically loading a huge library at the top of the file:

import LargeLib from 'large-lib';

You can load it when it is required:

async function doSomething() {
	const LargeLib = await import('large-lib');
	// ----- do something with the lib -----
}

Optional Chaining

This has been by far the most popular and talked about feature of ES2020. And in my opinion it deserves the praise that it gets because it is a real lifesaver. Optional chaining in a feature that allows you to call a deeply nested property without throwing an error if the parent property is undefined.

In the past you needed to check every properly down to the one you need. For example we want to get the city of the company:

// Old way
console.log(company && company.address && company.address.city);

// Optional chaining
console.log(company?.address?.city);

This makes the code look a lot cleaner and more readable. With one look you can see exactly what you wanted to do.

Nullish Coalescing

Nullish coalescing is also one of the more popular new features. In the past when you wanted to set a default value to a property when it is undefined. Until now the common way of doing that was with the OR (||) operator. Let’s do this with an example.

const duration = 0;

const animationDuration = duration || 500;

In the example above we want animationDuration to be set to duration only if duration is defined. But the problem here is when we want to se it to 0 it will default to 500. This happens because 0 is considered a falsy value and there for the OR operator takes the right one. We can fix this with type checking but that just makes the code messy. To fix this in a more elegant we can fix this with the nullish coalescing operator (??). It only checks if the value is undefined or null. All we have to do is replace the OR operator with the nullish coalescing operator and now we can use 0 as a valid value.

// This ...
const animationDuration = duration || 500;

// ... becomes this
const animationDuration = duration ?? 500;

Conclusion

JavaScript is truly becoming a modern and elegant language. It is amazing and wonderful to see how JavaScript came from a language which was booed on, to one of the strongest and most versatile language. There is much more to write about, so many new and very useful features, but I decided to keep it short and sweet.