3 JavaScript Features From 2020 That Will Make Your Life Easier
Tags: webdev, javascript
Published: 2020-12-30 18:23:20

JavaScript is getting better every year. In 2020 there was, well, the [ES2020 standard](https://www.ecma-international.org/ecma-262/). 

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 🚀