3 JavaScript Features From 2020 That Will Make Your Life Easier

JavaScript is getting better every year. In 2020 there was, well, the ES2020 standard.

For me, optional chaining ?., the nullish coalescing operator ?? and string.matchAll are the three most useful features of ES2020 in practice. I'll explain how to use them with examples in this blog post.

Optional Chaining With ?.

Optional chaining checks if values are null or undefined before accessing their properties. If they are, it returns undefined.

You can write more concise code with .? by replacing for example x == null ? undefined : x.b expressions. It can also replace other patterns like x && x.b and make them less error-prone. This is especially useful when you have longer chains.

Let’s take a look at an example:

const test = (example) => {
  console.log(example?.value)
};

test({value: ".?"});       // .?
test(null);                // undefined (optional chaining)
test(undefined);           // undefined (optional chaining)
test(true);                // undefined (true.value is undefined)
test(1);                   // undefined (1.value is undefined)

Nullish Coalescing Operator ??

The nullish coalescing operator evaluates if its left side is null or undefined, and returns its right side in that case. The left side is returned when it is not null or undefined.

Like optional chaining, the nullish coalescing operator helps with writing less error-prone code. It can replace the a = x || something default value pattern. This pattern can lead to unintended results if x is falsy and not null or undefined.

Here's an example:

const test = (example) => {
  console.log(example ?? 'default')
};

test("??");                // ??
test(null);                // default (nullish coalescing)
test(undefined);           // default (nullish coalescing)
test(false);               // false - would be "default" with `||`
test(0);                   // 0 - would be "default" with `||`

Matching Regexp With Capture Groups Using string.matchAll

string.match already returns all matched values from a regular expression with the global flag. But it can be important to get the positions of the matched values and even their capture groups. string.matchAll is the best solution for that use case.

string.matchAll returns an iterator over all matches of a global regular expression. Each match contains the matched value, its position, and the matched captures.

It is particularly useful in combination with named capture groups:

const text = "Let's match one:1 and let's also match two:2.";
const regexp = /match\s(?<word>\w+):(?<digit>\d)/g;

for (const match of text.matchAll(regexp)) {
    console.log(match);
}

The above example code has the following output:

[
  'match one:1',
  'one',
  '1',
  index: 6,
  input: "Let's match one:1 and let's also match two:2.",
  groups: { word: 'one', digit: '1' }
]
[
  'match two:2',
  'two',
  '2',
  index: 33,
  input: "Let's match one:1 and let's also match two:2.",
  groups: { word: 'two', digit: '2' }
]

2021 is around the corner. With the above 3 JavaScript features, you can make coding more enjoyable today. And more JS awesomeness is coming in 2021 🚀

Comments

[John Beech]

Awesome, I always wondered about the alternative to || for boolean false; ?? should become much more common place in future code bases. Optional chaining will be wonderful; and matchAll just feels like cheating, brilliant stuff.

[Phong Duong]

Great post. Thank you for letting me know that I can name the group in regex.

[Joao Polo]

Simply awesome! I knew and used only the first tip.