Replace JSX Fragments `<></>` that only contain a single child with that child.

Remove Unnecessary JSX Fragment

Convert an expression body of an arrow function body into a block body.

Add Braces to Arrow Function

### Why is this useful?
Long numbers can be hard to read, especially when they are in binary or hexadecimal formats. Separators break up a long number into more readable segments.

Increase the readability of long numbers and uncommon number formats by adding underscore separators.

Add Numeric Separator

### Why is this useful?
Using the shorthand notation for object properties reduces the amount of visual elements that need to be recognized, 
making the code easier to read.

Shorten object properties when the property name is the same as the property value.

Collapse Object Property into Shorthand

**The spread syntax (`...`) allows iterables like array expressions to be expanded in place where arguments are expected.**
It can used in place of `.apply`. For example `Math.min.apply(Math, args)` can be replaced with `Math.min(...args)`.


Replace `.apply()` calls by using the spread syntax (`...`).

Convert .apply() to Use Spread Syntax

Convert brack notation property access `o['a']` into dot notation property access `o.a`.

Convert Property Access to Dot Notation

Convert a conditional expression to an if-else statement.

Convert Conditional Expression to If-Else

Convert dot notation property access `o.a` into bracket notation property access `o['a']`.

Convert Property Access to Bracket Notation

**Arrow functions are a concise syntax that can often replace the regular function syntax.**
For example, `function(x, y) { return x * y }` can be replaced with `(x, y) => { return x * y; }`.

However, arrow functions have different semantics and cannot replace regular functions in all cases.
In particular, the scope of arrow functions (including binding of `this`) is established at creation time.
This difference makes arrow functions unsuitable for using them as methods, constructors, and in `call`, `apply`, and `bind` calls.


Replace function expressions with arrow functions, a more concise syntax.

Convert Function to Arrow Function

Convert property assignments with functions to method declarations.

Convert Function to Object Method

Convert an `if`-`else` return or assignment expression to a conditional expression.

Convert If-Else to Conditional Expression

Convert `if`-`else` with return statement into guard clause.

Convert If-Else to Guard Clause

Replace regular `for` loops with `.forEach()` loops.

Convert Loop to ForEach

**`for...of` loops over iterable objects, for example arrays or strings.**

It is easier to read than indexed `for` loops and can replace them in many cases.

### Refactoring Example
Before:
```javascript
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  console.log(element);
}
```

After:
```javascript
for (const element of elements) {
  console.log(element);
}
```


Replace regular `for` loops with `for...of` loops.

Convert Loop to For...Of

Use the exponentiation operator `**` instead of `Math.pow()`.

Convert Math.pow to Exponentiation Operator

Expand a shorthand object property (e.g. `{ a }`) to a regular property (e.g. `{ a: a }`).

Expand Shorthand Property

Extract the selected section of a string into a `const`.

Extract Substring into Variable

To extract a variable, you need to **select the full expression** that you would like to extract, and then invoke the refactor or extract context menu.

Extract one or more occurrences of an expression into a `const`.

Extract Variable

Swap the left and right operands and update the operator if necessary.

Flip Operator

Inline a string and basic template literals into a template.

Inline into Template

 **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.

 This refactoring simplifies the control flow and makes it easier to reason about a function.

Convert a variable assignment to a `return` statement.

Inline Return

Inline a `const` value into its references.

Inline Variable

Insert a 'console.log' statement for a selected variable when possible.

Insert console.log for Variable

### Why is this useful?
Negated expressions take more cognitive effort to reason about than regular expressions. Inverting negated conditions can remove unnecessary complexity. One exception is nullish comparisons where, for example, `!= null` indicates the existence of a value.

### Mechanics
The condition of the if statement or conditional expression is negated. The then and else blocks or expressions are exchanged.

Negate the condition of an if-statement or conditional expression and swap its content.

Invert Condition

**Default parameters allow providing default values for function parameters. These default values are used if nothing or `undefined` is passed into the function.**
For example, `function f(p = 42) { ... }` sets `p` to `42` if no value is passed in.

Previous ways of setting default values, for example `p = p || 42` can be converted to default parameters.
This refactoring supports converting the following expressions and variants of them:

- or assignment, e.g. `p = p || 42` or `p ||= 42`
- nullish coalescing operator, e.g. `p = p ?? 42`
- ternary with falsy check on parameter, e.g. `p = p ? p : 42`
- ternary with `null` check, e.g. `p = p == null ? 42 : p` or `p = p != null ? p : 42`
- ternary with `undefined` check, e.g. `p = p === undefined ? 42 : p`
- ternary with `typeof` check, e.g. `p = typeof p === "undefined" ? 42 : p`


Replace default value assignment expressions with default parameter values.

Lift Default into Parameter

### Why is this useful?
Lifting duplicated statements out of an if-else removes code duplication and clarifies that their execution is not dependent on the condition of the if statement.

### Mechanics
If the first or the last statement is the same in the if-block and the else-block of an if-statement, then the statement can be pulled out. 
If the if-else does not contain any other statements, it can be removed.

Move a duplicated statement to the front or back of an if-else statement.

Lift Statement Out Of If-Else

Nested single `if` statements inside `else` blocks can be combined into `else if` statements.

Merge Nested If Inside Else into Else-If

Combine two nested `if` statements without additional operations into a single `if`-statement, using `&&` to combine the conditions.

Merge Nested If-Statements

Move an operator out of an assignment into a binary expression.

Pull Operator Out of Assignment

Move the not-operator (`!`) out of a binary expression.

Pull Up Negation

Move the not-operator (`!`) into a negated expression and update the expression.

Push Down Negation

Move an operator from a binary expression into an assignment operator, e.g., `+=`.

Push Operator into Assignment

Convert a block body of an arrow function into an expression body.

Remove Braces from Arrow Function

Remove double negation (`!!`) expressions.

Remove Double Negation

Remove an empty 'else' block from an 'if' statement.

Remove Empty Else Block

Remove an empty 'if' block from an 'if' statement. Replaces it with the 'else' block when available.

Remove Empty If Block

Remove redundant else if conditions and else statements that are never invoked.

Remove Redundant Else

### Why is this useful?
Unnecessary template literals add accidental complexity. They make the code harder to understand and can prevent the detection of further improvement opportunities.

Replace a template literal with a single inner expression and no prefix or suffix with its inner expression.

Remove Unnecessary Template Literal

**`let` and `const` are block-scope variable declarations that can replace 'var' declarations in many cases.**

`const` declares blocked-scoped variables that cannot be re-assigned. `let` declares block-scoped variables that can be changed.
They are available since ES6 and are preferred over function-scope, modifiable `var` declarations, because they make it easier to reason about the code.

When there are several variables declared in a statement, this refactoring does not change the declaration to prevent formatting breakages and linter issues.


Replace `var` with block-scoped variables `let` and `const`.

Replace Var with Let and Const

Seperate a sub-condition that is fully covered into a nested if-else.

Separate Condition into Nested If

Replace binary expression with simpler equivalent expression

Simplify Binary Expression

**Convert variable declarations with multiple variables into separate declarations that declare one variable each.**

For example,
```javascript
let a = 2, b;
```
is converted into
```javascript
let a = 2;
let b;
```

Convert declarations with multiple variables into separate declarations for each variable.

Split Variable Declaration

Surround a sequence of statements in a `try...catch` block.

Surround with Try-Catch

Replace `Array.indexOf()` checks with `Array.includes()`.

Use Array.includes()

The `== null` check is a concise expression to identify nullish values (`null` and `undefined`).

This refactoring replaces the following combinations of longer strict equality checks with the shorter `null` comparison:

- `a === null || a === undefined` becomes `a == null`
- `b !== null && b !== undefined` becomes `b != null`
- `x.f(1, 2) === null || x.f(1, 2) === undefined` becomes `x.f(1, 2) == null`


Replace different of nullish checks with `== null`.

Use == null Comparison

**The nullish coalescing operator (`??`) returns its right side when its left side is nullish** (`null` or `undefined`), and its left side otherwise.
For example, `const x = a ?? b` would set `x` to `a` if `a` has a value, and to `b` if `a` is `null` or `undefined`.

The nullish coalescing operator is very useful to **provide default values when a value or an expression is nullish**.
Before its introduction in ES2020, this default value pattern was often expressed using the conditional operator.

This refactoring simplifies many types of default value expressions to nullish coalescing operator expressions:

- `a == null ? x : a` becomes `a ?? x`
- `a != null ? a : x` becomes `a ?? x`
- `a !== null && a !== undefined ? a : x` becomes `a ?? x`
- `f(1) != null ? f(1) : x` becomes `f(1) ?? x`
- `if (a != null) { b = a; } else { b = x; }` becomes `b = a ?? x;`
- etc.


Replace default value expression with nullish coalescing operator (`??`) expressions.

Use Nullish Coalescence in Default Expression

**The optional chaining operator returns the value of an object property when the object is available and `undefined` otherwise.**
`.?` is similar to the standard `.` chaining operator, with an added check if the object is defined.

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

This refactoring simplifies existing checks to use the optional chaining pattern:

- `x && x.a` becomes `x?.a`
- `x != null && x.a` becomes `x?.a`
- `x !== null && x !== undefined && x.a` becomes `x?.a`
- `x && x.a && x.a.b && x.a.b.c && x.a.b.c.d` becomes `x?.a?.b?.c?.d`
- etc.


Replace chains of nullish checks with the optional chaining operator (`?.`).

Use Optional Chaining

**String.prototype.endsWith() checks if a string ends with another string.**

This refactoring replaces index-based single-character comparison with `endsWidth`,
e.g. `s[s.length - 1] === '/'` becomes `s.endsWith('/')`.


`String.prototype.endsWith()` checks if a string ends with another string.

Use String.endsWith()

**String.prototype.startsWith() checks if a string starts with another string.**

This refactoring replaces index-based single-character comparison with `startsWidth`,
e.g. `s[0] === '/'` becomes `s.startsWith('/')`.


`String.prototype.startsWith()` checks if a string starts with another string.

Use String.startsWith()

**Template literals are string templates that can include variables and expressions.**
They can replace string concatenation and are often easier to read. Example: `` `Hello, ${name}!` ``

### Mechanics

This refactoring supports converting the first line of concatenated strings into template literals or shortened strings:

- concatenated string literals will be combined, e.g. `"a" + "b"` will become `"ab"`
- concatenated expressions and variables will be embedded in templates, e.g. `"a" + x + "b"` will become `` `a${x}b` ``
- unnecesary escaping of quotes is removed when string are combined or transformed into template literals


Replace string and template literal concatenation with template literals.

Remove Unnecessary JSX Fragment

Learn More

Available In