
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


Opening and merging P42 pull requests to upgrade a repository is only the first step in maintaining a modern codebase.
It is equally important to make sure that the new code follows best practices as well.

P42 now makes this easier by **reporting check results for new commits directly in GitHub**.
You can enable commit checks per analysis:

![Enable P42 Commit Checks](/image/blog/check-your-github-commits-with-p42/enable-p42-commit-checks.png)

A great time for this is when there are no further P42 suggestions,
e.g., after merging a P42 pull request.
At this point, the checks will pass, and any future regression will be visible in GitHub.

Once the commit checks are enabled, they will run on new commits to the default repository branch:

![GitHub Checks Passing](/image/blog/check-your-github-commits-with-p42/p42-github-checks-passing.png)

When there are suggestions, the checks are marked as failed.
The check details then contain more information about the refactoring and the suggestions,
including diffs.

The P42 commit check integration into GitHub makes it easy for you to know about any modernization
regressions in your code. Give it a try!

P42 analyzes your commits and reports the results as checks in GitHub.

Check Your GitHub Commits with P42


Pull requests are central to many developers' workflows, both in open source projects and in companies.
As part of pull requests, **code reviews can improve the quality of new or changed code**, and the reviewers can
reject potentially problematic changes.

In code reviews, many different kinds of issues need attention. There are software design concerns, such as checking
if the pull request fits into the existing architecture. There are software quality concerns, such as verifying
that the code is correct. And there are stylistic and project standard concerns, such as checking if the code follows
project and team guidelines.

Project standards and guidelines are important for teams to work effectively together.
However, looking for them takes up review time with work that often feels boring and mechanical.

To help developers focus on deeper software design and architecture issues, **P42 reviews pull requests for code
modernizations**. Once you [enable commit checks](/blog/check-your-github-commits-with-p42),
P42 analyzes the code added or changed in the pull request and reports
the results as GitHub checks. Ensuring that your code stays modernized has never been so easy!

![P42 Pull Request Checks on GitHub](/image/blog/p42-reviews-github-pull-requests/p42-pull-request-checks.png)


P42 reviews GitHub pull requests and checks for code modernizations.

GitHub Pull Request Review with P42 Checks


Over the past months, the P42 functionality has grown considerably with many new features such as
[commit checks](/blog/check-your-github-commits-with-p42),
[pull request reviews](/blog/p42-reviews-github-pull-requests), and improved error reporting. The
expanded capabilities mean that there is more to understand and configure now, so we wrote it up for you
in detail.

You can now **learn about how P42 works and how to use it in our [documentation](/documentation)**.
The [P42 documentation](/documentation) covers
[general concepts](/documentation/get-started),
the [P42 workflow](/documentation/how-p42-works),
[setup and installation](/documentation/setup),
the [overview](/documentation/repositories-page),
[repository](/documentation/repository-page) and
[analysis](/documentation/analysis-page) pages,
and the [GitHub checks integration](/documentation/commit-checks).

Pages with dedicated documentation show a **help icon** with a question mark in the top right corner.
Clicking it will bring you to the relevant documentation.

Each analysis, e.g., "[Use Arrow Functions](/playground/arrow_function)," comes with its own documentation that explains what it
is for, how it works, and what to consider.
The **analysis documentation** links to more resources, helping you to learn and become a better
JavaScript developer while using P42.

Check out our documentation and explore the P42 features!

Over the past months, the P42 functionality has grown considerably with many new features such as commit checks, pull request reviews, pull request updates, and improved error reporting. The expanded capabilities mean that there is more to understand and configure now, so we wrote it up for you in detail.

Learn How P42 Works


[P42 for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) is now available in the Visual Studio Marketplace. 
The **free extension includes all refactorings and code modernizations** that are available in P42. It can be used on all repositories and runs entirely locally.
 
When you open a JavaScript or TypeScript file, P42 will automatically detect code that could be modernized and highlight it:

![P42 for Visual Studio Code example highlight](/image/blog/p42-for-visual-studio-code/example.png)

You can then effortlessly update your code using the Quick Fix function. 
 
With P42 for Visual Studio Code, you can learn new JavaScript patterns right in your IDE, make sure new code follows best practices, and modernize older code gradually.
 
**[Try out P42 for Visual Studio Code today!](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)**

P42 for Visual Studio Code is now available in the Visual Studio Marketplace.

Blog

P42 for Visual Studio Code

Learn How P42 Works

GitHub Pull Request Review with P42 Checks

Check Your GitHub Commits with P42

P42 Now Supports Modernizing Private GitHub Repositories

3 JavaScript Features From 2020 That Will Make Your Life Easier