**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}!` ``

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.

Use Template Literal

Add braces to an arrow function body that is an expression.

Add Braces to Arrow Function

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

Add Numeric Separator

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

Negate the condition of an `if`-statement and swap the content of the `if` and `else` blocks.

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

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

Remove braces from an arrow function that just returns an expression.

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

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

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

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 Template Literal

Learn More