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


Merge string and template literal concatenation into a single template literal or string.

Merge string concatenation

Convert arrow function expression body into a block body.

Add {...} to arrow function

Add `{...}` to JSX attribute string literal value.

Add {...} to JSX attribute

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

Add numeric separator

### Why is this refactoring helpful?
Unnecessary closing elements (with potential whitespace) are additional text that needs to be read and understood. Self-closing elements make the code more concise.

Convert an empty JSX tag into a self-closing tag.

Collapse JSX tag

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

Collapse object property into shorthand

Convert `condition && aFunction();` and similar expression statements into if statements.

Convert && to if statement

**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 with the spread operator `...`

Convert .apply() to spread syntax

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

Convert array.indexOf() into array.includes()

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

Convert property access to dot notation

This refactoring replaces string comparison chains with an `array.includes()` call. It works for regular string comparisons with `|| ===` and for negated string comparisons with `&& !==`. When the string comparison is negated, the `.includes` call is prefixed with `!`.

## Example

```javascript
if (obj.property === "value1" 
    || obj.property === "value2" 
    || obj.property === "value3") {
    // ...
}
```
becomes
```javascript
if (["value1", "value2", "value3"].includes(obj.property)) {
    // ...
}
```



Replace `|| value === 'aString'` and `&& value !== 'aString'`  chains with `array.includes()`.

Convert string comparison chain to array.includes

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 into a conditional expression.

Convert if-else into conditional expression

Convert if-else statement chain with equality comparisons to switch statement.

Convert if-else to switch

### Why is this refactoring helpful?
The `const` keyword prevents re-assigning the value of the variable. It makes it easier to reason about the code since re-assignment does not need to be considered.

Replace `let` declarations that have no re-assignment with `const` declarations.

Convert let to const

The refactoring supports converting regular `for` loops over an array with an index variable as well as `for..of` loops into `.forEach()` loops.

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 and `anArray.forEach` loops with `for...of` loops.

Convert loop to for..of

Replace `for..of` with a regular `for` loop that has an index variable.

Convert loop to for

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

Convert Math.pow to exponentiation operator

Converts a named function to a const declaration with a function expression.

Convert named function to function expression

Convert a string to a basic template literal without expressions.

Convert string to template literal

Convert a simple template literal without expressions into a string.

Convert template literal to string

Convert a variable declaration that accesses an object property to a destructuring assignment.

Convert to destructuring assignment

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

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

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


Replace various guard expressions with the optional chaining operator (`?.`).

Convert to optional chaining

### Why is this refactoring helpful?
Expanding a self-closing JSX element is a preparation step to add text or child elements to a JSX element.

Expand JSX tag

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

Expand shorthand property

### Why is this refactoring helpful?
Extracting a React component helps you modularize your code. The extracted component can be reused, documented, and tested separately. The original code becomes more concise and readable, especially if you choose a descriptive component name.

### Limitations
P42 analyzes only the file that you are currently working on. Type information might be accurate and the parameter type signature of the extracted Function Component might contain `unknown` types.

Extract JSX element or fragment into a React Function Component.

Extract React function component

Extract the selected text (including expressions from template literals) into a `const` variable.

Extract selected text 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` variable.

Extract variable

The flip operator refactoring exchanges a binary expression's left and right operand. When necessary, it updates the operator, e.g., when changing from `a < b` to `b > a`.

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

Flip operator

Inline a string or a basic template literal into an outer template literal.

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

The variable can be a `const`, `let`, or `var` declaration. It must not be re-assigned.

Inline a variable 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

Combine an object destructuring assignment with its preceding sibling.

Merge into preceding destructuring assignment

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

Convert the initial assignment of a variable into its declaration initializer.

Merge variable declaration and initialization

### Why is this useful?
Moving 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 statement is the same in the if-block and the else-block of an if-statement, then the statement can be pulled out. and moved above the if-statement.

Move a first statement that appears in both the if and the else block out of the if-else statement.

Move duplicated first statement out of if-else

### Why is this useful?
Moving 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 last statement is the same in the if-block and the else-block of an if-statement, then the statement can be pulled out. and moved below the if-statement.
If the if-else does not contain any other statements, it can be removed.

Move a last statement that appears in both the if and the else block out of the if-else statement.

Move duplicated last statement out of if-else

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

Pull operator out of assignment

### Why is this refactoring helpful?
Pulling a negation out of an expression can be part of a larger refactoring, e.g. when moving the negation to a different location in the code.

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

Pull up negation

### Why is this refactoring helpful?
Push negation into an expression can simplify code, either directly or by enabling the [removal of double negation](/documentation/code-action/remove-double-negation).

Push the not-operator (`!`) into an expression and negate it.

Push down negation

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

Push operator into assignment

Push a parameter of an immediately-invoked function expressions (IIFEs) or an immediately-invoked arrow functions (IIAFs) into the function body.

Push parameter into IIFE/IIAF

Convert an arrow function block body into an expression body.

Remove {...} from arrow function

Remove `{...}` from a JSX attribute expression value that contains a string literal.

Remove {...} from JSX attribute

Remove console.log

### Why is this refactoring helpful?
Removing an unnecessary double negation simplifies the code.

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 immediately-invoked function expressions (IIFEs) and immediately-invoked arrow functions (IIAFs) without parameters.

Remove IIFE/IIAF

Remove redundant else-if conditions and unreachable else statements.

Remove redundant else if

The "Remove unnecessary conditional expression" refactoring replaces a conditional expression (ternary) in two situations:

1. When the ternary returns `true` when truthy and `false` when falsy.
   ```javascript
   aCondition ? true : false
   // changes into:
   aCondition
   ```

1. When the ternary returns the same value, regardless of whether the condition is truthy or falsy:
   ```javascript
   aCondition ? aValue : aValue
   // changes into:
   aValue
   ```

Replace a conditional expression with its condition or its result.

Remove unnecessary conditional expression

Lift the else content of an `if`-`else` with a return statement to the outer indentation level.

Remove unnecessary else

### Why is this refactoring useful?
An expression statement without side effects does not affect the behavior of the program. Removing it reduces the amount of code that needs to be understood and removes unnecessary computation.

Remove an expression statement that has no side-effects.

Remove unnecessary expression statement

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

Remove unnecessary JSX fragment

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

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

Remove unnecessary template literal

### Why is this useful?
Unused variables need to be read and understood, even though they have no impact on the program. Removing them makes programs easier to understand.

Remove a variable that is not read or written.

Remove unused variable

Replace Lodash `_.every` with `array.every`.

Replace _.every with array.every

Replace Lodash `_.filter` with `array.filter`.

Replace _.filter with array.filter

Replace Lodash `_.each` and `_.forEach` with `array.forEach`.

Replace _.each and _.forEach with array.forEach

Replace _.map with array.map

Replace _.noop with arrow Function

Replace Lodash `_.some` with `array.some`.

Replace _.some with array.some

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

Convert var to let or const

This refactoring replaces `void 0` and other constant `void` expressions without side-effects with `undefined` (unless `undefined` is declared as a local variable).

Replace `void 0` and other constant `void` expressions with `undefined`.

Replace void 0 with undefined

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

Separate repeated condition into nested if-else

Replace binary expression with simpler equivalent expression

Simplify binary expression

Split the condition of an if statement on `||` or `&&` when possible.

Split if statement

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

Separate the variable initialization from its declaration.

Split variable declaration and initialization

Wrap JSX elements in a JSX fragment `<>...</>`.

Surround with <>...</>

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

**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.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.startsWith()` checks if a string starts with another string.

Merge string concatenation

Mechanics

Related Code Actions

Learn More

Available In