DEV Community

loading...
Cover image for 3 JavaScript Features From 2020 That Will Make Your Life Easier

3 JavaScript Features From 2020 That Will Make Your Life Easier

lgrammel profile image Lars Grammel Originally published at p42.ai ・2 min read

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)
Enter fullscreen mode Exit fullscreen mode

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 `||`
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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' }
]
Enter fullscreen mode Exit fullscreen mode

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 🚀

Discussion

pic
Editor guide
Collapse
johnbeech profile image
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.

Collapse
phongduong profile image
Phong Duong

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

Collapse
joaozitopolo profile image
Joao Polo

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