
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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
[
  '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 🚀

Optional chaining, the nullish coalescing operator, and string.matchAll explained with examples.

3 JavaScript Features From 2020 That Will Make Your Life Easier


Keeping up to date with the latest JavaScript features and best practices helps you
maintain a clean, modern codebase that's enjoyable to work with.
P42 makes it easy to upgrade existing repositories, so you don't have to spend hours
laboriously refactoring your code.

While we love open source and P42 is free for open source repositories,
most code is not public. To make things worse, the struggle to upgrade
private repositories is often much greater than for open source repositories.

**Good news**: P42 now supports private GitHub repositories!

With the new Personal and Business pricing plans,
you can modernize the JavaScript and TypeScript code in your private GitHub repositories.
The Personal plan is for individual accounts, and the Business plan is for organization accounts.
All P42 refactorings and codemods are available in both the Personal and the Business plan.

To learn more, check out our **[pricing page](/pricing)**. You can buy the plans
inside P42 on your account plan page. If you have any questions about the new plans,
please reach out to us at [contact@p42.ai](mailto:contact@p42.ai).

Happy refactoring!


With the new P42 Personal and Business plans, you can modernize the JavaScript and TypeScript code in your private GitHub repositories.

P42 Now Supports Modernizing Private GitHub Repositories


With P42, you can create pull requests to merge modernization suggestions into your repository.

Sometimes, when you have an open pull request, new recommendations can be found when your code changes - for example, when you merge other pull requests.
Or you might have excluded some suggestions that don't match your expectations.
In those cases, your pull request is out of sync with the suggestions.

P42 automatically **detects new or outdated suggestions** in a pull request and allows you to **update it with a single button click**.
That means you have fewer merge conflicts and don't need to create several pull requests for the same refactoring, saving you valuable time and helping you modernize your codebase even faster!


P42 now detects new or outdated suggestions in a pull request and allows you to update it with a single button click.

P42 Blog