
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 Team pricing plans,
you can analyze the JavaScript and TypeScript code in your private GitHub repositories.
The Personal plan is for individual accounts, and the Team plan is for organization accounts.
All P42 refactorings and codemods are available in both the Personal and the Team plan.

To learn more, check out **[P42 for GitHub](/p42-for-github)**. 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 Team plans, you can analyze the JavaScript and TypeScript code in your private GitHub repositories.

P42 Now Supports Analyzing Private GitHub Repositories


Modernizing the code in your JavaScript 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/2021-03-09-check-your-github-commits-with-p42/enable-p42-commit-checks.png)

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

![GitHub Checks Passing](/image/blog/2021-03-09-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/2021-03-09/check-your-github-commits-with-p42),
P42 for GitHub 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/2021-03-23-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 Commit Checks


> 💡&nbsp;&nbsp;This blog post is about P42 JS Assistant v0.0.3

[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/2021-06-23-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.

P42 for Visual Studio Code


> 💡&nbsp;&nbsp;This blog post is about P42 JS Assistant v1.24

Visual Studio Code is an excellent editor for JavaScript and TypeScript that already contains many refactorings, e.g., rename and extract function.

The **[P42 JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)** supercharges VS Code with an additional 32 refactorings and code actions.
The P42 refactorings cover three main areas:
- A. **Code Restructuring**: Refactorings that change statements and expressions.
- B. **Conditionals**: Refactorings that change or simplify conditionals and conditional-related constructs.
- C. **Code Modernization**: Refactorings that upgrade existing code to [language features introduced in newer ECMAScript versions](https://yagmurcetintas.com/journal/whats-new-in-es2022).

The P42 refactorings are available as quick fixes (Mac: `CMD + .`, Windows: `CTRL + .`) and in the refactoring context menu (`CTRL + SHIFT + R`).

P42 is early in its development and does not cover class-level or multi-file refactorings yet.
If you want to provide feedback, e.g., which refactorings or functions you'd like to see in P42, or if you'd like to receive updates,
you can find us on [Twitter @p42ai](https://twitter.com/p42ai) or [LinkedIn](https://www.linkedin.com/company/p42-software/).

Here is a visual example for each refactoring in action:

## A. Code Restructuring

### 1. Inline Const
Inline the value of a const declaration into its references and remove the declaration.

![Inline const](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-inline-variable.gif)

### 2. Extract Const
Extract (multiple) occurrences of an expression to a const in the enclosing block scope.

![Extract const](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-extract-const.gif)

### 3. Extract Substring to Const
Extract the selected part of a string literal into a const.

![Extract substring to const](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-extract-substring-to-variable.gif)

### 4. Inline Return Statement
Inline returned variable that is assigned in if-else or switch statements into return statements.

![Inline return](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-inline-return.gif)

### 5. Push Operator into Assignment
Move the operator from a binary expression into an assignment when possible.

![Push Operator into Assignment](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-push-operator-into-assignment.gif)

### 6. Pull Operator out of Assignment
Move the operator out of an operator assignment expression (e.g., `+=`) into a regular binary expression.

![Pull Operator out of Assignment](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-pull-operator-out-of-assignment.gif)

### 7. Convert for Loop to for..of Loop
Converts a regular `for` loop into a `for...of` loop and removes the index variable.

![Convert for Loop to for..of Loop](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-for-of-loop.gif)

### 8. Convert for Loop to forEach Loop
Converts a regular `for` loop into a `.forEach()` loop and removes the index variable.

![Convert for Loop to forEach() Loop](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-for-each-loop.gif)

### 9. Convert If-Else to Guard Clause
Change if-statements which return from a function into guard clauses.

![Convert If-Else to Guard Clause](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-guard-clause.gif)

### 10. Surround Statements with Try...Catch
Wrap one or more statements in a `try..catch` block.

![Surround Statements with Try...Catch](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-surround-with-try-catch.gif)

### 11. Split Variable Declaration
Split combined variable declaration into separate variable declarations.

![Split Variable Declaration](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-split-variable-declaration.gif)

### 12. Collapse into Shorthand Notation
Collapse object properties into shorthand notation.

![Collapse into Shorthand Notation](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-collapse-into-shorthand-property-name.gif)

### 13. Expand Shorthand Property
Expand a shorthand notation into the full notation.

![Expand Shorthand Property](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-expand-shorthand-property.gif)

## B. Conditionals
### 14. Invert Condition
Invert the condition of if-else statements and conditional expressions (and flip the content).

![Invert Condition](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-invert-condition.gif)

### 15. Flip Operator
Swap the argument order of a commutative binary operator (and update the operator when needed, e.g. when flipping `<` to `>=`).

![Flip Operator](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-flip-operator.gif)

### 16. Push Down Not Operator
Pushes the `!` (not operator) into `&&`, `||`, `!=`, `!==`, `==`, `===`, `<`, `<=`, `>`, `>=` binary expressions.

![Push Down Not Operator](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-push-down-not-operator.gif)

### 17. Merge Nested If
Merge an `if`-statement inside another `if` statement into a single `if` statement with a `&&` condition.

![Merge Nested If](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-merge-nested-if.gif)

### 18. Merge Nested Else-If
Merge an `if`-statement inside an else statement into an `else if`.

![Merge Nested Else-If](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-merge-nested-else-if.gif)

### 19. Convert to '== null' Check
Convert a strict equality check against `null` and `undefined` into an equivalent `== null` check.

![Convert to '== null' check](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-eq-eq-null.gif)

### 20. Combine Return Statements with Conditional
Convert an `if`-`else` statement with `return` into a conditional.

![Combine Return Statements with Conditional](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-return-ternary.gif)

## C. Code Modernization

### 21. Add numeric separators
Adds '\_' separator to decimal, hex, binary, octal and big int literals (ES2021).

![Add Numeric Separators](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-add-numeric-separator.gif)

### 22. Assign Defaults with Nullish Coalescence
Shorten default value assignments with nullish coalescing operator (ES2020).

![Assign Defaults with Nullish Coalescence](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-nullish-coalescing-operator.gif)

### 23. Convert to Optional Chain Expression
Converts a chain of nullish or falsy checks into an optional chaining expression (ES2020).
VS Code supports this refactoring already for some cases (e.g. `x && x.a`).
P42 adds support for additional chaining constructs.

![Convert to Optional Chain Expression](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-optional-chaining.gif)

### 24. Convert Math.pow to Exponentation Operator
Convert `Math.pow(...)` expression to use the `**` exponentiation operator (ES2016).

![Convert Math.pow to Exponentation Operator](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-math-pow-to-exponentiation.gif)

### 25. Convert Var to Let and Const
Converts `var` declarations to `let` and `const` (based on their usage) (ES2015).

![Convert Var to Let and Const](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-block-scoped-variable.gif)

### 26. Convert Function to Arrow Function
Convert function expressions into arrow functions (ES2015).
VS Code itself also supports this refactoring.

![Convert Function to Arrow Function](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-arrow-function.gif)

### 27. Convert to Object Method
Convert property assignments with functions to method declarations (ES2015).

![Convert to Object Method](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-object-method.gif)

### 28. Use Default Parameters
Convert default value assignments to parameter default values (ES2015).

![Use Default Parameters](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-default-parameter.gif)

### 29. Use Template Literals
Convert string concatenation to template literals (ES2015).
VS Code itself also supports this refactoring.
The P42 version adds support for a few additional cases, such as pure string concatenation.

![Use Template Literals](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-template-literal.gif)

### 30. Use String.startsWith
Convert check of the first string character to `String.startsWith()` (ES2015).

![Use String.startsWith](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-string-starts-with.gif)

### 31. Use String.endsWith
Convert check of the last string character to `String.endsWith()` (ES2015).

![Use String.endsWith](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-string-ends-with.gif)

### 32. Convert .apply() to Spread Operator
Convert `.apply()` calls to use the spread operator (`...`) (ES2015).

![Convert '.apply()' to Spread Operator](/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-spread-operator.gif)

You can find the
**[P42 JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)**
in the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor).

Happy refactoring!

The P42 JS Assistant adds 32 refactorings for JavaScript and TypeScript to Visual Studio Code.

Supercharge VS Code with 32 JavaScript Refactorings

**Nested if-else statements can make it unnecessarily complicated to reason about the different executions paths and results of a function**. A loss of productivity and the introduction of bugs due to misunderstandings can be the outcome.

The refactoring "[Replace Nested Conditional with Guard Clauses](https://refactoring.com/catalog/replaceNestedConditionalWithGuardClauses.html)" from Martin Fowler's book "[Refactoring - Improving the Design of Existing Code (2nd Edition)](https://martinfowler.com/articles/refactoring-2nd-ed.html)" can help in those situations.

A **guard clause** checks for a condition and returns from the function if the condition is true, potentially doing some computation and returning a result. It makes it easier to reason about the function by ending one execution path early.

Here is an example function (from [Replace Nested Conditional with Guard Clauses](https://refactoring.com/catalog/replaceNestedConditionalWithGuardClauses.html), Martin Fowler) before refactoring:

```javascript
function getPayAmount() {
  let result;
  if (isDead)
    result = deadAmount();
  else {
    if (isSeparated)
      result = separatedAmount();
    else {
      if (isRetired)
        result = retiredAmount();
      else
        result = normalPayAmount();
    }
  }
  return result;
}
```

In this example, three nested if-else statements check different conditions (e.g., `isSeparated`) and update a variable `result`. The variable is returned at the end of the function.

The goal is to refactor the function into the following version:
```javascript
function getPayAmount() {
  if (isDead) return deadAmount();
  if (isSeparated) return separatedAmount();
  if (isRetired) return retiredAmount();
  return normalPayAmount();
}
```

The refactored function uses guard clauses instead of nested if-else statements. The variable `result` is not necessary anymore and has been removed. The refactored code is easier to understand because there is less state (no variable) and each execution path returns early.

**How can the original function be refactored step-by-step?**

You can simplify the original code by applying two refactorings to each condition:

- **[Inline return](https://p42.ai/documentation/code-assist/inline-return)** converts a variable assignment to a return statement. Such a conversion is possible when the following statement after the assignment in the control flow returns the variable.
- **[Convert if-else to guard clause](https://p42.ai/documentation/code-assist/convert-if-else-to-guard-clause)** changes an if-else statement with `return` statements inside into to guard clauses, removing the indentation around the else block.

You can carry out these steps manually or with automation. The [P42 JS Assistant for VS Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) is a refactoring tool that supports both operations. P42 indicates improvement opportunities with blue squiggly underlines. **With refactoring automation, the code can be improved in a matter of seconds**. After a final formatting step, the function has been refactored into the simplified version.

Here is how refactoring the code looks like in VS Code with P42:
> 💡&nbsp;&nbsp;This blog post is showing P42 JS Assistant v1.29

![Refactor "Replace Nested Conditional with Guard Clauses" Example](/image/blog/2021-09-29-javascript-refactoring-in-action-replace-nested-if-else-with-guards/refactor-fowler-replace-nested-conditional-with-guard-clauses.gif)

Refactoring is essential for maintaining a healthy codebase, and many small improvements go a long way.
By introducing guard clauses, you can often simplify nested if-else statements and make your codebase a little bit better.

Happy refactoring!

How to refactor a function with nested conditionals.

JavaScript Refactoring: Replace Nested If-Else with Guards


A team retrospective is a meeting at the end of a sprint, project, or milestone where the **team reflects on the past work cycle and identifies improvements**. It involves celebrating achievements to raise the team spirit, gathering feedback on challenges, and planning how to execute better in upcoming sprints or projects. Retrospectives are essential for continuous improvement and team growth.

Retrospective meetings are **structured to facilitate team discussions and beneficial outcomes**. They usually start with an introduction, then input from each team member is gathered, presented, and discussed, and finally, the next steps are determined. Gathering input usually happens in parallel. Guided by the questions of a retrospective format, each team member writes up their thoughts on sticky notes and puts them on a whiteboard (or the digital equivalent in remote meetings).

I've had the opportunity to participate in, facilitate and experiment with several retrospective formats.
Some formats are better for **regular occurrences**, e.g., at the end of sprints, and others can be great to **mix things up**, e.g., after finishing a large project.
Here are my thoughts on and experiences with seven retrospective formats that you can use regularly:

## The Standard
- What went well? 
- What did not go well? 
- What can we improve? 

The standard format covers the main areas (positives, negatives, and improvements) with **solid questions** and is **easy to understand**. However, it **can get boring** over time, and a tendency to focus on negative experiences and improvements can cause **celebrations** to **fall short**.

## The Standard with Token of Appreciation
- What went well? 
- What did not go well? 
- What can we improve?
- Who do you appreciate for their contributions?

A variant of the Standard retrospective that helps **appreciate the team and its achievements** is the token of appreciation.
In addition to the three questions, every team member can call out others for their contributions. They would then receive a token of appreciation (e.g., a flower or chocolate) and positive feedback from the team. This variant can help **make the standard retrospective more positive and strengthen the team spirit**.

## Start-Stop-Continue 
- What should we start?
- What should we stop?
- What should we continue?

Start-Stop-Continue is another widespread retrospective format.
It is very **solution-oriented** and **focuses on changes** in the form of starting and stopping activities.
Positives and negatives are discussed for that purpose when needed.

The strength of Start-Stop-Continue is that it aims in on changes and leaves room for bringing in new ideas. 
However, this retrospective format **might not go deeply into causes and problems**, which may or may not be desired.
Another drawback is that celebration and appreciation are not a direct part of this format.

## Starfish
- What should we start?
- What should we do more?
- What should we continue?
- What should we do less?
- What should we stop?

The [Starfish retrospective](https://www.funretrospectives.com/starfish/) is an **extension of Start-Stop-Continue**.
It adds the "What should we do more?" and "What should we do less?" questions that often come up. 
Typically it is represented by splitting the whiteboard into five areas (the starfish), and the team members put up their sticky notes in the corresponding regions.

While the Starfish retrospective improves on Start-Stop-Continue, it still **lacks in the problem and appreciation areas**. In addition, having to categorize ideas into do less vs. stop upfront is often not helpful.

## 4L
- What did you like? 
- What have you learned? 
- What was lacking? 
- What did you long for? 

The [4L retrospective](https://conceptboard.com/blog/4l-retrospective-technique/) is **more positive** than the Standard retrospective, and it **encourages knowledge sharing** through the "What have you learned?" question.

In practice, the difference between "lacking" and "long for" is relatively small and unclear, and there is a [3L retrospective](https://www.funretrospectives.com/the-3-ls-liked-learned-lacked/) that leaves out the "What did you long for?" question.

## Mad-Sad-Glad
- What made you mad?
- What made you sad?
- What made you happy?

The Mad-Sad-Glad retrospective format uses the **team members' emotions** to draw out problems, identify positives, and build team cohesion that way. Mad-Sad-Glad can work well when used on occasion.

However, when used every cycle, it **can lead to repeated venting and frustrations**, especially when some of the issues that make team members unhappy are outside the team's control and not easily changeable. In this case, the team might focus on their negative emotions more than on improving things under their control.

## Happy-Discuss-Improve 
- What was I happy with?
- What ideas and topics would I like to discuss?
- What do I think needs to be improved?

The Happy-Discuss-Improve retrospective is a format that my team and I came up with after experiences with the above formats. It creates a **positive atmosphere of appreciation, improvement, and openness** needed to bring in new ideas and discuss problems. Wording the questions from the "I" perspective emphasizes that everyone has their own viewpoints and supports a balanced discussion. 

Overall we were very happy with this format. It worked well for remote retrospectives. One possible enhancement to Happy-Discuss-Improve could be to add a token of appreciation.

There are many retrospective formats to chose from. I hope this blogpost gave you some ideas for new formats that you can try in your own retrospectives.

7 team retrospective formats and their advantages and drawbacks.

7 Formats for Great Team Retrospectives

**The conventional wisdom is that you should have good test coverage before refactoring your code.** Making mistakes during refactoring will introduce defects in the software if they are not caught during testing. Such regression defects can annoy users, break the software and even lead to customers abandoning the product.

The need for automated testing is especially high for JavaScript. In a dynamic language with functional constructs like JavaScript, it is harder to detect breakages statically. Additionally, JavaScript has [many](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment#description) [language](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) [details](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table) and [quirks](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#a_model_for_understanding_equality_comparisons) that are not well known or easy to remember.

In practice, however, there is a chance that **you will encounter situations where you need to work in untested or insufficiently tested legacy code**. Often this is precisely the kind of code that would benefit from refactoring to make it easier to understand and extend. But to test it, we need to make it testable, which involves refactoring.

How do we resolve this problem? If we take a step back, the underlying question that automated testing helps us answer is a question of confidence and risk:

**How confident am I that my refactoring has not changed the program behavior?**

Tests help us answer the question, but there is a chance that refactoring introduces bugs when there are gaps in test coverage. Therefore the answer to the question is a matter of degree, even with tests.

Another approach is taking a sequence of small steps. If we are confident that each step is correct, the final result is correct since no step changes the program behavior. **Ideally, taking small, low-risk steps is combined with excellent test coverage, leading to high confidence.**

However, significant changes, a more complex programming language like JavaScript, and complex legacy codebases lead to a high risk that individual steps introduce defects. In particular, refactorings that span module or service boundaries, large-scale renames where not every symbol occurrence might get picked up, or extensive manual changes tend to be error-prone.

But **for single functions, classes or modules, it can be possible to chain together sequences of automated refactorings to achieve a more extensive refactoring**. However, most refactoring tools ensure that the refactoring mechanics are correctly executed, but they do not tell you about the impact on your code.

I wanted a refactoring tool with built-in knowledge of many hard-to-remember JavaScript details that can analyze the relevant code to evaluate the safety of a refactoring. With this in mind, I created the **[P42 JS Assistant for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)**. When possible, P42 evaluates the refactoring impact on the logic and the flow of your code (excluding performance) and informs you if it is safe or if specific details need checking.

Here is an example of how P42 indicates the safety of small refactoring steps:

> 💡&nbsp;&nbsp;This blog post shows P42 JS Assistant v1.46

![P42 Refactoring Example](/image/blog/2021-10-24-can-you-refactor-javascript-safely-without-test-coverage/example.gif)

With automatic refactoring tools such as P42 that combine static analysis of the relevant source code with extensive knowledge of the programming language, it is possible to refactor code more safely. **In combination with automated testing and type checking tools like [TypeScript](https://www.typescriptlang.org/), this makes it possible to refactor with high confidence even in a dynamic language like JavaScript.**

Happy Refactoring!

The conventional wisdom is that you should have good test coverage before refactoring your code...

Can You Refactor JavaScript Safely Without Test Coverage?


Code reviews and pull requests are essential for many teams to increase code quality and transfer knowledge. However, it is often tedious for reviewers to comment on minor issues such as readability and style. 

**[P42 for GitHub](/p42-for-github) automatically reviews the readability and style of your commits and pull requests** and suggests improvements and modernization opportunities. This automation frees up reviewers' time to check for potential bugs and the overall correctness of the pull request.

Starting November 2021, P42 for GitHub has several additional code review features:

## Inline Comments
P42 now shows hints directly in your diffs, so you can easily see them when reviewing the code. 
[Learn more...](/documentation/code-review#inline-comments)

![Inline Comments](/image/blog/2021-11-16-p42-code-review-inline-comments-and-hints/inline-comments.png)

## Enhanced Code Review Report
The code review report that is part of the GitHub checks distinguishes between old and new suggestions for default branch commits, contains additional explanations, and lists annotations. [Learn more...](/documentation/code-review#code-review-report)

## Hint and Blocker Setting for Code Actions
You can configure each [P42 code action](/documentation/code-assist) as either a hint (default) or blocker on the repository page. Hints leave messages on your pull requests, but do not fail the overall check. [Learn more...](/documentation/repository-page#configuration)

![Hint and Blocker Setting for Code Actions](/image/blog/2021-11-16-p42-code-review-inline-comments-and-hints/code-review-hint-blocker.png)

Code reviews for pull requests and default branch commits can now be [enabled with a single click](/documentation/repository-page#elements) for existing repositories. Code reviews for new repositories are enabled by default.

P42 for GitHub has several new code review features: inline comments, hint settings for code actions, and enhanced reports.

P42 Code Review: Inline Comments and Hints

In JavaScript, **short-circuiting refers to the partial evaluation of expressions to avoid unnecessary computation**. This blog post describes the short-circuiting operators and assignments in JavaScript and how to use them.

## Short-Circuiting Operators: &&, ||, and ??

Short-circuiting operators only evaluate the right side of an expression when necessary. 

For example, for the logical AND operator `&&`, when the left side of the operator is false, the right side of the operator will not change the result. The result is false regardless of whether the right side is true or false. Therefore JavaScript skips the evaluation of the right side and uses the value from the left side.

There are three short-circuiting binary operators in JavaScript:
* **[Logical AND](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)** (`A && B`): `B` is only evaluated if `A` is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
* **[Logical OR](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR)** (`A || B`): `B` is only evaluated if `A` is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
* **[Nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)** (`A ?? B`): `B` is only evaluated if `A` is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish).

`A` and `B` can be any expression. Their evaluation might invoke function and getter calls that can contain complex calculations or have side effects.
Because `A` and `B` can return any value, the three short-circuiting operators evaluate and return any value, not just booleans.

This means that you can use the short-circuiting operators for **providing defaults** (`||` and `??`), for checking nullish values (`&&`, before the optional chaining operator `?.` was available), and for **[conditional rendering in React](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator)** (`&&`).

```javascript
// default values
a = a || 123; // assigns 123 to a if a is falsy
b = b ?? 123; // assigns 123 to b if b is nullish

// optional chaining with && ( .? is a modern alterative)
if (obj.m != null && obj.m() === '123') {
   // ...
}

// React: conditional rendering
return <>  
  {user != null &&
    <div>Welcome back, ${user.name}!</div>
  }
<>;
```

## Short-Circuiting Assignments: &&=, ||=, and ??=

**With [ES2021](https://h3manth.com/ES2021/), you can use short-circuiting operators in assignment expressions** (`&&=`, `||=`, and `??=`). Short-circuiting assignments are only carried out when the current variable or property value does not trigger short-circuiting. This behavior can help avoid unnecessary updates.

Here is an example(`-Infinity` is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)):
```javascript
let a = 3;
let b = 3;
let c = 0;
let d = 0;

a &&= -Infinity;
b ||= -Infinity;
c &&= -Infinity;
d ||= -Infinity;

console.log(a); // -Infinity
console.log(b); // 3 (short-circuiting ||, because 3 is truthy)
console.log(c); // 0 (short-circuiting &&, because 0 is falsy)
console.log(d); // -Infinity
```

## Refactoring Assignments with Short-Circuiting Operators

Short-circuiting assignments look very similar to regular assignments with short-circuiting operator expressions.
One might think that they can be refactored as follows without changing the behavior:
```javascript
a = a && x; /* becomes */ a &&= x;
a = a || x; /* becomes */ a ||= x;
a = a ?? x; /* becomes */ a ??= x;
```

However, when I was developing the safety evaluation for the 
'[Push Operator into Assignment](/documentation/code-assist/push-operator-into-assignment)' and 
'[Pull Operator Out of Assignment](/documentation/code-assist/pull-operator-out-of-assignment)'
refactorings in [P42](/), 
I discovered that those refactorings can lead to behavioral changes in some situations.

Consider the following example:
```javascript
class C {
  constructor(name) {
    this.name = name;
  }
  
  get x() {
    return this._x;
  }
  
  set x(value) {
    console.log(`set ${this.name}.x to ${value}`);
    this._x = value;
  }
}
```

```javascript
// nullish coalescing operator
const a = new C("a");
a.x = a.x ?? 3;
a.x = a.x ?? 4;
console.log(a.x)
```

```javascript
// nullish assignment 
const b = new C("b");
b.x ??= 3;
b.x ??= 4;
console.log(b.x)
```

Surprisingly, moving the operator into the assignment changes what operations are executed:

```javascript
// output for nullish coalescing operator
"set a.x to 3"
"set a.x to 3"
3
```
```javascript
// output for nullish assignment 
"set b.x to 3"
3
```

While these minor differences won't matter most of the time, it's good to be aware of them for two reasons:
* they can cause breakages during refactoring because they change existing behavior
* they can be beneficial to reduce the number of operations in performance hotspots

## Summary

Short-circuiting operators in JavaScript (`&&`, `||`, `??`) evaluate their right-hand side expression only when necessary.
Their assignment equivalents (`&&=`, `||=`, `??=`) only update a value when the current value would 
cause the execution of the right side of the short-circuiting operator.

JavaScript short-circuiting operators and assignments and how to use them.

Short-Circuiting in JavaScript


**Executing many automated refactorings in a row is a powerful way to improve your code quickly**.
The advantage of this approach over manual refactoring is that it is less likely to introduce bugs and that it can often be faster with the right keyboard shortcuts.
However, it is a bit of an art to chain refactorings, as it can involve unintuitive actions to enable further steps.

This blog post shows an example of how to **simplify a small JavaScript function in a series of 12 automated refactorings** without changing its behavior.
I'll be using [Visual Studio Code](https://code.visualstudio.com/) and the [P42 JS Assistant refactoring extension](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor).

> 💡&nbsp;&nbsp;This blog post uses P42 JS Assistant v1.55

Initially, the function (from this [blog post](https://dev.to/luigizaccagnini/refactoring-code-in-octo-3397)) looks at follows:
```javascript
const lineChecker = (line, isFirstLine) => {
  let document = ``;

  if (line !== "" && isFirstLine) {
    document += `<h1>${line}</h1>`;
  } else if (line !== "" && !isFirstLine) {
    document += `<p>${line}</p>`;
  } else if (line === "") {
    document += "<br />";
  }

  return document;
};
```

After refactoring, the function is much shorter and easier to comprehend:
```javascript
const lineChecker = (line, isFirstLine) => {
  if (line === "") {
    return `<br />`
  }

  return isFirstLine ? `<h1>${line}</h1>` : `<p>${line}</p>`;
};
```

Here are the steps that I took to refactor the function:

## Simplify Control Flow and Remove Variable

The first refactorings eliminate the document variable and simplify the control flow.
This change makes it easier to reason about the function because there is less state (i.e., no document variable) and several execution paths return early.

1. **Pull out the `+` from the `+=` assignments into regular string concatenation**.
   This step enables the introduction of early return statements in the next step.
1. **Replace re-assigning the `document` variable with early return statements.**
   This step simplifies the control flow and enables inlining the `document` variable.
1. **Inline the `document` variable**.
   This step removes an unnecessary variable and enables the removal of the empty string literals in the next step.
1. **Remove empty string literals by merging them into the templates.**

After applying these steps, the function looks as follows:
```javascript
const lineChecker = (line, isFirstLine) => {
  if (line !== "" && isFirstLine) {
    return `<h1>${line}</h1>`;
  } else if (line !== "" && !isFirstLine) {
    return `<p>${line}</p>`;
  } else if (line === "") {
    return `<br />`;
  }

  return ``;
};
```

![Simplify Control Flow and Remove Variable](/image/blog/2021-12-01-simplifying-a-javascript-function-with-12-automated-refactorings/simplify-control-flow-and-remove-variable.gif)

## Simplify Conditions and Remove Code

The next goals are to simplify the conditions in the if statements and to remove dead or unnecessary code. This change further reduces the complexity of the function and makes it easier to comprehend because there is less code and the conditions are simpler.

1. **Separate `isFirstLine` condition into nested if statement.**
1. **Pull up negation from `!==`.** These two steps prepare the removal of the redundant else-if condition.
1. **Remove redundant condition on else-if** because it is always true. After removing the redundant else-if condition, it becomes clear that the final `return` statement is unreachable.
1. **Remove unreachable code.** Unreachable code is useless and consumes some of our attention without benefit. It is almost always better to remove it.
1. **Push negation back into `===`.** This refactoring reverts a previous step that was temporarily necessary to enable further refactorings.
1. **Invert `!==` condition and merge nested if.** The resulting `line === ""` condition is easier to understand because there is no negation. Even better, it enables lifting the inner if statement into an else-if sequence and indicates that the empty line handling might be a special case.

After applying these steps, the function looks as follows:
```javascript
const lineChecker = (line, isFirstLine) => {
  if (line === "") {
    return `<br />`;
  } else if (isFirstLine) {
    return `<h1>${line}</h1>`;
  } else {
    return `<p>${line}</p>`;
  }

};
```

![Simplify Conditions and Remove Code](/image/blog/2021-12-01-simplifying-a-javascript-function-with-12-automated-refactorings/simplify-conditions-and-remove-code.gif)

## Improve Readability

The last set of refactorings aims to improve the readability by moving the special case `line === ''` into a guard clause and using a conditional return expression.

1. **Convert `line === ''` condition into guard clause.**
1. **Simplify return with conditional expression.**
1. **Format**, e.g., with [Prettier](https://prettier.io/) on save.

Here is the final result:
```javascript
const lineChecker = (line, isFirstLine) => {
  if (line === "") {
    return `<br />`
  }

  return isFirstLine ? `<h1>${line}</h1>` : `<p>${line}</p>`;
};
```

![Improve Readability](/image/blog/2021-12-01-simplifying-a-javascript-function-with-12-automated-refactorings/improve-readability.gif)

## Additional Considerations

This blog post shows how to use automated refactorings to simplify a JavaScript function without changing its behavior. In practice, there are many additional considerations:

- **Automated Test Coverage**

  Automated testing is essential to have confidence that the refactoring did not inadvertently change the code's behavior. It is particularly crucial when there are error-prone manual refactoring steps. When there is insufficient test coverage, it is critical to add tests before refactoring code.

- **Uncovering Potential Bugs**

  Simpler code can uncover potential bugs that you can investigate after the refactoring is completed. In the example here, a `<br />` is being returned from the function even when `isFirstLine` is `true`, which might not be the intended behavior.

- **Other Refactorings**

  There are many ways to refactor the function from this blog post. I've focussed on simplifying the function, but renaming or even decomposing it are other possibilities. Check out the post "[How would you refactor this JS function?](https://dev.to/p42/how-would-you-refactor-this-js-function-4n71)" for more.

I hope this post gave you an idea of how to sequence automated refactoring steps to achieve a more significant refactoring change.

Executing many automated refactorings in a row is a powerful way to improve your code quickly.

Simplifying a JavaScript Function With 12 Automated Refactorings


When programming, we often edit text directly to achieve our goals. Such manual editing can be slow and error-prone. For behavior-preserving changes (refactorings), **automation can save you time, ensure the transformation is executed correctly, and warn about potential breakages**. You can communicate your intention, e.g., "I want to extract this expression into a variable" more directly, and let the machine figure out the details.

I've written an [extension for Visual Studio Code called P42 JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) that adds 60 automated refactorings, quick fixes, and cleanups for JavaScript and TypeScript to make your life easier. This blog post provides an overview of the different code actions and their categories.

> 💡&nbsp;&nbsp;This blog post shows P42 JS Assistant v1.64

But first, here is an example of how P42 works to give you an idea of how it can help you:

![P42 JS Assistant](/image/blog/2021-12-21-level-up-your-javascript-with-these-60-quick-fixes-for-vs-code/intro.gif)

## Core Refactorings
Visual Study Code already contains basic refactorings such as Rename and Extract Function. P42 adds additional refactorings or extended functionality such as safety checking.

* [Extract Variable](/documentation/code-assist/extract-variable)
* [Extract Substring into Variable](/documentation/code-assist/extract-substring-to-variable)
* [Inline Variable](/documentation/code-assist/inline-variable)
* [Inline into Template](/documentation/code-assist/inline-into-template)
* [Inline Return](/documentation/code-assist/inline-return)

## React Refactorings and Quick Fixes
In [React](https://reactjs.org/), components often contain [JSX](https://reactjs.org/docs/introducing-jsx.html), a syntax extension for JavaScript. P42 provides code actions that make working with JSX and React easier:

* [Extract React Function Component](/documentation/code-assist/extract-jsx-element)
* [Add {...} to JSX Attribute](/documentation/code-assist/add-braces-to-jsx-attribute) & [Remove {...} from JSX Attribute](/documentation/code-assist/remove-braces-from-jsx-attribute)
* [Collapse JSX Element](/documentation/code-assist/collapse-jsx-element) & [Expand JSX Element](/documentation/code-assist/expand-self-closing-jsx-element)
* [Surround with <>...</>](/documentation/code-assist/surround-with-jsx-fragment) & [Remove Unnecessary <>...</>](/documentation/code-assist/remove-unnecessary-jsx-fragment)

## ECMAScript Modernizations

The Javascript ecosystem is progressing rapidly, thanks to the great work of [TC39](https://tc39.es/). However, it is hard to keep codebases up-to-date with the newer JavaScript features, and codemods are not always an option due to their significant churn and potential for breakages. P42 supports both codemod-like mass code refactoring and more opportunistic code modernization for the following upgrades:

**ES2015**
* [Collapse Object Property into Shorthand](/documentation/code-assist/collapse-property-into-shorthand)
* [Convert .apply() to Use Spread Syntax](/documentation/code-assist/convert-apply-to-spread-syntax)
* [Convert Function to Arrow Function](/documentation/code-assist/convert-function-to-arrow-function)
* [Convert Function to Object Method](/documentation/code-assist/convert-function-to-object-method)
* [Convert Loop to For...Of](/documentation/code-assist/convert-loop-to-for-of)
* [Convert Var to Let & Const](/documentation/code-assist/replace-var-with-let-and-const)
* [Lift Default into Parameter](/documentation/code-assist/lift-default-into-parameter)
* [Use String.startsWith()](/documentation/code-assist/use-string-starts-with) & [Use String.endsWith()](/documentation/code-assist/use-string-ends-with)
* [Use Template Literal](/documentation/code-assist/use-template-literal)

**ES2016**
* [Convert Math.pow to Exponentiation Operator](/documentation/code-assist/convert-math-pow-to-exponentiation)
* [Use Array.includes()](/documentation/code-assist/use-array-includes)

**ES2020**
* [Use Nullish Coalescence in Default Expression](/documentation/code-assist/use-nullish-coalescence-in-default-expression)
* [Use Optional Chaining](/documentation/code-assist/use-optional-chaining)

**ES2021**
* [Add Numeric Separator](/documentation/code-assist/add-numeric-separator)
* [Push Operator into Assignment](/documentation/code-assist/push-operator-into-assignment) (for [short-circuiting](/blog/2021-11-25/short-circuiting-operators-and-assignments-in-javascript) expressions)

## Actions for Logical Expressions
Boolean logic can be challenging to read, especially as expressions get more complex. P42 provides several refactorings that can help you simplify and tease apart logical expressions to make them easier to understand:

* [Flip Operator](/documentation/code-assist/flip-operator)
* [Invert Condition](/documentation/code-assist/invert-condition)
* [Pull Up Negation](/documentation/code-assist/pull-up-negation) & [Push Down Negation](/documentation/code-assist/push-down-negation)
* [Simplify Binary Expression](/documentation/code-assist/simplify-binary-expression)
* [Remove Double Negation](/documentation/code-assist/remove-double-negation)
* [Use == null Comparison](/documentation/code-assist/use-eq-eq-null)
* [Extract Variable](/documentation/code-assist/extract-variable)
* [Use Optional Chaining](/documentation/code-assist/use-optional-chaining)

## Actions for If-Else Statements
If-else statements are a central element in many programs. Restructuring them can increase the readability of your programs, often in combination with refactoring their conditions:

* [Lift Statement Out Of If-Else](/documentation/code-assist/lift-statement-out-of-if-else)
* [Merge Nested If-Statements](/documentation/code-assist/merge-nested-if)
* [Merge Nested If Inside Else into Else-If](/documentation/code-assist/merge-nested-else-if)
* [Separate Condition into Nested If](/documentation/code-assist/separate-condition-into-nested-if)
* [Remove Empty If Block](/documentation/code-assist/remove-empty-if-block) & [Remove Empty Else Block](/documentation/code-assist/remove-empty-else-block)
* [Remove Redundant Else](/documentation/code-assist/remove-redundant-else)
* [Convert If-Else to Guard Clause](/documentation/code-assist/convert-if-else-to-guard-clause)
* [Convert Conditional Expression to If-Else](/documentation/code-assist/convert-conditional-expression-to-if-else) & [Convert If-Else into Conditional Expression](/documentation/code-assist/convert-if-else-to-conditional-expression)
* [Convert If-Else to Switch](/documentation/code-assist/convert-if-else-to-switch)

## Syntax Conversion
It is often annoying to make small syntactical changes by editing text. Often more than one position needs to be edited, and the code is broken during the edit, leading to incorrect errors and auto-completions that get in the way. You can execute the following syntax conversions with a single P42 quick fix:

* [Add {...} to Arrow Function](/documentation/code-assist/add-braces-to-arrow-function) & [Remove {...} from Arrow Function](/documentation/code-assist/remove-braces-from-arrow-function)
* [Add {...} to JSX Attribute](/documentation/code-assist/add-braces-to-jsx-attribute) & [Remove {...} from JSX Attribute](/documentation/code-assist/remove-braces-from-jsx-attribute)
* [Collapse JSX Element](/documentation/code-assist/collapse-jsx-element) & [Expand JSX Element](/documentation/code-assist/expand-self-closing-jsx-element)
* [Collapse Object Property into Shorthand](/documentation/code-assist/collapse-property-into-shorthand) & [Expand Shorthand Property](/documentation/code-assist/expand-shorthand-property)
* [Convert Property Access to Dot Notation](/documentation/code-assist/convert-bracket-notation-property-access-to-dot-notation) & [Convert Property Access to Bracket Notation](/documentation/code-assist/convert-dot-notation-property-access-to-bracket-notation)
* [Split Variable Declaration](/documentation/code-assist/split-variable-declaration)

## Convert Language Elements
Sometimes you want to switch to a language element that is a better fit for what you are doing. For example, a `for..of` loop is more concise and can replace a regular for loop in many situations.

* [Convert Conditional Expression to If-Else](/documentation/code-assist/convert-conditional-expression-to-if-else) & [Convert If-Else into Conditional Expression](/documentation/code-assist/convert-if-else-to-conditional-expression)
* [Convert Function to Arrow Function](/documentation/code-assist/convert-function-to-arrow-function) & [Convert Function to Object Method](/documentation/code-assist/convert-function-to-object-method)
* [Convert If-Else to Switch](/documentation/code-assist/convert-if-else-to-switch)
* [Convert Loop to For...Of](/documentation/code-assist/convert-loop-to-for-of) & [Convert Loop to ForEach](/documentation/code-assist/convert-loop-to-for-each)
* [Push Operator into Assignment](/documentation/code-assist/push-operator-into-assignment) & [Pull Operator Out of Assignment](/documentation/code-assist/pull-operator-out-of-assignment)
* [Convert Var to Let & Const](/documentation/code-assist/replace-var-with-let-and-const) & [Convert Let to Const](/documentation/code-assist/convert-let-to-const)

## Code Cleanups
Code cleanups remove unnecessary code. Such code can result from code churn, e.g., by applying other refactorings, adding new features, or fixing bugs. P42 shows hints and automates the cleanup for the following situations:

* [Remove Double Negation](/documentation/code-assist/remove-double-negation)
* [Remove Empty If Block](/documentation/code-assist/remove-empty-if-block) & [Remove Empty Else Block](/documentation/code-assist/remove-empty-else-block)
* [Remove Redundant Else](/documentation/code-assist/remove-redundant-else)
* [Remove Unnecessary Conditional Expression](/documentation/code-assist/remove-unnecessary-conditional-expression)
* [Remove Unnecessary Expression Statement](/documentation/code-assist/remove-unnecessary-expression-statement)
* [Remove Unnecessary JSX Fragment](/documentation/code-assist/remove-unnecessary-jsx-fragment)
* [Remove Unnecessary Template Literal](/documentation/code-assist/remove-unnecessary-template)
* [Simplify Binary Expression](/documentation/code-assist/simplify-binary-expression)

## Other Actions
* [Insert console.log for Variable](/documentation/code-assist/insert-console-log)
* [Surround with Try-Catch](/documentation/code-assist/surround-with-try-catch)

If you find these refactorings & actions useful, you can install the [**P42 JS Assistant** from the VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor).
For feedback and updates, you can find P42 on [Twitter](https://twitter.com/p42ai) or [LinkedIn](https://www.linkedin.com/company/p42-software/).

Refactoring automation can safe you time, ensure the change is executed correctly, and warn about potential breakages.

Level Up Your JavaScript With These 60 Quick Fixes for VS Code


JavaScript evolves quickly. In 2021, several [proposals](https://www.proposals.es/) have moved to Stage 4 of the [TC39 process](https://tc39.es/process-document/) and will be included in ES2022. They add the following features to JavaScript:

**Classes and Instances**
* Private instance fields, methods, and accessors
* Existence checks for private fields
* Public static class fields
* Private static class fields and methods
* Static class initialization blocks

**Module Loading**
* Top-Level `await`

**Built-in Objects**
* Error: `.cause`
* Array, String, and TypedArray: `.at()`
* Object: `.hasOwn()`
* RegExp: match `.indices` ('`d`' flag)

This blog post describes each feature, shows an example of how it can be used, and looks at current browser and Node.js support (as of December 2021). Let's get started:

## Private Instance Fields, Methods, and Accessors
Encapsulation is one of the core principles of object-oriented programming. It is usually implemented using visibility modifiers such as `private` or `public`.

**The private instance fields, methods, and accessors features \[[1](https://github.com/tc39/proposal-class-fields), [2](https://github.com/tc39/proposal-private-methods)\] add hard visibility limitations to JavaScript**. The `#` prefix marks a field, method, or accessor in a class as private, meaning that you cannot access it from outside the instances themselves.

Here is an example of a private field and method; accessors work similarly:
```javascript
class Example {
  #value;

  constructor(value) {
    this.#value = value;
  }

  #calc() {
    return this.#value * 10;
  }

  print() {
    console.log(this.#calc());
  }
}

const object = new Example(5);
console.log(object.#value);    // SyntaxError
console.log(object.#calc());   // SyntaxError
object.print();                // 50
```

[Most browsers](https://caniuse.com/mdn-javascript_classes_private_class_fields) (Dec 2021 usage: ~90%) and Node.js 12+ support private instance fields. The [support for private methods and accessors is more limited in browsers](https://caniuse.com/mdn-javascript_classes_private_class_methods) (Dec 2021 usage: ~80%). Node.js has supported the feature since version 14.6. You can [transpile your code with Babel](https://blog.saeloun.com/2021/06/24/babel-enables-class-field-and-private-methods.html) to use private class fields and methods on environments that don't directly support them.

## Existence Checks For Private Fields
Since trying to access a non-existing private field on an object throws an exception, it needs to be possible to check if an object has a given private field. **The [`in` operator can be used to check if a private field is available on an object](https://github.com/tc39/proposal-private-fields-in-in)**:

```javascript
class Example {
  #field

  static isExampleInstance(object) {
    return #field in object;
  }
}
```

The [browser support for using the `in` operator on private fields](https://caniuse.com/mdn-javascript_classes_private_class_fields_in) is limited (Dec 2021 usage: ~70%). Node.js supports the feature since version 16.4. You can [transpile usages of the `in` operator for private fields with Babel](https://babeljs.io/docs/en/babel-plugin-proposal-private-property-in-object).

## Public Static Class Fields

**[Static class fields](https://github.com/tc39/proposal-static-class-features#static-public-fields) are a convenient notation for adding properties to the class object.**

```javascript
// without static class fields:
class Customer {
  // ...
}
Customer.idCounter = 1;

// with static class fields:
class Customer {
  static idCounter = 1;
  // ...
}
```

[Most browsers](https://caniuse.com/mdn-javascript_classes_static_class_fields) (Dec 2021 usage: ~90%) and Node.js 12+ support public class fields. 

## Private Static Class Fields and Methods
Similar to private instance fields and methods, encapsulation and visibility limitations are helpful on the class level. **[The private static methods and fields feature](https://github.com/tc39/proposal-static-class-features) adds hard visibility limitations for class-level fields and methods using the `#` prefix.**

```javascript
class Customer {
  static #idCounter = 1; // static private

  static #getNextId() { // static private
    return Customer.#idCounter++;
  }

  #id; // instance private

  constructor() {
    this.#id = Customer.#getNextId();
  }

  toString() {
    return `c${this.#id}`;
  }
}

const customers = [new Customer(), new Customer()];
console.log(customers.join(' ')); // c1 c2
```

The browser and Node.js support are similar to the private instance fields and methods above.

## Static Class Initialization Blocks
Sometimes it is necessary or convenient to do more complex initialization work for static class fields. For the private static fields feature from above, this initialization must even happen within the class because the private fields are not accessible otherwise.

**The [static initializer blocks feature](https://github.com/tc39/proposal-class-static-block) provides a mechanism to execute code during the class definition evaluation**. The code in a block statement with the `static` keyword is executed when the class is initialized:

```javascript
class Example {
  static propertyA;
  static #propertyB; // private

  static { // static initializer block
    try {
      const json = JSON.parse(fs.readFileSync('example.json', 'utf8'));
      this.propertyA = json.someProperty;
      this.#propertyB = json.anotherProperty;
    } catch (error) {
      this.propertyA = 'default1';
      this.#propertyB = 'default2';
    }
  }

  static print() {
    console.log(Example.propertyA);
    console.log(Example.#propertyB);
  }
}

Example.print();
```

The [browser support for static class initialization blocks](https://caniuse.com/mdn-javascript_classes_static_initialization_blocks) is limited (Dec 2021: ~70%). Node.js supports the feature since version 16.4. You can [transpile code with static initializer blocks with Babel](https://babeljs.io/docs/en/babel-plugin-proposal-class-static-block).

## Top-Level Await
Async functions and the `await` keyword were introduced in ES2017 to simplify working with promises. However, `await` could only be used inside `async` functions.

The **[top-level `await` feature for ES modules](https://github.com/tc39/proposal-top-level-await)** makes it easy to use `await` in CLI scripts (e.g., with `.mjs` sources and [zx](https://github.com/google/zx)), and for dynamic imports and data loading. It extends the `await` functionality into the module loader, which means that dependent modules will wait for async modules (with top-level `await`) to be loaded.

Here is an example:
```javascript
// load-attribute.mjs 
// with top-level await
const data = await (await fetch("https://some.url")).text();
export const attribute = JSON.parse(data).someAttribute;
```

```javascript
// main.mjs 
// loaded after load-attribute.mjs is fully loaded
// and its exports are available
import { attribute } from "./load-attribute.mjs";
console.log(attribute);
```

Top-level await is [supported on modern browsers](https://caniuse.com/mdn-javascript_operators_await_top_level) (Dec 2021 usage: ~80%) and Node.js 14.8+. It is only available for ES modules, and [it is doubtful that CommonJS modules will ever get top-level await support](https://github.com/nodejs/node/issues/21267). Code with top-level `await` can be transpiled during the bundling phase to support older browsers, such as [Webpack 5 `experiments.topLevelAwait = true`](https://webpack.js.org/configuration/experiments/).

## Error: .cause
Errors are often wrapped to provide meaningful messages and record the error context. However, this means that the original error can get lost. Attaching the original error to the wrapping error is desirable for logging and debugging purposes.

**The [error cause feature](https://github.com/tc39/proposal-error-cause) provides a standardized way to attach the original error to a wrapping error.** It adds the `cause` option to the `Error` constructor and a `cause` field for retrieving the original error.

```javascript
const load = async (userId) => {
  try {
    return await fetch(`https://service/api/user/${userId}`);
  } catch (error) {
    throw new Error(
      `Loading data for user with id ${userId} failed`, 
      { cause: error }
    );
  }
}

try {
  const userData = await load(3);
  // ...
} catch (error) {
  console.log(error); // Error: Loading data for user with id 3 failed
  console.log(error.cause); // TypeError: Failed to fetch
}
```

The [current browser support for the error clause feature](https://caniuse.com/mdn-javascript_builtins_error_cause) is limited (Dec 2021 usage: ~70%). Node.js supports the feature since version 16.9. You can use the [error cause polyfill](https://github.com/es-shims/error-cause) to start using the feature today, even in JS environments where it is not supported.

## Array, String, and TypedArray: .at()
Getting elements from the end of an array or string usually involves subtracting from array's length, for example, `let lastElement = anArray[anArray.length - 1]`. This requires that the array is stored in a temporary variable and prevents seamless chaining.

**The [.at() feature](https://github.com/tc39/proposal-relative-indexing-method) provides a way to get an element from the beginning (positive index) or the end (negative index) of a string or an array without a temporary variable.**

```javascript
const getExampleValue = () => 'abcdefghi';

console.log(getExampleValue().at(2));    // c
console.log(getExampleValue()[2]);       // c

const temp = getExampleValue();
console.log(temp[temp.length - 2]);      // h
console.log(getExampleValue().at(-2));   // h - no temp var needed
```

[The browser support for the .at feature](https://caniuse.com/mdn-javascript_builtins_array_at) is currently limited (Dec 2021 usage: ~70%), and it is only available in Node.js 16.6+. You can use the [.at() polyfill from Core JS](https://github.com/zloirock/core-js#relative-indexing-method) in the meantime.

## Object: .hasOwn()
**The [Object.hasOwn feature](https://github.com/tc39/proposal-accessible-object-hasownproperty) is a more concise and robust way of checking if a property is directly set on an object.** It is a preferred alternative to using `hasOwnProperty`:

```javascript
const example = {
  property: '123'
};

console.log(Object.prototype.hasOwnProperty.call(example, 'property'));
console.log(Object.hasOwn(example, 'property')); // preferred
```

The [browser support is currently limited](https://caniuse.com/mdn-javascript_builtins_object_hasown) (Dec 2021 usage: ~70%), and you need Node 16.9+ to use `hasOwn` directly. In the meantime there is a [Core JS polyfill for `hasOwn`](https://github.com/zloirock/core-js/#accessible-objectprototypehasownproperty).

## RegExp: Match Indices ('d' Flag)
By default, regular expression matches record the start index of the matched text, but not its end index and not the start and end indices of its capture groups. For use cases such as text editor syntax or search result highlighting, having capture group match indices as part of a regular expression match can be helpful.

**With the [regexp match indices feature ('d' flag)](https://github.com/tc39/proposal-regexp-match-indices), the match and capture group indices are available in the `indices` array property of the regular expression result.**
The matched text position and the match indices position are the same, e.g., the full matched text is the first value in the match array and the indices array. The indices of the named captured groups are recorded in `indices.groups`.

Here is an example:
```javascript
const text = "Let's match one:1.";
const regexp = /match\s(?<word>\w+):(?<digit>\d)/gd;

for (const match of text.matchAll(regexp)) {
    console.log(match);
}
```
The above example code has the following output:
```json
[
  'match one:1',
  'one',
  '1',
  index: 6,
  input: "Let's match one:1.",
  groups: { word: 'one', digit: '1' },
  indices: {
    0: [6,17],
    1: [12,15],
    2: [16,17],
    groups: { 
      digit: [16, 17],
      word: [12, 15]
    }
  }
]
```

The [browser support for the RegExp match indices feature is currently limited](https://caniuse.com/mdn-javascript_builtins_regexp_hasindices) (Dec 2021 usage: ~80%). In Node.js, you can activate the feature with the `--harmony-regexp-match-indices` flag, but it is disabled by default. You can use the [RegExp match indices polyfill](https://github.com/rbuckton/regexp-match-indices) in the meantime.

## Conclusion
The new JavaScript from 2021 features help make development more convenient and robust, and most of them already work on the latest browsers and Node.js environments.

However, many users are still on browsers and environments without full ES2022 support. For production use, it is essential to check the target environments and use polyfilling and transpiling as needed or to wait a bit longer before using the new features.

Happy coding in 2022!

Private fields and methods, top-level await, error causes and more...

ES2022 Preview: 10 Exciting JavaScript Language Features From 2021


**[Visual Studio Code](https://code.visualstudio.com/) is a great code editor** that comes with JavaScript and TypeScript features like basic refactoring out of the box.
However, its true strength is an **outstanding [extension marketplace](https://marketplace.visualstudio.com/)**. There are extensions for almost anything you might want to do in an IDE (Integrated Development Environment), and they can make VS Code many times better.

Unfortunately, **it can be time-consuming to find the right extensions and configure VS Code**. Many developers prefer the out-of-the-box experience that IDEs such as [Webstorm](https://www.jetbrains.com/webstorm/) provide.
This blog post shows how Visual Studio Code extensions can help you enhance the IDE experience for JavaScript. It covers:

* [Code Completion and Snippets](#code-completion-and-snippets)
* [Linting, Spell Checking, and Hints](#linting--spell-checking--and-hints)
* [Formatting, Code Actions, and Refactoring](#formatting--code-actions--and-refactoring)
* [Editor Support for Additional File Types](#editor-support-for-additional-file-types)
* [Organizing Comments, TODOs, and Bookmarks](#organizing-comments--todos--and-bookmarks)
* [Testing](#testing)
* [Debugging](#debugging)
* [Version Control](#version-control)
* [Database, REST API & Docker Clients](#database--rest-api---docker-clients)

You can conveniently install the **25 extensions that convert Visual Studio Code into a full-blown JavaScript IDE**
with the **[JavaScript IDE Extension Pack](https://marketplace.visualstudio.com/items?itemName=p42ai.vscode-javascript-ide-extension-pack&ssr=false)**.
[Icon or color themes](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs) and [keyboard shortcut maps](https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Installs) are not covered here, nor are they included in the extension pack because they depend much more on personal preferences than most extensions.

Let's go into the different features and see what's possible in VS Code with just a few extensions:

## Code Completion and Snippets

Code completion (IntelliSense) features can make writing code faster and easier. Visual Studio Code provides [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) for JavaScript and TypeScript by default and contains powerful [Emmet support](https://code.visualstudio.com/docs/editor/emmet) for expanding snippets.

One of the latest trends in code completion is AI assistants.
However, my experience with AI code completion assistants such as [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) was mixed so far, and therefore I've not included them in the extension pack, but they might work great for you.

Here are a few snippet extensions that can boost your productivity:

### [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
![ES7 React/Redux/GraphQL/React-Native snippets](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/es7-snippets.png)

The [ES7 snippets extension](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) provides many expandable everyday snippets.
For example, defining imports and exports, creating methods and loops, and returning Promises.
The extension also contains many snippets for [React](https://reactjs.org/) and [GraphQL](https://graphql.org/).

### [Emmet Live](https://marketplace.visualstudio.com/items?itemName=ysemeniuk.emmet-live)
![Emmet Live](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/emmet-live.png)

With the [Emmet Live extension](https://marketplace.visualstudio.com/items?itemName=ysemeniuk.emmet-live), you can preview your [Emmet](https://emmet.io/) output while crafting the Emmet abbreviation.
You can start it with the `Emmet Live` command.

### [Vscode-Random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random)
![vscode-random](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/vscode-random.png)

When writing tests or creating mockups, it often takes time to come up with good fake data.
You can use the [vscode-random extension](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random) to generate many kinds of random data, such as numbers, locations, emails, IPs, names, and datetime values.

## Linting, Spell Checking, and Hints
The best time to get feedback on your code is while editing, i.e., when you can quickly change the code and learn as you go. By integrating linting, spell checking, and other suggestions into your editing process, you avoid some of the more extended pre-commit checks and pull request round trips.

### [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
![Code Spell Checker](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/code-spell-checker.png)

It is easy for typo and small spelling errors to slip into variable and function names, strings, comments, etc. The [Code Spell Checker extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) highlights those mistakes and can often provide the correct spelling as a fix.

### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
![ESLint](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/eslint.png)

[ESLint](https://eslint.org/) is the most commonly used JavaScript linter. It helps you "find and fix problems in your JavaScript code." ESLint is very extensible and configurable, and many teams have their own custom rules for their projects. The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) shows errors and warnings directly in your editor and lets you quick-fix them easily. You can also configure it to auto-fix any problems on save.

### [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
![Error Lens](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/error-lens.png)

The [Error Lens extension](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) highlights and displays errors, warnings, and information messages directly in the editor. With it, you don't need to take the extra step of finding out what the squiggly underlines mean - it is right in front of you. If the information gets overwhelming, you can easily toggle it on and off for different message types with the `Error Lens: Toggle...` commands.

## Formatting, Code Actions, and Refactoring
Visual Studio Code comes with [basic refactorings and quick fixes](https://code.visualstudio.com/docs/editor/refactoring) such as `Rename`, `Extract Method` and `Extract Variable`.
The editing experience can be further enhanced with extensions:

### [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
Formatting code manually is very time-consuming and error-prone.
With [Prettier](https://prettier.io/), the de-facto standard code formatter of the JavaScript world, you can format your code automatically.
You can even configure the [Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to format the source code when you save it.

### [Change Case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
![Change Case](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/change-case.png)

The [Change Case extension](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) adds a wide range of commands to change the case of the selected text, e.g., into camel case, snake case, Pascal case, etc. The commands all have the `Change Case` prefix.

### [P42 JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)
![P42 JS Assistant Quick Fix](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/p42-quick-fix.png)

The [JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) that I've developed adds [60+ refactorings, quick fixes, and code actions](/blog/2021-12-21/level-up-your-javascript-with-these-60-quick-fixes-for-vs-code) to VS Code.
It contains React refactorings, ECMAScript modernizations, syntax and language element conversions, actions for logical expressions and control flow, and code cleanups.

## Editor Support for Additional File Types
When you work with JavaScript and TypeScript, there are many other relevant file types. Visual Studio Code already has editing support for [JSON](https://code.visualstudio.com/docs/languages/json), [HTML](https://code.visualstudio.com/docs/languages/html), [CSS](https://code.visualstudio.com/docs/languages/css), and [Markdown](https://code.visualstudio.com/docs/languages/markdown). The following extensions add more enhanced editor support:

### [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)
![npm](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/npm.png)

The [npm extension](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) validates the installed Node.js modules defined in `package.json` files.

### [SVG Preview](https://marketplace.visualstudio.com/items?itemName=simonsiefke.svg-preview)
![SVG Preview](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/svg-preview.png)

The [SVG Preview extension](https://marketplace.visualstudio.com/items?itemName=simonsiefke.svg-preview) does exactly that: show a preview for `.svg` files. You can pan and zoom the image in the preview, and it updates automatically when you edit the SVG source.

### [Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml)
![Even Better TOML](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/even-better-toml.png)

[TOML](https://github.com/toml-lang/toml) is a configuration file format that aims to be simple and easily readable.
The [Even Better TOML extension](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) adds full editor support, including syntax highlighting, folding, navigation, and formatting.

## Organizing Comments, TODOs, and Bookmarks
In larger development projects that last many years and involve many developers, staying organized around comments and TODO items becomes increasingly essential.
The following extensions can help with that:

### [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
![Better Comments](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/better-comments.png)

The [Better Comments extension](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) shows different kinds of comments in different colors. It supports prefixes like `!`, `?`, and `TODO`.

### [Todo Tree](https://marketplace.visualstudio.com/items?itemName=gruntfuggly.todo-tree)
![Todo Tree](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/todo-tree.png)

TODOs and FIXMEs easily get forgotten about and lost.
The [Todo Tree extension](https://marketplace.visualstudio.com/items?itemName=gruntfuggly.todo-tree) scans the files in your workspace for TODO and FIXME annotations and organizes them in a sidebar view.
You can easily browse them by folder and revisit essential items that come to your attention.

### [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.bookmarks)
![Bookmarks](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/bookmarks.png)

With the [Bookmarks extension](https://marketplace.visualstudio.com/items?itemName=alefragnani.bookmarks), you can save and label important source code locations and organize them in a sidebar panel.
This can be helpful when you are exploring a complex codebase or when you have locations that you return to frequently.

## Testing
Writing and running tests is a crucial development activity.
In particular, unit tests that run in the IDE are helpful to get immediate feedback.
The following extensions add test runner support to VS Code:

### [Test Explorer](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer)
![Test Explorer](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/test-explorer.png)

The Test Explorer is a set of extensions that integrate testing seamlessly into VS Code. Its [Test Explorer UI extension](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer) adds a side panel for running the tests and seeing the results, and the [Test Explorer Status Bar](https://marketplace.visualstudio.com/items?itemName=connorshea.vscode-test-explorer-status-bar) adds the number of tests to the status bar.

The UI components show the information produced by test adapters.
Which adapter you need for testing depends on your testing frameworks.
For JavaScript, testing adapter extensions for the following test frameworks are available:

* [Mocha](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter) *(included in extension pack)*
* [Jest](https://marketplace.visualstudio.com/items?itemName=kavod-io.vscode-jest-test-adapter) *(included in extension pack)*
* [Jasmine](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-jasmine-test-adapter)
* [Angular/Karma](https://marketplace.visualstudio.com/items?itemName=raagh.angular-karma-test-explorer)
* [AVA](https://marketplace.visualstudio.com/items?itemName=gwenio.vscode-ava-test-adapter)
* [TestyTs](https://marketplace.visualstudio.com/items?itemName=Testy.vscode-testyts-test-adapter)
* [React-scripts](https://marketplace.visualstudio.com/items?itemName=smarschollek.vscode-react-scripts-test-adapter)

Visual Studio Code has added native testing capabilities in version 1.59. You can enable them in the Test Explorer by setting `testExplorer.useNativeTesting` to `true` in the [VS Code settings](https://code.visualstudio.com/docs/getstarted/settings).

## Debugging
Visual Studio Code comes with an excellent [JavaScript debugger](https://code.visualstudio.com/docs/editor/debugging) out of the box. It can connect to Node.js, [Edge, and Chrome](https://code.visualstudio.com/docs/editor/debugging#_trigger-debugging-via-edge-or-chrome), so in most cases, there is no need for extra extensions when it comes to JavaScript debugging.

## Version Control
[Git](https://git-scm.com/) is the most used version control system (VCS), and there are great extensions for VS Code. You can also find extensions for other VCS's such as [Subversion](https://marketplace.visualstudio.com/items?itemName=johnstoncode.svn-scm) on the VS Code marketplace.

### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
![GitLens](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/gitlens.png)

The [GitLens extension](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) adds several panels to the source control sidebar and enhances the editor with information overlays.
The sidebar panels help you manage branches, stashes, commits, file history, remotes, and
the editor extensions include a blame view, change indications, an authorship code lens, and more.
GitLens is an essential extension that makes working with Git in VS Code much easier.

### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
![Git Graph](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/git-graph.png)

The [Git Graph extension](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) shows the Git history visually in an editor panel. You can open it with the "View Git Graph" command.
In the graph view, you can explore individual commits and perform many everyday Git operations.
For example, you can check out branches and commits, create branches, cherry-pick commits, perform merges, etc.

## Database, REST API & Docker Clients
Developing full-stack JavaScript often means working with external systems such as databases, REST APIs and Docker.
The following extensions add clients to VS Code:

### [Database Client](https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2)
![Database Client](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/database-client.png)

The [Database Client extension](https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2) lets you connect to MySQL/MariaDB, PostgreSQL, SQLite, Redis, and ElasticSearch.
You can explore databases in its sidebar panel, open database tables as editor panels, and run custom SQL queries.
The database table content is editable. Any changes that you make are immediately stored in the database.

### [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
![Thunder Client](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/thunder-client.png)

The [Thunder Client extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) integrates a client for REST APIs into VS Code.
It is a lightweight alternative to [Postman](https://www.postman.com/).
You can send any kind of `http(s)` request, see the response data, and organize your requests in collections.

### [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
![Docker](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/docker.png)

Working with containers has become an essential part of day-to-day development for many software engineers.
With the [Docker extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker), you can explore your running Docker containers, get editor support for Docker files, and more.

## Bonus
Here is a small bonus extension that I find very useful:

### [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)
![CodeSnap](/image/blog/2022-01-10-turn-visual-studio-code-into-a-top-notch-javascript-ide-with-these-25-extensions/codesnap.png)

You can take beautiful screenshots of your code in no time with the [CodeSnap extension](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap).
Start with the `CodeSnap` command, select the code you want to screenshot, and click the lense button.

## Conclusion
I hope the post gave you a few ideas for extensions that can improve your VS Code experience.
With the **[JavaScript IDE Extension Pack](https://marketplace.visualstudio.com/items?itemName=p42ai.vscode-javascript-ide-extension-pack&ssr=false)**,
you can install them all and then disable or uninstall the ones that don't fit your needs.

It can be time-consuming to find the right extensions and configure VS Code.

25 Extensions That Turn Visual Studio Code Into An Outstanding JavaScript IDE


JavaScript has many quirks and difficult-to-understand behaviors. There are hilarious talks such as [WTFJS](https://www.youtube.com/watch?v=et8xNAc2ic8) and [WAT](https://www.destroyallsoftware.com/talks/wat) that make fun of JavaScript for its strangeness.

Since I work on refactorings, I have to consider many weird and sometimes funny sides of JavaScript. I will share some of the surprising behaviors that I encounter, so if you see them (which you hopefully never will), it might hint at what's going on.

This blog post explores an innocent-looking statement:

```javascript
// ... some code

helloWorld;
```

You might intuitively think that nothing should happen here - the statement seems to do nothing because there is no obvious function call here.

However, it can do anything, for example, print "Hello World!" to the console.
```javascript
// ... some code

helloWorld;           // prints "Hello World!"
```

**How can this even be possible?**

It turns out that global variables (in this case, `helloWorld`) are properties of the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object). And properties in JavaScript do not have to be simple values. They can be implemented using [getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) and [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set), which can execute code. Since the global object inherits from `Object.prototype` in modern JavaScript engines, adding properties to `Object.prototype` creates properties on the global object.

Here, `helloWorld` is defined as such a getter:

```javascript
Object.defineProperty(Object.prototype, 'helloWorld', {
  get() { console.log("Hello World!"); },
});

helloWorld;           // prints "Hello World!"
```

Thankfully this can only happen with global variables, and not with parameters or local variables.

```javascript
Object.defineProperty(Object.prototype, 'helloWorld', {
  get() { console.log("Hello World!"); },
});

const a = helloWorld; // getter is evaluated, prints "Hello World!"
a;                    // does nothing
```

I learned about this strange behavior in a [blog post about the `globalThis` polyfill](https://mathiasbynens.be/notes/globalthis). In the polyfill, a global property getter is used to access the global `this` object in different environments such as browsers, web workers, frames, Node.js, and ES modules. Have a look if you want to know more!

`helloWorld;` looks like a statement that does not do anything. However, ...

WTF JavaScript: A Variable with Side Effects


There have been many changes to the [P42 JS Assistant for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) in January 2022:

## User Interface
### Suggestions Sidebar Panel
The P42 sidebar now contains a **panel with refactoring suggestions** for the content of the currently active editor.
You can get more details on the suggestions and apply them directly from the panel.
With [P42 Pro](/pricing), you can also [**apply all safe refactorings**](/documentation/p42-for-vscode/side-bar#apply-all-safe-suggestions) with a single button click.

![P42 Refactoring Suggestions Sidebar Panel](/image/blog/2022-02-01-whats-new-in-p42-january-2022-roundup/p42-refactoring-suggestions-sidebar-panel.gif)

### Mass Refactoring Safety Warnings
When running a [mass refactoring](/documentation/p42-for-vscode/mass-refactoring), it is crucial to verify the changes before committing.
The mass refactoring output now contains the list of changed files and any safety warnings for refactorings that have been applied to make this easier for you to spot potential issues.

## Configuration

### Refactoring Suggestion Settings
Are there refactoring suggestions that you think should be warnings or errors? Do you want to turn off some hints that annoy you?

With the new **[refactorings suggestions settings](/documentation/p42-for-vscode/configuration#visual-studio-code-settings)**, you can set the diagnostics severity to different levels and turn off refactoring suggestions.

![P42 Refactoring Configuration in VS Code Settings](/image/blog/2022-02-01-whats-new-in-p42-january-2022-roundup/p42-refactoring-configuration-in-vscode-settings.gif)

### Path Exclusion Patterns

Repositories are often complicated, and there can be many files that you want to exclude from P42 mass refactorings and refactoring suggestions.
Common examples include node modules, distribution and output files, configuration files, and 3rd party code that's checked into the repository.

With the new **[excluded path patterns](/documentation/p42-for-vscode/configuration#excluded-path-patterns)**, you can configure a list of path globs in the `p42.toml` file that should be excluded. Here is an example:

```toml
excludedPathPatterns = [
    "**/node_modules/**",
    "**/dist/**",
    "some/other/directory/**",
    "**/generateConfig.js"
]
```

## Refactorings

### Working with Strings and Template Literals
* *New* - **[Convert String to Template Literal](/documentation/code-assist/convert-string-to-template-literal)**: Convert a string to a basic template literal without expressions.
* *New* - **[Convert Template Literal to String](/documentation/code-assist/convert-template-literal-to-string)**: Convert a simple template literal without expressions into a string.

### Working with Loops
* *New* - **[Convert Loop to For with Index Variable](/documentation/code-assist/convert-loop-to-for-with-index)**: Replace for...of with a regular for loop that has an index variable.
* *Improved* - **[Convert Loop to .forEach()](/documentation/code-assist/convert-loop-to-for-each)** supports conversion from `for..of` loops and automatically introduces an element variable if it does not exist.
* *Improved* - **[Convert Loop to for..of](/documentation/code-assist/convert-loop-to-for-of)** automatically introduces an element variable if it does not exist.

### Simplifying and Removing IIFEs/IIAFs
Immediately-invoked function expressions (IIFEs) and immediately-invoked arrow functions (IIAFs) are common in older code to hide state in closures, secure the scope of `var` declarations, alias global variables, and access loop variables from async functions.

With the introduction of the block scoped `let` and `const` in ES6, many use cases have become obsolete. P42 can help you remove older IIFEs safety.

* *New* - **[Remove IIFE/IIAF](/documentation/code-assist/remove-iife)**: Remove IIFEs and IIAFs without parameters.
* *New* - **[Push Parameter into IIFE/IIAF](/documentation/code-assist/push-parameter-into-iife)**: Push a parameter of an IIFE or IIAF into its function body.

### Modernizing Lodash Usages
With the introduction of various collection helpers and new syntax in ES6 and more recent JavaScript versions, many [Lodash](https://lodash.com/) functions have become partially or fully redundant.

In January, several refactorings that help you modernize older Lodash code have been added to [P42 Pro](/pricing):

* *New* - **[Replace _.filter with Array.filter](/documentation/code-assist/replace-lodash-filter-with-javascript-array-filter)**
* *New* - **[Replace _.map with Array .map](/documentation/code-assist/replace-lodash-map-with-javascript-array-map)**
* *New* - **[Replace _.some with Array.some](/documentation/code-assist/replace-lodash-some-with-javascript-array-some)**
* *New* - **[Replace _.every with Array.every](/documentation/code-assist/replace-lodash-every-with-javascript-array-every)**
* *New* - **[Replace _.noop with arrow function](/documentation/code-assist/replace-lodash-noop-with-arrow-function)**

Those are all the new features and updates from January 2022. If you want to know about new features as soon as they are published, you can follow [@p42ai on Twitter](https://twitter.com/p42ai).

Happy Coding!

See all P42 features and changes in January 2022.

What's new in P42? Winter 2021 Summary


**The optional chaining operator `.?` returns the value of an object property when the object is available and `undefined` otherwise.**
It is similar to the standard `.` chaining operator, with an added check if the object is defined (i.e., not [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish)).

The optional chaining operator lets you **write concise and safe chains of connected objects** when some of those objects can be `null` or `undefined`. Before the introduction of optional chaining in ES2020, the `&&` operator was often used to check if an object is available (`obj && obj.value`).

You can often simplify existing checks with the optional chaining pattern:
- `obj && obj.property` becomes `obj?.property`
- `obj != null && obj.property` becomes `obj?.property`
- `obj != null ? obj.property : undefined` becomes `obj?.property`
- `arr && arr[i]` becomes `arr?.[i]`
- `f && f()` becomes `f?.()`
- etc.

However, there are some cases where refactoring into optional chaining can lead to bugs:

#### Optional chaining short-circuits for nullish values, but not for other falsy values
When `a && a.b` is replaced with `a?.b`, the execution for types that can have [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values is changed. This means that the result value and type of the expression can be different with optional chaining.

The following snippet shows some examples:
```javascript
function test(value) {
    console.log(`${value && value.length}, ${value?.length}`);
}

test(undefined);       // undefined, undefined
test(null);            // null, undefined
test(true);            // undefined, undefined
test(false);           // false, undefined
test(1);               // undefined, undefined
test(0);               // 0, undefined
test({});              // undefined, undefined
test([]);              // 0, 0
test({ length: "a" }); // a, a
test('');              // , 0
test(NaN);             // NaN, undefined
```

The empty string, which is falsy, but not [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish), can be especially problematic. Here is an example were introducing optional chaining can lead to problems:
```javascript
// without optional chaining
if (s && s.length === 0) {
  // not called for the empty string 
  // (e.g., legacy code that works this way)
}

// with optional chaining
if (s?.length === 0) {
  // called for the empty string 
  // (potentially introducing undesired behavior)
}
```

#### Optional chaining changes the result for null to undefined
When calling `a?.b` with null, the result is `undefined`. However, with `a && a.b`, the result is `null`.

#### Optional chaining can affect the number of calls with side effects

For example, consider changing
```javascript
f() && f().a;
```
into
```javascript
f()?.a;
```

With `&&`, `f` is called one or two times. However, with optional chaining `f` is only called once. If `f` has a side effect, this side effect would have been called a different number of times, potentially changing the behavior. This behavior applies not just to function and methods calls but also to getters that can potentially have side effects.

#### TypeScript does not support optional chaining of the 'void' type

[TypeScript does not support optional chaining for `void`](https://github.com/microsoft/TypeScript/issues/35850), event though the corresponding JavaScript code would work.

```typescript
type Input = void | {
    property: string
};

function f(input: Input) {
    // this works:
    console.log(input && input.property);
    // this breaks because void is not undefined in TypeScript:
    console.log(input?.property);
}
```

#### Old browsers and JavaScript engines do not support optional chaining

Optional chaining is an ES2020 feature. It is supported on all modern browsers and Node 14+, but for older browsers and Node versions, transpilation might be required 
([compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#browser_compatibility)). 

Converting to optional chaining can seem like a no-brainer, but there are a few things to watch out for.

JavaScript Refactoring Gotchas: 5 Ways Converting to Optional Chaining Can Break Your Code


In JavaScript code, especially in older legacy code, you sometimes find the expression `void 0`. 

The [void operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) evaluates an expression and returns the primitive value [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined). `void 0` evaluates `0`, which does nothing, and then returns `undefined`. It is effectively an alias for `undefined`.

### Why is void 0 used as an alias for undefined?

One of JavaScript's quirks is that `undefined` is not a reserved keyword. 
Instead, it is a property of the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object).

**Before ES5 (2009), it was possible to modify the `undefined` global property, which could lead to unexpected behavior for `undefined`.**

Consider the following example (which does not work in modern JavaScript engines):

```javascript
// Pre-ES5 example - does not work in modern JS engines:

// changes property 'undefined' on the global object:
undefined = "something else"; 

// potentially in some other JavaScript file or script section:
if (aVariable === undefined) {
  // aVariable is equal to "something else", 
  // but not to the primitive value 'undefined'
  doSomething();
}
```

Modifying the `undefined` global could even happen in 3rd party code, e.g., libraries imported via the script tag. Since `void 0` always returns the actual primitive value `undefined`, it was commonly used before ES5 to make the code failsafe against the re-definition of the `undefined` global property.

### The global property 'undefined' after ES5

The problem that `undefined` could be modified on the global object was so big that the JavaScript standard was changed.
**With ES5, the global property `undefined` became read-only.**
Attempting to change the value does nothing in modern JavaScript:

```javascript
globalThis.undefined = "something else";
console.log(undefined); // prints undefined in modern JS environments
```

### Undefined can still be shadowed by a local variable
However, while changing the `undefined` global property is no longer possible, `undefined` is still not a reserved keyword in JavaScript.
Therefore it can still be shadowed by a local variable:

```javascript
const undefined = "something else";
let check = aVariable === void 0; // void 0 is needed here
```

Having a local variable with the name `undefined` is a pitfall that you want to avoid. The [ESLint rule no-undefined](https://eslint.org/docs/rules/no-undefined) disallows the use of undefined as a variable name and prevents shadowing issues.

### Can void 0 help reduce the bundle size?
The expression `void 0` is shorter than `undefined`. JavaScript bundle sizes are essential for creating websites that load quickly, and shaving off a few bytes can help. 

However, it is best to **leave basic code size optimizations to minifiers** such as [Terser](https://github.com/terser/terser) as part of the product bundling process. They can perform many different optimizations, and the source code remains more readable without any manual code size optimizations like using `void 0` instead of `undefined`.

### Avoid void 0 in modern JavaScript

To summarize, in modern browsers and JavaScript engines, there is no reason to use `void 0` any longer:

* the global property `undefined` cannot be changed in ES5 and newer environments
* local variables with the name `undefined` can be disallowed with the [ESLint rule no-undefined](https://eslint.org/docs/rules/no-undefined)
* minifiers can replace `undefined` with `void 0` when creating the production bundle

On the contrary, `void 0` makes JavaSCript code harder to read and understand because you need to know the meaning of `void 0` and process different terms (`void 0`, `undefined`) for the same concept (`undefined`).

TLDR: **You can use `undefined` and remove the unnecessary `void 0` complication.**

What `void 0` means and why it can be replaced with `undefined` in most cases.

You don't need void 0 in JavaScript


Since February, the [P42 JS Assistant for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) has grown considerably and contains over 90 code assists and refactorings. The user interface has been improved based on feedback, and the JS Assistant now supports Vue.js. Here are the details:

## Vue.js Support (P42 Pro)
You can now use code assists, refactorings, and suggestions from the P42 JS Assistant inside `.vue` files and mass refactorings updates `.vue` files.

![P42 Vue.js Example](/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/vuejs.gif)

## User Interface

### Keyboard Shortcuts

The JS Assistant has different default keyboard shortcuts for the code assist context menus and a "move" context menu shortcut. You can now [add custom keyboard shortcuts for any P42 code assist](/documentation/p42-for-vscode/editor-integration#keyboard-shortcuts).

| Context Menu | Mac Shortcut | Windows/Linux Shortcut |
| ----------| ------------ | ------------ | 
| Quick Fix | <kbd>CMD</kbd> + <kbd>.</kbd> | <kbd>CTRL</kbd> + <kbd>.</kbd> |
| Refactor | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>R</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>R</kbd> |
| Extract | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>X</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>X</kbd>
| Inline | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>I</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>I</kbd>
| Convert | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>C</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>C</kbd>
| Move | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>M</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>M</kbd>
| Action | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>A</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>A</kbd>

### Suggestion Display and Panel
The P42 refactorings suggestions are shown as hints inside the editor (underline with three dots) by default, and the suggestion side panel highlights relevant code on mouseover. When you click on a selected item in the side panel, the editor scrolls to the appropriate location.

![P42 Code Highlighting](/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/suggestion-sidepanel.gif)

### Mass Refactoring (P42 Pro)
The [mass refactoring](/documentation/p42-for-vscode/mass-refactoring) dialog is now more usable. You can search the description and details, e.g., to find all ES2015 modernizations, and the refactorings are sorted alphabetically.

The mass refactoring output is easier to understand and contains more information. It includes the file exclusions patterns, a progress indicator for every 50 analyzed files, and the overall refactoring time in seconds.

## Configuration
### ECMAScript Target Version
You can [specify the target ECMAScript version in the P42 configuration file](/documentation/p42-for-vscode/configuration#platform-version). Code modernizations that would require newer ECMAScript versions are hidden when you configure an older target version.

### Hide Overlapping Code Actions
The P42 JS Assistant provides code assists that mirror and extend the functionality of code assists that come with Visual Studio Code. You can now [configure the visibility of overlapping code assists](/documentation/p42-for-vscode/configuration#overlapping-code-assist-visibility).

## Code Assists and Refactorings

### Working with Variables
- *New* - **[Split Variable Declaration and Initialization](/documentation/code-assist/split-variable-declaration-and-initialization)**: Separate the variable initialization from its declaration.
- *New* - **[Merge Variable Declaration and Initialization](/documentation/code-assist/merge-variable-declaration-and-initialization)**: Convert the initial assignment of a variable into its declaration initializer.
- *New* - **[Replace with existing variable](/documentation/code-assist/replace-expression-with-existing-variable)**: Replace an expression with an existing variable (P42 Pro). 
- *New* - **[Push variable declaration into initial value](/documentation/code-assist/push-into-initial-value-declaration)**: Inlines a variable that is initialized with another variable into the declaration of that variable (P42 Pro).
- *New* - **[Remove unused variable](/documentation/code-assist/remove-unused-variable)**: Remove a variable that is not read or written.
- *Improved* - **[Extract variable](/documentation/code-assist/extract-variable)** suggests better variable names when extracting identifiers and property access expressions and automatically creates blocks when needed.

![Push variable declaration into initial value](/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/push-into-initial-variable-declaration.gif)

### Working with Destructuring Expressions
- *New* - **[Convert to destructuring assignment](/documentation/code-assist/convert-to-destructuring-assignment)**: Convert a variable declaration that accesses an object property to a destructuring assignment.
- *New* - **[Merge into preceding destructuring assignment](/documentation/code-assist/merge-into-preceding-destructuring-assignment)**: Combine an object destructuring assignment with its preceding sibling.
- *New* - **[Flatten array rest/spread property](/documentation/code-assist/flatten-array-rest-property)**: Merge a ``...[]`` expression into the outer array literal or destructuring expression (P42 Pro).

### Working with Classes
- *New* - **[Move field initialization into constructor](/documentation/code-assist/move-field-initializer-into-constructor)**: Moves the assignment of the initial field value into the class constructor (P42 Pro).
- *New* - **[Move initialization into field declaration](/documentation/code-assist/move-field-initializer-into-declaration)**: Moves the assignment of the initial field value into the field declaration (P42 Pro).

### Working with Functions
- *New* - **[Convert named function to function expression](/documentation/code-assist/convert-named-function-to-function-expression)**: Converts a named function to a const declaration with a function expression.
- *New* - **[Introduce early return / continue](/documentation/code-assist/introduce-early-return)**: Change an if-statement into an early return or continue statement (P42 Pro).

### Working with Loops and Arrays
- *New* - **[Convert loop to .map()](/documentation/code-assist/convert-loop-to-map)**: Convert a loop with `.push()` into a `.map()` call (P42 Pro).
- *New* - **[Replace _.each and _.forEach with array.forEach](/documentation/code-assist/replace-lodash-foreach)**: Replace Lodash `_.each` and `_.forEach` with `array.forEach` (P42 Pro).
- *Improved* - **[Convert array.indexOf() into array.includes()](/documentation/code-assist/convert-array-index-of-to-array-includes)** converts exclusion checks to `!array.includes(..)`.
- *Improved* - **[Convert loop to for…of](/documentation/code-assist/convert-loop-to-for-of)** supports converting `anArray.forEach` to a for…of loop.

![Convert loop to .map()](/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/convert-loop-to-map.gif)

### Working with Conditional Expressions
- *New* - **[Convert && to if statement](/documentation/code-assist/convert-and-and-guard-to-if-statement)**: Convert `condition && aFunction();` and similar expression statements into if statements.
- *Improved* - **[Split if statement](/documentation/code-assist/split-if)** supports splitting on `||`.
- *Improved* - **[Flip operator](/documentation/code-assist/flip-operator)** supports `+`, `*`, and binary operators.

### Working with String and Templates
- *New* - **[Convert string comparison chain to array.includes](/documentation/code-assist/convert-comparison-chain-to-array-includes)**: Replace `|| value === 'aString'`` and `&& value !== 'aString'`` chains with `array.includes()``.
- *Improved* - **[Extract selected text into variable](/documentation/code-assist/extract-substring-to-variable)** supports extracting text and included expressions from template literals.
- *Improved* - **[Inline into template](/documentation/code-assist/inline-into-template)** supports inlining template literals into template literals.

### Other Code Actions
- *New* - **[Remove console.log](/documentation/code-assist/remove-console-log)**: Remove `console.log` statement.
- *New* - **[Replace void 0 with undefined](/documentation/code-assist/replace-void-0-with-undefined)**: Replace `void 0` and other constant `void` expressions with undefined.
- *New* - **[Select expression occurrences](/documentation/code-assist/select-expression-occurrences)**: Start a multi-cursor selection on several occurrences of the same expression (P42 Pro).
- *Improved* - Replaced the "move statement out of if-else" refactoring with new **[Move duplicated first statement out of if-else](/documentation/code-assist/move-first-statement-out-of-if-else)** and **[Move duplicated last statement out of if-else](/documentation/code-assist/move-last-statement-out-of-if-else)** refactorings.

![Select expression occurrences](/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/select-expression-occurrences.gif)

You can follow [@p42ai on Twitter](https://twitter.com/p42ai) to get notified about new features.

Happy Coding!

See all P42 features and changes since February 2022.

What's new in P42? Summer 2022 Summary


The touch bar on the MacBook has the potential to provide **quick access to commonly used commands** in Visual Studio Code.

In the default configuration, the 'go forward' and 'go back' buttons are very useful. However, other default touch bar actions are less valuable and take up space. You might also find that everyday operations such as 'rename' (`F2`) or 'go to definition' (`F12`) are harder to access because you need to hold down `Fn`. 

This post will show you how to **configure Visual Studio Code to make the most of the touch bar**.

## Nasc Touchbar extension
The **[Nasc Touchbar extension](https://marketplace.visualstudio.com/items?itemName=felipe.nasc-touchbar&ssr=false)** enables you to easily add many additional actions to the touch bar, for example, `Run command`, `Toggle side bar`, and `Rename`. 

You can configure which buttons are displayed in the Visual Studio Code settings (`Preferences > Open Settings (UI)`, search for `touch`).

## JS Assistant extension
I have included touch bar buttons that are helpful for JavaScript and TypeScript users in the [JS Assistant extension](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor&ssr=false). The extension adds the following actions to the touch bar:

* ✏️ Rename: Triggers the rename command on the current symbol.
* 🪄 Quick-Fix: Opens the quick-fix context menu.
* 🔧 Refactor: Opens the refactor context menu.
* 📄 Source Action: Opens the source action context menu.

The actions are only available when you edit JavaScript or TypeScript files. Similar to the Nasc Touchbar extension, you can configure which buttons are displayed in the Visual Studio Code settings (`Preferences > Open Settings (UI)`).

## Disabling default debug touch bar actions
The default touch bar buttons take precedence over the controls added by the Nasc Touchbar and JS Assistant extensions. In particular, the debug actions can take up a lot of space and hide other buttons.
You can disable them by adding the following to your `settings.json` file:
```json
"keyboard.touchbar.ignored": [
  "workbench.action.debug.start",
  "workbench.action.debug.run",
  "workbench.action.debug.pause",
  "workbench.action.debug.stepOut",
  "workbench.action.debug.stepInto",
  "workbench.action.debug.stepOver",
  "workbench.action.debug.stop",
  "workbench.action.debug.restart"
]
```

## Example configuration
![Visual Studio Code Touch Bar](/image/blog/2022-10-21-how-to-configure-the-touch-bar-in-visual-studio-code-in-under-5-minutes/touch-bar.png)

The above configuration shows the following buttons:
* `Go back` and `Go forward` (default)
* `Go to definition`, `Run command`, `Toggle side bar`, and `Toggle bottom panel` (Nasc Touchbar)
* `Rename`, `Source Action`, `Refactor`, and `Quick-Fix` (JS Assistant)

In addition to the disable configuration for the debug actions, the following settings are used:
```json
"nasc-touchbar.addCursorBelow": false,
"nasc-touchbar.rename": false,
"nasc-touchbar.toggleSidebar": true
```

Get the most out of the Touch Bar in Visual Studio Code with two extensions and a little bit of configuration.

How to Configure the Touch Bar in Visual Studio Code in Under 5 Minutes


**Code editing is an essential part of the development workflow**. It includes all your actions in the editor before re-running your tests or checking how your changes affect the app you are working on:

- Adding, changing, and removing code
- Fixing syntax errors
- Fixing typos, e.g., in variable and function names
- Fixing linter errors and warnings
- Formatting
- Refactoring and restructuring code

**Having minor friction points in the code editing process can lead to wasted time and frustration**. You might have to switch context and lose your train of thought when, for example, you don't immediately see or understand a syntax error, you miss a potential bug, or your editor is suddenly full of formatting-related linter warnings.

[Visual Studio Code](https://code.visualstudio.com/) provides a solid editing experience and offers many extensions you can install to take it to the next level. These six Visual Studio Code extensions ([extension pack](https://marketplace.visualstudio.com/items?itemName=p42ai.vscode-javascript-editing-extension-pack&ssr=false)) help me **stay in the flow and be productive when editing JavaScript and TypeScript code**:

## [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&ssr=false)
[![GitHub Copilot Example](/image/blog/2022-11-01-6-vs-code-extensions-for-productive-javascript-and-typescript-editing/copilot.png)](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&ssr=false)

**[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)** suggests code completions for your current editor position. Its AI-generated suggestions range from short statement completion to full functions and classes.

Copilot is, for example, valuable for automatically **generating boilerplate code**, **discovering APIs**, and **implementing common patterns** quickly. It is also helpful for **getting unstuck** when it is not immediately clear what code is needed to solve a problem.

The code suggestions are only sometimes perfect and need review and refinement, and often I discard them entirely. Still, overall, Copilot boosts my productivity and helps me stay in the flow.

## [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false)
[![Prettier Logo](/image/blog/2022-11-01-6-vs-code-extensions-for-productive-javascript-and-typescript-editing/prettier.png)](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false)

Consistent formatting makes code easier to read and reduces accidental churn in pull requests. However, manually formatting your code is very tedious and error-prone. You can save time and keep your codebase consistently styled with an automated code formatter.

**[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false)** is an opinionated code formatter that many JavaScript and TypeScript projects use. It can format JavaScript, TypeScript, JSON, HTML, JSX (React), CSS, and more. Because it only offers a handful of configuration options, using Prettier can help avoid bike-shedding discussions about code formatting.

You can configure Prettier to **format your code automatically when you save a file**. If you want to minimize modifications to existing files, you can limit the formatting to the modified code. These are the Visual Studio Code settings for configuring Prettier:
```json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"
```

If you use a keyboard shortcut to save often, e.g., after each small code change, fix, or refactoring, you can even write poorly formatted code and rely on Prettier to fix it without much friction.

## [quick-lint-js](https://marketplace.visualstudio.com/items?itemName=quick-lint.quick-lint-js&ssr=false)
[![quick-lint-js example](/image/blog/2022-11-01-6-vs-code-extensions-for-productive-javascript-and-typescript-editing/quick-lint-js.png)](https://marketplace.visualstudio.com/items?itemName=quick-lint.quick-lint-js&ssr=false)
**[quick-lint-js](https://marketplace.visualstudio.com/items?itemName=quick-lint.quick-lint-js&ssr=false)** is an excellent alternative to [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint&ssr=false) when you primarily want to check for code correctness. It provides a fixed set of rules for TypeScript and JavaScript and is extremely fast. 

While quick-lint-js does not have the extensibility and the configuration options of ESLint, it helps you **see common mistakes quickly and fix them**. And since it focuses on correctness, quick-lint-js does not contain opinionated style rules and works very well with Prettier.

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker&ssr=false)
[![Code Spell Checker example](/image/blog/2022-11-01-6-vs-code-extensions-for-productive-javascript-and-typescript-editing/code-spell-checker.png)](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker&ssr=false)

Not all mistakes result in syntax errors or potential bugs. It is easy to have a typo in a variable, function, or class name without noticing it. However, this can lead to future issues with searchability and readability. **[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker&ssr=false) helps you spot and correct typos** early.

## [P42 JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor&ssr=false)
[![P42 JS Assistant example](/image/blog/2022-11-01-6-vs-code-extensions-for-productive-javascript-and-typescript-editing/p42-js-assistant.png)](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor&ssr=false)

Small refactorings can help restructure and clean up your code while editing it. I have developed the **[P42 JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor&ssr=false)**, which provides many **automated code actions** and **suggests refactorings** that make your code more readable and modern.

You can open a context menu with code actions in the editor by clicking on the lightbulb icon or using the quick-fix keyboard shortcut (<kbd>Ctrl</kbd> + <kbd>.</kbd> on Windows and Linux and <kbd>⌘</kbd> + <kbd>.</kbd> on Mac). You can use the code actions to make semantic changes to your code quickly and safely.

The refactoring suggestions show places where you can simplify or modernize your code. They can help you stay up-to-date with the latest JavaScript idioms and best practices. An underline with three dots indicates that a refactoring suggestion is available.

## [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens&ssr=false)
[![Error Lens example](/image/blog/2022-11-01-6-vs-code-extensions-for-productive-javascript-and-typescript-editing/error-lens.png)](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens&ssr=false)
By default, the VS Code editor indicates the presence of errors, warnings, and other hints with various underlines. You need to hover over the underlined code section with the mouse cursor to be able to read the messages. This additional step can take time and requires you to use the mouse.

**[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens&ssr=false) shows the diagnostic messages on the same line in the editor**, saving you time and keeping you in the flow. You can distinguish different message levels using their color. Errors are displayed in red, warnings in yellow, information messages in blue, and hints in green. 

In addition to showing TypeScript and JavaScript errors, the message coloring makes Error Lens an excellent companion to quick-lint-js (error, warnings), Code Spell Checker (information), and the P42 JS Assistant (hint). You can toggle the display of different message types with the `Error Lens: Toggle` commands in the Command Palette.

## Summary
Editing code is central to software development. With the above Visual Studio Code extensions, you can enhance your editing experience and make it easier to write high-quality code. You can conveniently install the extensions using the **[JavaScript and TypeScript Editing extension pack](https://marketplace.visualstudio.com/items?itemName=p42ai.vscode-javascript-editing-extension-pack&ssr=false)**.

Improve your editing experience with AI-generated code completions, automated formatting, linting, spell checking, and automated refactorings.

P42 Blog

6 VS Code Extensions for Productive Javascript and TypeScript Editing