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

Add {…} to if-else and loops

Convert arrow function expression body into a block body.

Add {…} to arrow function

Add {…} to case

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

[Array.find(…)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) was introduced in ES2015 (ES6).
It returns the first element of an array for which the testing function parameter returns a truthy value. 

Before the introduction of `array.find(…)`, it was common to use the first element from a filtered result instead, i.e., `array.filter(…)[0]`. This refactoring modernizes the older expression.

Replace `anArray.filter(…)[0]` with `anArray.find(…)`.

Convert array.filter()[0] to array.find()

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

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

Change TypeScript array types into generic types.

Convert Type[] to Array<Type>

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 all variables that are declared via destructuring into separate regular variable declarations.

Convert destructuring to regular variable declaration

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

Convert property access to bracket notation

Replace ECMAScript #-private properties and methods with TypeScript private.

Convert #-private to TypeScript private

**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 a series of if-else statements with equality comparisons into a 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

The `anArray.map(aFunction)` function creates a new array that contains a transformed value for each original array element.
It can be used to replace patterns where a value is calculated for each array element and then pushed into a new array.

For example, 
```javascript
const values = [];
for (const element of elements) {
  values.push(f(element));
}
```
becomes
```javascript
const values = elements.map((element) => {
  return f(element);
});
```

When there is an inner spread expression, the refactoring converts to `anArray.flatMap`:
```javascript
const values = [];
for (const element of elements) {
  values.push(...element);
}
```
becomes
```javascript
const values = elements.flatMap((element) => {
  return element;
});
```

The refactoring works on regular `for` loops, `for..of` loops, and `.forEach` calls.

Convert a loop with `.push()` into a `.map()` call.

Convert loop to .map()

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 declaration to variable declaration

Replace `new Array(…)` calls with `[…]`.

Convert 'new Array(…)' to '[…]'

Convert a string to a basic template literal without expressions.

Convert string to template literal

Change a switch statement into a series of if-else statements

Convert switch to if-else

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

Convert an assignment expression into a `++` or `--` expression.

Convert to ++ / --

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

Replace TypeScript private properties and methods with ECMAScript #-private.

Convert TypeScript private to #-private

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

Expand shorthand property

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

Merge a ...[] expression into the outer array literal or destructuring expression.

Flatten array rest/spread property

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.

Replace assignment with 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

Inline the value of a variable into one of its occurrences.

Inline variable occurrence

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

Insert console.log for variable

Add an else statement to an existing if statement

Insert else statement

Change an if-statement into an early return or continue statement.

Introduce early return / continue

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

Move default value into parameter

Combine an object destructuring assignment with its preceding sibling.

Merge into preceding destructuring assignment

Merges two if-statements with the same body when possible.

Merge if-statement into preceding if-statement

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

Move array element

Move a property, constructor, or method definition up or down.

Move class member

Move a constant to the top-level scope of the module.

Move constant to top-level scope

Move an element inside an array destructuring expression up or down.

Move destructuring array element

Move a destructured expression inside a variable declaration into a separate variable declaration.

Extract destructured expression into separate variable declaration

Move a property inside an object destructuring expression up or down.

Move destructuring object property

Moves the assignment of the initial field value into the class constructor.

Move field initialization into constructor

Moves the assignment of the initial field value into the field declaration.

Move initialization into field declaration

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

Move if-else-if branches

Move a property, constructor or method definition up or down.

Move interface member

Move JSX attribute

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

Push down if statements into nested if statements and pull nested if statements up.

Move nested if

Move object property

Move statement

Move a `case` clause in a `switch` statement up or down.

Move switch case clause

Move type member

Move variable declaration

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-assist/remove-double-negation).

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

Push down negation

When a variable is initialized with a second variable, and that second variable is only used in that initialization, you can use the variable instead of the second variable and remove the indirection.

For example, here `variable` can be pushed in the definition of `secondVariable`:
```javascript
const secondVariable = someSource();
const variable = secondVariable;
```
becomes
```javascript
const variable = someSource();
```

Inlines a variable that is initialized with another variable into the declaration of that variable.

Push variable declaration into initial value

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

Replace single statement blocks with their inner statement.

Remove {…} from if-else and loops

Convert an arrow function block body into an expression body.

Remove {…} from arrow function

Remove {…} from case

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

Remove trailing array destructuring holes and empty array destructuring expressions.

Remove trailing array destructuring holes

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.

Expand JSX tag

Why is this refactoring helpful?

Configuration

Related Code Assists

Learn More

Available In