
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


[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


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

The **[P42 JavaScript 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 JavaScript 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 JavaScript 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-action/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-action/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 JavaScript 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:

![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!

Example of how to refactor a function with nested conditionals using the P42 extension for VS Code.

JavaScript Refactoring in Action: 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 JavaScript 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:
![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-action) 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-action/push-operator-into-assignment)' and 
'[Pull Operator Out of Assignment](/documentation/code-action/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 JavaScript Assistant refactoring extension](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor).

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 JavaScript 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. But first, here is an example of how P42 works to give you an idea of how it can help you:

![P42 JavaScript 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-action/extract-variable)
* [Extract Substring into Variable](/documentation/code-action/extract-substring-to-variable)
* [Inline Variable](/documentation/code-action/inline-variable)
* [Inline into Template](/documentation/code-action/inline-into-template)
* [Inline Return](/documentation/code-action/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-action/extract-jsx-element)
* [Add {...} to JSX Attribute](/documentation/code-action/add-braces-to-jsx-attribute) & [Remove {...} from JSX Attribute](/documentation/code-action/remove-braces-from-jsx-attribute)
* [Collapse JSX Element](/documentation/code-action/collapse-jsx-element) & [Expand JSX Element](/documentation/code-action/expand-self-closing-jsx-element)
* [Surround with <>...</>](/documentation/code-action/surround-with-jsx-fragment) & [Remove Unnecessary <>...</>](/documentation/code-action/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-action/collapse-property-into-shorthand)
* [Convert .apply() to Use Spread Syntax](/documentation/code-action/convert-apply-to-spread-syntax)
* [Convert Function to Arrow Function](/documentation/code-action/convert-function-to-arrow-function)
* [Convert Function to Object Method](/documentation/code-action/convert-function-to-object-method)
* [Convert Loop to For...Of](/documentation/code-action/convert-loop-to-for-of)
* [Convert Var to Let & Const](/documentation/code-action/replace-var-with-let-and-const)
* [Lift Default into Parameter](/documentation/code-action/lift-default-into-parameter)
* [Use String.startsWith()](/documentation/code-action/use-string-starts-with) & [Use String.endsWith()](/documentation/code-action/use-string-ends-with)
* [Use Template Literal](/documentation/code-action/use-template-literal)

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

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

**ES2021**
* [Add Numeric Separator](/documentation/code-action/add-numeric-separator)
* [Push Operator into Assignment](/documentation/code-action/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-action/flip-operator)
* [Invert Condition](/documentation/code-action/invert-condition)
* [Pull Up Negation](/documentation/code-action/pull-up-negation) & [Push Down Negation](/documentation/code-action/push-down-negation)
* [Simplify Binary Expression](/documentation/code-action/simplify-binary-expression)
* [Remove Double Negation](/documentation/code-action/remove-double-negation)
* [Use == null Comparison](/documentation/code-action/use-eq-eq-null)
* [Extract Variable](/documentation/code-action/extract-variable)
* [Use Optional Chaining](/documentation/code-action/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-action/lift-statement-out-of-if-else)
* [Merge Nested If-Statements](/documentation/code-action/merge-nested-if)
* [Merge Nested If Inside Else into Else-If](/documentation/code-action/merge-nested-else-if)
* [Separate Condition into Nested If](/documentation/code-action/separate-condition-into-nested-if)
* [Remove Empty If Block](/documentation/code-action/remove-empty-if-block) & [Remove Empty Else Block](/documentation/code-action/remove-empty-else-block)
* [Remove Redundant Else](/documentation/code-action/remove-redundant-else)
* [Convert If-Else to Guard Clause](/documentation/code-action/convert-if-else-to-guard-clause)
* [Convert Conditional Expression to If-Else](/documentation/code-action/convert-conditional-expression-to-if-else) & [Convert If-Else into Conditional Expression](/documentation/code-action/convert-if-else-to-conditional-expression)
* [Convert If-Else to Switch](/documentation/code-action/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-action/add-braces-to-arrow-function) & [Remove {...} from Arrow Function](/documentation/code-action/remove-braces-from-arrow-function)
* [Add {...} to JSX Attribute](/documentation/code-action/add-braces-to-jsx-attribute) & [Remove {...} from JSX Attribute](/documentation/code-action/remove-braces-from-jsx-attribute)
* [Collapse JSX Element](/documentation/code-action/collapse-jsx-element) & [Expand JSX Element](/documentation/code-action/expand-self-closing-jsx-element)
* [Collapse Object Property into Shorthand](/documentation/code-action/collapse-property-into-shorthand) & [Expand Shorthand Property](/documentation/code-action/expand-shorthand-property)
* [Convert Property Access to Dot Notation](/documentation/code-action/convert-bracket-notation-property-access-to-dot-notation) & [Convert Property Access to Bracket Notation](/documentation/code-action/convert-dot-notation-property-access-to-bracket-notation) 
* [Split Variable Declaration](/documentation/code-action/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-action/convert-conditional-expression-to-if-else) & [Convert If-Else into Conditional Expression](/documentation/code-action/convert-if-else-to-conditional-expression)
* [Convert Function to Arrow Function](/documentation/code-action/convert-function-to-arrow-function) & [Convert Function to Object Method](/documentation/code-action/convert-function-to-object-method)
* [Convert If-Else to Switch](/documentation/code-action/convert-if-else-to-switch)
* [Convert Loop to For...Of](/documentation/code-action/convert-loop-to-for-of) & [Convert Loop to ForEach](/documentation/code-action/convert-loop-to-for-each)
* [Push Operator into Assignment](/documentation/code-action/push-operator-into-assignment) & [Pull Operator Out of Assignment](/documentation/code-action/pull-operator-out-of-assignment)
* [Convert Var to Let & Const](/documentation/code-action/replace-var-with-let-and-const) & [Convert Let to Const](/documentation/code-action/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-action/remove-double-negation)
* [Remove Empty If Block](/documentation/code-action/remove-empty-if-block) & [Remove Empty Else Block](/documentation/code-action/remove-empty-else-block)
* [Remove Redundant Else](/documentation/code-action/remove-redundant-else)
* [Remove Unnecessary Conditional Expression](/documentation/code-action/remove-unnecessary-conditional-expression)
* [Remove Unnecessary Expression Statement](/documentation/code-action/remove-unnecessary-expression-statement)
* [Remove Unnecessary JSX Fragment](/documentation/code-action/remove-unnecessary-jsx-fragment)
* [Remove Unnecessary Template Literal](/documentation/code-action/remove-unnecessary-template)
* [Simplify Binary Expression](/documentation/code-action/simplify-binary-expression)

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

If you find these refactorings & actions useful, you can install the [**P42 JavaScript 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/).

Cheers!

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 JavaScript Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)
![P42 JavaScript 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 [JavaScript 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, ...

P42 Blog

WTF JavaScript: A Variable with Side Effects