The most important JavaScript features of this decade

Let’s take a look at the best features that have been introduced by EcmaScript since 2020

Dynamic import

The capability of exporting and importing pieces of code has been one of the greatest JavaScript features. Now that even Node.JS has ditched CommonJS in favor of ES Modules, ES2020 has added a nice option: we can now dynamically import modules. This means that import is not only confined to the top of our files, but we can asynchronously import something whenever we actually need it.

if(feelingHungry) {
  const snack = await import('./breakfast-module.js');
  snack.eatSomething();
}

Did you get the advantage of doing this? No need to import something if you’re not sure that it’s actually going to be used. Faster loading time. Yep.

New logical operators

ES2021 introduced a bunch of new, exoteric operators: &&=, ||= and ??=, of course. Feeling confused? Welcome to the club. But wait, let’s take a closer look, because things are not so obscure after all.

&&=

Reads like this:

“

If the first value is true, take the second value

“

Ok, here’s a better explanation

let newUser = true;
newUser &&= 'Mark';
// newUser is set to Mark

Nothing really new: it’s just a shortcut for this kind of code we could have written before the introduction of these operators

let newUser = true;
newUser && (newUser = 'Mark')

array.at()

This makes counting elements in array more elegant and easier to read, especially when you need to count items starting from the last position. Yep, you got it right: no more arr.length - 1 to get that last item!

const fruit = ['Apple', 'Banana', 'Carrot'];
let firstFruit = fruit.at(0); // Apple
let lastFruit = fruit.at(-1); // Carrot

let lastFruit = fruit[fruit.length -1]; // Carrot

New array methods to help you with immutability

There are a bunch of new array methods that can be really helpful to sort, reverse or replace things in arrays without changing the original array.