
If-statements can contain duplicated statements with minimal differences. For example, copy-paste changes can result in such code duplication. The duplication can often be simplified by extracting the difference using the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) and reducing the if-else to the deduplicated statement.

### Before (Example)
```javascript
if (direction === "left") {
  move(original.x, -10);
} else {
  move(original.x, 10);
}
```

### Refactoring Steps
1. [Extract variable](/documentation/code-assist/extract-variable) twice with the same variable name
1. [Split declaration and initialization](/documentation/code-assist/split-variable-declaration-and-initialization) of both extracted constants
1. [Move duplicated first statement out of if-else](/documentation/code-assist/move-first-statement-out-of-if-else)
1. [Move duplicated last statement out of if-else](/documentation/code-assist/move-last-statement-out-of-if-else)
1. [Convert the if-else statement into a conditional expression](/documentation/code-assist/convert-if-else-to-conditional-expression)
1. [Merge variable declaration and initialization](/documentation/code-assist/merge-variable-declaration-and-initialization)
1. [Inline variable](/documentation/code-assist/inline-variable)

### After (Example)
```javascript
move(original.x, direction === "left" ? -10 : 10);
```

Convert an if-else statement with a duplicated function call into a function call with a conditional expression.

Simplify duplicated function call inside if-else statement


When a variable is compared against a string value, the easiest way to start is with a `variable === "value"` or `variable !== "value"` comparison.
Over time, these can grow into longer sequences, e.g. `variable === "value1" || variable === "value2" || variable === "value3"`.

The values that the variable is compared to are often a meaningful collection on their own. 
Refactoring them into an array and using `array.includes(variable)` can facilitate reuse and extension, and a meaningful array name can make it easier to understand the code.

### Before (Example)
```javascript
if (extension !== "js" && extension !== "ts" && extension !== "tsx") {
  handleUnsupportedExtension(extension)
}
```

### Refactoring Steps
1. [Convert string comparison chain to array.includes](/documentation/code-assist/convert-comparison-chain-to-array-includes)
1. [Extract the array into a variable](/documentation/code-assist/extract-variable)
1. Move the extracted array variable, e.g., to the top of the file (not shown)

### After (Example)
```javascript
const SUPPORTED_EXTENSIONS = ["js", "ts", "tsx"];
if (!SUPPORTED_EXTENSIONS.includes(extension)) {
  handleUnsupportedExtension(extension)
}
```

Convert && !== and || === chains into array.includes.

Extract array constant from string comparison chain


Sometimes functions are only used as property values. In such cases, you can convert the functions into methods.

### Before (Example)
```javascript
function aFunction(aParameter) {
  doSomething(aParameter);
}

const anObject = {
  aMethod: aFunction
};
```

### Refactoring Steps
1. [Convert the named function into a variable that contains the function expression](/documentation/code-assist/convert-named-function-to-function-expression)
1. [Inline the variable](/documentation/code-assist/inline-variable)
1. [Convert the function to an object method](/documentation/code-assist/convert-function-to-object-method)

### After (Example)
```javascript
const anObject = {
  aMethod(aParameter) {
    doSomething(aParameter);
  }
};
```


Inline a standalone function that is only used as a property value.

Inline function as method


[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) is a way to access array values or object properties. It can be used in variable declarations, parameters, and catch clauses. 

You can use destructuring to access several properties at once, making it possible to concisely unpack an object into local variables. These local variables can replace redundant property access chains and make the code easier to read.

### Before (Example)
```javascript
for (const item of items) {
  totalAmount += item.price.amount - item.price.discount;
  totalDiscount += item.price.discount;

  logPurchase(
    item.customer.country, 
    item.customer.zipCode, 
    item.price.amount
  );
}
```

### Refactoring Steps
1. [Extract all occurrences](/documentation/code-assist/extract-variable) of the object properties into a variable for each property. The name of the variables should match the property names.
1. [Convert the variables to destructuring expressions](/documentation/code-assist/convert-to-destructuring-assignment).
1. Move up the variables so that they are next to each other.
1. [Merge the destructuring expressions](/documentation/code-assist/merge-into-preceding-destructuring-assignment).
1. [Push the combined destructuring expression into the destructured variable](/documentation/code-assist/push-into-initial-value-declaration) (optional).

### After (Example)
```javascript
for (const { price, customer } of items) {
  totalAmount += price.amount - price.discount;
  totalDiscount += price.discount;

  logPurchase(
    customer.country, 
    customer.zipCode, 
    price.amount
  );
}
```

Destructure an object and use variables instead of property access chains.

Introduce object destructuring


If-statements are sometimes used to initialize variables with different values depending on a condition. This usage of if-statements can lead to unnecessary code duplication and can often be shortened with the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).

### Before (Example)
```javascript
let movedObject;
if (direction === "left") {
  movedObject = moveLeft(original);
} else {
  movedObject = moveRight(original);
}
```

### Refactoring Steps
1. [Convert the if-else statement into a conditional expression](/documentation/code-assist/convert-if-else-to-conditional-expression)
1. [Merge variable declaration and initialization](/documentation/code-assist/merge-variable-declaration-and-initialization)
1. [Convert let to const](/documentation/code-assist/convert-let-to-const)

### After (Example)
```javascript
const movedObject = direction === "left"
  ? moveLeft(original)
  : moveRight(original);
```

The change to `const` is only possible if the variable is not re-assigned later. It has the advantage that it communicates the immutability of `movedObject`.

Convert a conditional variable initialization with if-else to a conditional expression.

Simplify duplicated function call inside if-else statement

Before (Example)

Refactoring Steps

After (Example)

Learn More