# Refactoring JavaScript

> **TL;DR**
> Required plugin:
>
>
>
> `JavaScript and TypeScript`:   the plugin is bundled with IntelliJ IDEA and enabled by default.

[Refactoring](https://en.wikipedia.org/wiki/Code_refactoring) means updating the source code without changing the behaviour of the application. Refactoring helps you keep your code solid, [dry](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), and easy to maintain.

## Move Symbol refactoring

Besides [moving files and folders](refactoring-source-code.html), IntelliJ IDEA lets you move JavaScript top-level symbols.  The Move Symbol Refactoring works for classes, functions, and variables in ES6 modules.

Procedure: Move a class, a function, or a variable

1. Select the symbol to move.

2. Press `F6` (Windows), `F6` (macOS), `F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ I` (macOS System Shortcuts), `F6` (XWin), `F6` (GNOME), `F6` (KDE), `F6` (Emacs), `F6` (Sublime Text), `F6` (Sublime Text (macOS)), `Ctrl+M` (NetBeans), `Ctrl+R, O` (Visual Studio), `⌘ R, O` (Visual Studio (macOS)), `Alt+Shift+V` (Eclipse), `⌘ ⌥ V` (Eclipse (macOS)) or choose `Refactor | Move` from the context menu or from the main menu. Alternatively, choose `Refactor | Refactor This` or press `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)), then choose `Move` from the list.

The Move Module Members dialog opens.

3. Specify the destination file and select the members to move.

4. By default, IntelliJ IDEA automatically raises the visibility of the members to the required level. If you want to keep the visibility level unchanged, click As is in the Visibility.

## Pull Class Members Up refactoring

The Pull Class Members Up refactoring moves class methods upwards in the class hierarchy – from the current class to a superclass.

Example: moving a class method to a superclass

Suppose you have a class `AccountingDepartment` that extends an abstract class `Department`. In this example, the Pull Class Members Up refactoring moves the `printMeeting()` method from `AccountingDepartment` to its superclass `Department`.

Before refactoring:

```JAVASCRIPT
class Department {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }
}

class AccountingDepartment extends Department {
    printMeeting() {
        console.log("The Accounting Department meets each Monday at 10am.");
    }

    generateReports() {
        console.log("Generating accounting reports...");
    }
}
```

After refactoring:

```JAVASCRIPT
class Department {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }

    printMeeting() {
        console.log("The Accounting Department meets each Monday at 10am.");
    }
}

class AccountingDepartment extends Department {
    generateReports() {
        console.log("Generating accounting reports...");
    }
}
```

Procedure: Move the methods of a class to a superclass

1. Place the caret anywhere inside the class from which you want to pull the members up.

2. Choose `Refactor | Pull Members Up` from the main menu or from the context menu. The Pull Members Up dialog opens.

3. From the list, choose the superclass where you want to move the methods.

4. To pull a method up, select the checkbox next to it in the Members to be pulled up list.

## Rename refactorings

Besides [Renaming files and folders](refactoring-source-code.html), which is available in the context of any language, you can also rename classes, methods, functions, variables, and parameters. IntelliJ IDEA changes the name of the symbol in its declaration and by default all its usages in the current project.

### Rename classes and their methods

Procedure:

1. In the editor, place the caret or select the class or method to rename and press `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R` (NetBeans), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) or choose `Rename` from the context menu.

2. In the Rename dialog that opens, type the new name of the class or method.

3. Optionally:

* Select the Search in comments and strings and Search for text occurrences checkboxes to rename the usages of the class or method in comments, string literals, and text.

* By default, the class or method is renamed in the entire project. You can select another [scope](configuring-scopes-and-file-colors.html) from the list.

#### Keep the names of classes and containing files in compliance

When you rename a class, IntelliJ IDEA also suggests renaming the file if it has the same name. If you accept the suggestion, IntelliJ IDEA updates the name of this file in import statements in other files.

![Rename class and file](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_rename_class_and_file.animated.gif)

If you reject this suggestion, you can rename the file at any time later using the Rename file intention action. Another intention action suggests moving the class to a new file with the corresponding name. The format of the suggested name is determined by the style chosen from the Filename convention list on the [Code Style: JavaScript](settings-code-style-javascript.html#ws_settings_code_style_js_code_generation) page.

![ws_js_refactoring_rename_file_intention_custom_naming_convention.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_rename_file_intention_custom_naming_convention.png)

This is useful if you have just created a new file but then came up with a better name when started typing a class or interface in it. To invoke the intention actions, place the caret at the name of the class of interest and press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)).

### Rename functions, variables, and parameters

![Rename a function](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_javascript_rename_function.animated.gif)

The Rename refactoring for functions, variables, and parameters might be performed inplace, but you can press `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R` (NetBeans), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) to configure the refactoring scope in the Rename dialog.

To open the Rename dialog by default,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code editing`, and select the In modal dialogs option in the Specify refactorings options area.

![Refactoring settings: open settings in modal dialogs](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_settings.png)

Procedure:

1. In the editor, place the caret or select the function, variable, or parameter to rename and press `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R` (NetBeans), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) or choose `Rename` from the context menu.

2. If IntelliJ IDEA detects usages of the symbol in comments or strings, specify whether you want these usages also renamed or not.

3. In the field with canvas, type the new name of the function, variable, or parameter.

4. Alternatively:

Press `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R` (NetBeans), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) once more to open the Rename dialog.

* Select the Search in comments and strings and Search for text occurrences checkboxes to rename the usages of the symbol in comments, string literals, and text.

* By default, the symbol is renamed in the entire project. You can select another [scope](configuring-scopes-and-file-colors.html) from the list.

### Rename constants

Procedure:

1. In the editor, place the caret or select the constant to rename and press `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R` (NetBeans), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) or choose `Rename` from the context menu.

2. In the Rename dialog that opens, type the new name of the constant.

3. Optionally:

* Select the Search in comments and strings and Search for text occurrences checkboxes to rename the usages of the constant in comments, string literals, and text.

* By default, the constant is renamed in the entire project. You can select another [scope](configuring-scopes-and-file-colors.html) from the list.

### Rename dynamic usages of symbols

Because of the dynamic nature of JavaScript, in some cases a dynamic reference is a valid usage and should be renamed. However, often renaming dynamic usages is not the expected behavior. In the example below, changing `test()` to `test1()` in `rename.test()` is correct while in `hello.test()` it would be an error.

Before renaming:

```JAVASCRIPT
class Rename{
    test() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test();
let b = hello.test();
```

Dynamic usage is not renamed:

```JAVASCRIPT
class Rename{
    test1() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test1();
let b = hello.test();
```

Dynamic usage renamed:

```JAVASCRIPT
class Rename{
    test1() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test1();
let b = hello.test1();
```

IntelliJ IDEA always shows the Preview window before applying a complex refactoring.

* To have the dynamic usages of a symbol shown, press ![the Show Dynamic Usages toggle button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_find_usages_show_dynamic_usages.png)

* By default, in the Refactoring Preview tool window, all the dynamic usages of a symbol are marked as excluded and grouped under the Dynamic references in code to <symbol> node. To apply the refactoring to a usage, select Include from its context menu.

![Refactoring preview for dynamic usages](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_rename_symbol_dynamic_usages_error_preview.png)

## Extract refactorings

IntelliJ IDEA provides various Extract refactorings to introduce parameters, variables, constants, fields, methods, and functions. To run any of these refactorings, select the expression to refactor and choose `Refactor | <target>`. You can select an entire expression or place the caret anywhere inside it and IntelliJ IDEA will help you with the selection.

### Introduce Parameter

Use the Introduce Parameter refactoring to replace an expression in the calls of a function with a parameter. IntelliJ IDEA will update the declaration and the calls of the function accordingly. The default value of the new parameter can be initialized inside the function body or passed through function calls.

Suppose you have a piece of code with a hardcoded `1` in the function `calculate_sum(i)`. With the Introduce Parameter refactoring, you can replace this hardcoded `1` with a `i2` parameter. The new `i2` parameter can be extracted as optional or as  required.

Example 1: Introducing an optional parameter

A new parameter `i2` is extracted as an optional parameter. The new parameter is initialized in the body of `calculate_sum(i)` and the call of `calculate_sum(i)` in `show_sum()` is not changed.

Refer to [Choosing the
parameter type (optional)](#javascript_extract_parameter_inplace_optional_required_default_value) below.

Before refactoring:

```JAVASCRIPT
function calculate_sum(i) {
    alert('Adding ' + 1 + ' to ' + i);
    return 1 + i;
}

function show_sum() {
    alert('Result: ' + calculate_sum(5));
}
```

After refactoring:

```JAVASCRIPT
function calculate_sum(i, i2) {
    i2 = i2 || 1;
    alert('Adding ' + i2 + ' to ' + i);
    return i2 + i;
}

function show_sum() {
    alert('Result: ' + calculate_sum(5));
}
```

Example 2: Introducing a required parameter

A new parameter `i2` is extracted as a required parameter, the call of `calculate_sum(i)` in `show_sum()` is changed accordingly.

See [Choosing the
parameter type (required)](#javascript_extract_parameter_inplace_optional_required_default_value) below.

Before refactoring:

```JAVASCRIPT
function calculate_sum(i) {
    alert('Adding ' + 1 + ' to ' + i);
    return 1 + i;
}

function show_sum() {
    alert('Result: ' + calculate_sum(5));
}
```

After refactoring:

```JAVASCRIPT
function calculate_sum(i, i2) {
    alert('Adding ' + i2 + ' to ' + i);
    return i2 + i;
}

function show_sum() {
    alert('Result: ' + calculate_sum(5, 1));
}
```

Procedure: Introduce a parameter

1. In the editor, place the caret within the expression that you want to convert into a parameter and press `Ctrl+Alt+P` (Windows), `⌘ ⌥ P` (macOS), `⌘ ⌥ P` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ P` (macOS System Shortcuts), `Ctrl+Alt+P` (XWin), `Ctrl+Alt+P` (GNOME), `Ctrl+Alt+P` (KDE), `Ctrl+Alt+P` (Emacs), `Ctrl+Alt+P` (Sublime Text), `⌘ ⌥ P` (Sublime Text (macOS)), `Ctrl+Alt+P` (NetBeans), `Ctrl+R, P` (Visual Studio), `⌘ R, P` (Visual Studio (macOS)), `Ctrl+Alt+P` (Eclipse), `⌘ ⌥ P` (Eclipse (macOS)) or select Refactor | Introduce Parameter from the context menu.

Alternatively, do one of the following:

* Press `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) and select `Introduce Parameter`.

* Go to `Refactor | Extract | Parameter`.

2. If several expressions are detected in the current caret location, select the required one from the Expressions list.

![ws_js_extract_parameter_select_expression.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_extract_parameter_select_expression.png)

3. If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences from the Multiple occurrences found list.

![ws_js_extract_parameter_multiple_occurrences.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_extract_parameter_multiple_occurrences.png)

Finally, the popup for configuring the refactoring appears.

![ws_js_extract_parameter_specify_parameter_name_and_type.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_extract_parameter_specify_parameter_name_and_type.png)

4. Select the Generate JSDoc to have a [JSDoc](https://github.com/jsdoc/jsdoc) comment block generated. This may be helpful if you need to specify a custom default parameter value.

5. Choose the type of the new parameter (optional or  required) and specify its default value, if applicable:

* If the Optional parameter checkbox is selected, the parameter will be initialized with the default value in the function body. See [Introduce Parameter example 1](#javascript_extract_parameter_examples_example_1_optional_parameter) above.

* If the Optional parameter checkbox is cleared, the default parameter value will be passed through the existing function calls. All the function calls will change according to the new function signature and a parameter initialization will be added to the function body. See [Introduce Parameter example 2](#javascript_extract_parameter_examples_example_2_required_parameter) above.

Initially, IntelliJ IDEA accepts the expression where the refactoring is invoked as the default value. In most cases you do not need to change it. If it is still necessary, specify another default value in the JSDoc comment in the format `@param <parameter name> - <default value>`.

6. Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with canvas. Press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) when ready.

![ws_js_extract_parameter_result.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_extract_parameter_result.png)

Also note that in the ES6 code, the new default function parameter syntax `function calculate_sum(i, i2 = 1)` will be applied instead of `i2 = i2 || 1;`. Learn more about default function parameters from the [https://developer.mozilla.org website](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters).

#### Choosing the refactoring mode

You can extract a parameter right in the editor (in the in-place mode) [as described above](#javascript_extract_parameter_inplace_refactoring) or use the Introduce Parameter dialog. These two approaches are rather similar, the difference is as follows:

* [Previewing the results of the refactoring](refactoring-source-code.html). In the dialog, you can click Preview and examine the expected changes in the dedicated tab of the Find tool window. In the in-place mode, this functionality is not available.

* [Specifying the default parameter value](#javascript_extract_parameter_inplace_optional_required_default_value). In the dialog, IntelliJ IDEA suggests the default parameter value in the Value field where you can accept the suggestion or specify another value. In the in-place mode, IntelliJ IDEA treats the expression where the refactoring is invoked as the default parameter value. To specify another value, you have to use a JSDoc comment block.

By default, IntelliJ IDEA runs the Introduce Parameter refactoring in the in-place mode. To use the  Extract Parameter  dialog,     open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Editor | Code Editing, and select the In modal dialogs option in the Refactorings area.

### Introduce Variable

Use the  Introduce Variable refactoring to replace an expression with a [function-scoped variable (var)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var) or a [block-scoped variable (let)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let). This refactoring makes your source code easier to read and maintain.

Suppose you have a function with a partially hardcoded expression in the `return` statement:

```JAVASCRIPT
Parenizor.method('toString', function ())
{
    return '(' + this.getValue() + ')';
}
```

With the Introduce Variable refactoring, you can replace the `'(' + this.getValue() + ')'` expression with a variable, for example, `string`. The scope of the extracted variable depends on the statement used in its declaration `var` or `let` and the context in which the new variable is declared (inside or outside a function).

Example 1: Introducing a block-scoped variable with a let statement declaration

A variable `string` is extracted from the `'(' + this.getValue() + ')'` expression in the `return` statement. The new variable is declared with a `let` statement inside `Parenizor.method('toString', function ())`.

Before refactoring:

```JAVASCRIPT
Parenizor.method('toString', function ())
{
    return '(' + this.getValue() + ')';
}
```

After refactoring:

```JAVASCRIPT
Parenizor.method('toString', function ())
{
    let string = '(' + this.getValue() + ')';
    return string;
}
```

Example 2: Introducing a variable and declaring it outside any function

A variable `appName` is extracted from the `navigator.appName` expression and declared with a `var` statement outside any function.

Before refactoring:

```JAVASCRIPT
let browserName = "N/A";
if (navigator.appName.indexOf("Netscape") !== -1) {
    browserName = "NS";
} else if (navigator.appName.indexOf("Microsoft") !== -1) {
    browserName = "MSIE";
} else if (navigator.appName.indexOf("Opera") !== -1) {
    browserName = "O";
}                    
```

After refactoring:

```JAVASCRIPT
let browserName = "N/A";
let appName = navigator.appName;
if (appName.indexOf("Netscape") !== -1) {
    browserName = "NS";
} else if (appName.indexOf("Microsoft") !== -1) {
    browserName = "MSIE";
} else if (appName.indexOf("Opera") !== -1) {
    browserName = "O";
}
```

Procedure: Introduce a variable

1. In the editor, select the expression to convert into a variable and press `Ctrl+Alt+V` (Windows), `⌘ ⌥ V` (macOS), `⌘ ⌥ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ V` (macOS System Shortcuts), `Ctrl+Alt+V` (XWin), `Ctrl+Alt+V` (GNOME), `Alt+Shift+V` (KDE), `Ctrl+Alt+V` (Emacs), `Ctrl+Alt+V` (Sublime Text), `Ctrl+Alt+V` (Sublime Text (macOS)), `Alt+Shift+V` (NetBeans), `Ctrl+R, V` (Visual Studio), `⌘ R, V` (Visual Studio (macOS)), `Alt+Shift+L` (Eclipse), `⌘ ⌥ L` (Eclipse (macOS)) or select `Refactor | Introduce Variable`  from the context menu.

Alternatively, do one of the following:

* Press `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) and select `Introduce Variable`.

* Go to `Refactor | Extract | Variable`.

2. If several expressions are detected in the current caret location, select the required one from the Expressions list.

![Extract variable - select an expression](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_variable_inplace_select_expression.png)

3. If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences from the Multiple occurrences found list.

![Extract variable - multiple occurrences](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_variable_inplace_multiple_occurrences.png)

Finally, the popup for configuring the refactoring appears.

4. From the list, choose the statement to use in the declaration of the new variable:

* Choose var to introduce a [function-scoped variable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var).

* Choose let to introduce a [block-scoped variable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), refer to [Example 2](#javascript_extract_variable_examples_example_1_declaration_inside_a_function_let_statement) above.

* Choose const to introduce a [constant](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const).

![Extract variable - choose the declaration type](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_variable_inplace_choose_scope_type.png)

5. Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with canvas. Press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) when ready.

#### Choosing the refactoring mode

You can extract a variable right in the editor (in the in-place mode) [as described above](#javascript_extract_variable_inplace_refactoring) or use the Extract Variable dialog. By default, IntelliJ IDEA runs the Introduce Variable refactoring in the in-place mode. To use the  Extract Variable  dialog,     open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Editor | Code Editing, and select the In modal dialogs option in the Refactorings area.

### Introduce Constant

Use the Introduce Constant refactoring to replace an expression with a [constant](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). This refactoring makes your source code easier to read and maintain. It also helps you avoid using hardcoded constants without any explanations about their values or purposes.

Inside classes, you can introduce a readonly field or select a scope if several scopes are suitable. In other contexts, IntelliJ IDEA introduces only local constants.

Example 1: Selecting a scope for introduced constant

Suppose you have class `AccountingDepartment`  with method `printName()` where `"Department name :"` is hardcoded.

```JAVASCRIPT
class AccountingDepartment {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }

    printMeeting() {...
    }

    generateReports() {...
    }
}
```

IntelliJ IDEA can introduce a new constant as local and declare it inside the `printName()` function or as global or module and declare it outside the class.

Local constant introduced:

```JAVASCRIPT
class AccountingDepartment {
    name;

    printName() {
        const departmentName = "Department name: ";
        console.log(departmentName + this.name);
    }

    printMeeting() {...
    }

    generateReports() {...
    }
}
```

Global constant introduced:

```JAVASCRIPT
const departmentName = "Department name: ";

class AccountingDepartment {
    name;

    printName() {
        console.log(departmentName + this.name);
    }

    printMeeting() {...
    }

    generateReports() {...
    }
}

```

Example 2: Introducing a constant without selecting a scope

If the Introduce Constant refactoring is invoked from outside any class, IntelliJ IDEA automatically introduces a local variable and declares it inside the current function or block.

Before refactoring:

```JAVASCRIPT
let output = MyFunction(5, 8);
document.writeln("The value is .".output);
```

After refactoring:

```JAVASCRIPT
let output = MyFunction(5, 8);
const Value = "The value is ";
document.writeln(Value.output);

```

Procedure: Introduce a constant

1. In the editor, select the expression to convert into a constant and press `Ctrl+Alt+C` (Windows), `⌘ ⌥ C` (macOS), `⌘ ⌥ C` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ C` (macOS System Shortcuts), `Ctrl+Alt+C` (XWin), `Ctrl+Alt+C` (GNOME), `Ctrl+Alt+C` (KDE), `Ctrl+Alt+C` (Emacs), `Ctrl+Alt+C` (Sublime Text), `⌘ ⌥ C` (Sublime Text (macOS)), `Alt+Shift+C` (NetBeans), `Ctrl+Alt+C` (Visual Studio), `⌘ ⌥ C` (Visual Studio (macOS)), `Ctrl+Alt+C` (Eclipse), `Ctrl+Alt+C` (Eclipse (macOS)) or select `Refactor | Introduce Constant` from the context menu.

Alternatively, do one of the following:

* Press `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) and select `Introduce Constant`.

* Go to `Refactor | Extract | Constant`.

2. If several expressions are detected in the current caret location, select the required one from the Expressions list.

![Introduce Constant: select the expression](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_constant__2_several_expressions.png)

3. If refactoring is invoked from inside a class, introduce a readonly field or select the scope of the new constant, refer to [Example 1](#javascript_extract_constant_example_1).

![Introduce Constant: select scope](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_constant__3_select_scope.png)

For global constants, several occurrences of the selected expression can be found. Select  Replace this occurrence only  or Replace all occurrences from the Multiple occurrences found  list.

![Introduce Constant: multiple occurrences for global constant](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_constant__4_multiple_occurrences.png)

4. Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with canvas. Press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) when ready.

![Introduce Constant: select the name](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_extract_constant__5_specify_name.png)

### Introduce Field

The Introduce Field refactoring declares a new field and initializes it with the selected expression. The original expression is replaced with the usage of the field.

> **Note:**
> The Introduce Field refactoring is available only within classes.

In the examples below, the same field, `_calcArea`, is introduced. The examples illustrate three different ways to initialize the introduced field.

Example 1: The introduced field is initialized in the enclosing method

Before refactoring:

```JAVASCRIPT
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}
```

After refactoring:

```JAVASCRIPT
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    _calcArea;

    get area() {
        this._calcArea = this.calcArea();
        return this._calcArea;
    }

    calcArea() {
        return this.height * this.width;
    }
}                        
```

Example 2: The extracted field is initialized in its declaration

Before refactoring:

```JAVASCRIPT
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}
```

After refactoring:

```JAVASCRIPT
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    _calcArea = this.calcArea();

    get area() {
        return this._calcArea;
    }

    calcArea() {
        return this.height * this.width;
    }
}                        
```

Example 3: The extracted field is initialized in the constructor of the class

Before refactoring:

```JAVASCRIPT
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}
```

After refactoring:

```JAVASCRIPT
class Rectangle {
    constructor(height, width) {
        this._calcArea = this.calcArea();
        this.height = height;
        this.width = width;
    }

    _calcArea;

    get area() {
        return this._calcArea;
    }

    calcArea() {
        return this.height * this.width;
    }
}
```

Procedure: Introduce a field

1. In the editor, select the expression to convert into a field and press `Ctrl+Alt+F` (Windows), `⌘ ⌥ F` (macOS), `⌘ ⌥ F` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ F` (macOS System Shortcuts), `Ctrl+Alt+F` (XWin), `Ctrl+Alt+F` (GNOME), `Ctrl+Alt+F` (KDE), `Ctrl+Alt+F` (Emacs), `Ctrl+Alt+F` (Sublime Text), `Ctrl+Alt+F` (Sublime Text (macOS)), `Alt+Shift+E` (NetBeans), `Ctrl+R, F` (Visual Studio), `⌘ R, F` (Visual Studio (macOS)), `Ctrl+Alt+F` (Eclipse), `⌘ ⌥ F` (Eclipse (macOS)) or choose `Refactor | Introduce Field` from the context menu.

Alternatively, do one of the following:

* Press `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) and select `Introduce Field`.

* Go to `Refactor | Extract | Field`.

2. In the popup, choose where the new field will be initialized:

* Current method, refer to [Example 1](#javascript_extract_field_examples_example_1_field_initialized_in_enclosing_method) above.

* Field declaration, refer to [Example 2](#javascript_extract_field_examples_example_2_field_initialized_in_field_declaration) above.

* Constructor, refer to [Example 3](#javascript_extract_field_examples_example_3_field_initialized_in_constructor) above.

![Extract field in-place](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_extract_field_inplace.png)

3. Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with canvas. Press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) when ready.

#### Choosing the refactoring mode

By default, IntelliJ IDEA runs the Introduce Field refactoring right in the editor (in the in-place mode),                     [as described above](#extract_field_inplace).

To use the Extract Field dialog when refactoring,     open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Editor | Code Editing, and select the In modal dialogs option in the Refactorings area.

### Extract Method

The Extract Method refactoring lets you create a named method or function with the extracted code. When the Extract Method refactoring is invoked, IntelliJ IDEA detects the variables that are the input for the selected code fragment and the variable that is the output for it. The detected output variable is used as the return value for the extracted method or function.

In the examples below, a function is extracted from the `c = a + b;` expression.

Example 1: Extracting a globally scoped function from an expression inside another function

The `c = a + b;` expression, where the refactoring is invoked, is inside the `MyFunction()` function. The global destination scope is chosen.

Example 1.1: A function declaration is generated

Before refactoring:

```JAVASCRIPT
function MyFunction(a, b) {
    c = a + b;
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);
```

After refactoring:

```JAVASCRIPT
function extracted(a, b) {
    c = a + b;
}

function MyFunction(a, b) {
    extracted(a, b);
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);
```

Example 1.2: The extracted function is declared inside an expression

Before refactoring:

```JAVASCRIPT
function MyFunction(a, b) {
    c = a + b;
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);
```

After refactoring:

```JAVASCRIPT
let extracted = function (a, b) {
    c = a + b;
};

function MyFunction(a, b) {
    extracted(a, b);
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);
```

Example 2: Extracting a globally scoped function from an expression outside any function

The `c = a + b;` expression, where the refactoring is invoked, is outside any function. Therefore, no choice of the destination scope is available.

Example 2.1: A function declaration is generated

Before refactoring:

```JAVASCRIPT
c = a + b;
```

After refactoring:

```JAVASCRIPT
function extracted() {
    c = a + b;
}

extracted();
```

Example 2.2: The extracted function is declared inside an expression

Before refactoring:

```JAVASCRIPT
c = a + b;
```

After refactoring:

```JAVASCRIPT
let extracted = function () {
    c = a + b;
};
extracted();
```

Example 3: Extracting a function with a definition inside the enclosing function

The `c = a + b;` expression, where the refactoring is invoked, is inside the `MyFunction()` function. The function MyFunction destination scope is chosen.

Before refactoring:

```JAVASCRIPT
function MyFunction(a, b) {
    c = a + b;
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);
```

After refactoring:

```JAVASCRIPT
function MyFunction(a, b) {
    function extracted() {
        c = a + b;
    }

    extracted();
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);

```

Procedure: Extract a function

1. In the editor, select a code fragment to convert into a function and press `Ctrl+Alt+M` (Windows), `⌘ ⌥ M` (macOS), `⌘ ⌥ M` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ M` (macOS System Shortcuts), `Ctrl+Alt+M` (XWin), `Ctrl+Alt+M` (GNOME), `Ctrl+Alt+M` (KDE), `Ctrl+Alt+M` (Emacs), `Ctrl+Alt+M` (Sublime Text), `⌘ ⌥ M` (Sublime Text (macOS)), `Alt+Shift+M` (NetBeans), `Ctrl+R, M` (Visual Studio), `⌘ R, M` (Visual Studio (macOS)), `Alt+Shift+M` (Eclipse), `⌘ ⌥ M` (Eclipse (macOS)) or choose `Refactor | Extract Method` from the context menu.

Alternatively, do one of the following:

* Press `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) and select `Extract Method`.

* Go to `Refactor | Extract | Method`.

> **Tip:**
> The selected code fragment can be a set of statements or an expression used somewhere in the code.

2. If the selected expression is inside a function, choose the destination scope from the list:

* If you choose global, the extracted function will be declared outside any function. See [Example 1](#javascript_extract_method_examples_example_1_global_inside_another_function) above.

* To define the extracted function inside the current enclosing function, choose function <current enclosing function name>. See [Example 3](#javascript_extract_method_examples_example_3_function_scope_inside_another_function) above.

![Extract method - choose the destination scope](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_refactoring_js_extract_method_extract.png)

3. Specify the name of the function that will be extracted.

![Extract method - choose the name of the function that will be extracted](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_refactoring_js_extract_method_specify_name.png)

Procedure: Open the Extract Function dialog by default

* open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Editor | Code Editing, and select the In modal dialogs option in the Refactorings area.

### Extract Superclass

The Extract Superclass refactoring creates a new abstract class based on the members of the current class. The created class is extended automatically.

> **Note:**
> The Extract Superclass refactoring is available only in ES6 code. For more information, refer to [Choosing the
> JavaScript language version](javascript-specific-guidelines.html#ws_js_choose_language_version).

Suppose you have a class `AccountingDepartment` and you expect that the `printName()` method from it will be re-used.

```JAVASCRIPT
class AccountingDepartment {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }

    printMeeting() {
        console.log("The Accounting Department meets each Monday at 10am.");
    }

    generateReports() {
        console.log("Generating accounting reports...");
    }
}
```

You can extract a superclass `Department` and include the `printName` and the `Name` field in it.

```JAVASCRIPT
class Department {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }
}

class AccountingDepartment extends Department {
    printMeeting() {
        console.log("The Accounting Department meets each Monday at 10am.");
    }

    generateReports() {
        console.log("Generating accounting reports...");
    }
}
```

Procedure: Extract a superclass

1. Place the caret anywhere inside the class from which you want to extract a superclass.

2. Select `Refactor | Extract | Superclass` from the main menu or `Refactor | Extract Superclass` from the context menu. The Extract Superclass dialog opens.

3. Specify the name of the new superclass and select the checkboxes next to the class members you want to include in it. Optionally, mark the members that you want to make abstract.

4. In the Destination file field, specify the location of the file where the new class will be. By default, the field shows the path to the current file where the refactoring was invoked.

5. Choose Extract Superclass. IntelliJ IDEA creates a new class and marks the source class with `extends`.

To create a superclass and replace the references to the source class with references to the superclass in parameters of methods, choose Extract superclass and use it where possible. IntelliJ IDEA shows the proposed changes in the Refactoring Preview pane of the Find tool window.

### Introduce object or array destructuring

Destructuring lets you easily unpack values from arrays and objects into variables. This functionality has a very concise syntax that is often used when you need to pass data in your application.  For more information, refer to  [Exploring ES6](http://exploringjs.com/es6/ch_destructuring.html).

In IntelliJ IDEA, you can invoke destructuring using an intention action `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)). With the Replace with object/array destructuring action, the original assignment is removed. To keep the assignment, use Introduce object/array destructuring.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_refactoring_destructuring.mp4)

Procedure: Replace the original assignment

1. Place the caret at a value from an array or an object and press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)).

2. From the list, select Replace with object destructuring or Replace with array destructuring.

If some of the values from an array or an object are not used, these elements will be skipped:

Procedure: Keep the original assignment

1. Place the caret at a value from an array or an object and press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)).

2. From the list, select Introduce object destructuring or Introduce array destructuring.

This intention action can be very handy when working with React class components:

Procedure: Generate destructuring parameters for a function

1. Place the caret at the parameters of a function and press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)).

2. From the list, select Convert parameters to object.

![Destructuring with intention action: Convert parameters to object](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_js_destructuring_convert_params.png)

## Inline refactorings

Inline refactorings are opposite to [Extract refactorings](#javascript_extract_refactorings).

Example 1: Inline Variable

The Inline Variable refactoring replaces a redundant usage of a variable or a constant with its initializer. This type of refactoring is available only for block-scoped and function-scoped variables.

Before refactoring:

```JAVASCRIPT
Parenizor.method('toString', function () {
    var string = '(' + this.getValue() + ')';
    return string;
}                            
```

After refactoring:

```JAVASCRIPT
Parenizor.method('toString', function () {
    return '(' + this.getValue() + ')';
}
```

Example 2: Inline Function

The Inline Method/Inline Function refactoring results in placing the body of a method or a function into the body of its caller(s); the method/function itself is deleted.

In the example below, the body of `Sum()` is placed in the body of `Multiplication()` and `Division()`.

Before refactoring:

```JAVASCRIPT
function Sum(a, b) {
    return a + b;
}

function Multiplication(a, b) {
    c = Sum(a, b);
    d = c * c;
    return d;
}

function Division(a, b) {
    c = Sum(a, b);
    d = Multiplication(a, b);
    result = c / d;
    return result;
}
```

After refactoring:

```JAVASCRIPT
function Multiplication(a, b) {
    c = a + b;
    d = c * c;
    return d;
}

function Division(a, b) {
    c = a + b;
    d = Multiplication(a, b);
    result = c / d;
    return result;
}

```

Procedure: Run an Inline refactoring

1. In the editor, place the caret at the symbol to be inlined and press `Ctrl+Alt+N` (Windows), `⌘ ⌥ N` (macOS), `⌘ ⌥ N` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ N` (macOS System Shortcuts), `Ctrl+Alt+N` (XWin), `Ctrl+Alt+N` (GNOME), `Ctrl+Alt+N` (KDE), `Ctrl+Alt+N` (Emacs), `Ctrl+Alt+N` (Sublime Text), `⌘ ⌥ N` (Sublime Text (macOS)), `Ctrl+Alt+N` (NetBeans), `Ctrl+R, I` (Visual Studio), `⌘ R, I` (Visual Studio (macOS)), `Alt+Shift+I` (Eclipse), `⌘ ⌥ I` (Eclipse (macOS)) or choose `Refactor | Inline` from the context menu or from the main menu.

## Change Signature refactoring

Use the Change Signature refactoring to change the function name, to add, remove, reorder, and rename parameters, and to propagate new parameters through the hierarchy of calls.

You can also add a parameter using the  [Introduce Parameter](#javascript_extract_parameter) refactoring.

The examples below show different ways to run the Change Signature refactoring. In all the cases, the function `result()` is renamed to `generate_result()` and a new parameter `input` is added to this function. The examples show how the function call, the calling function `show_result()`, and other code fragments may be affected depending on the refactoring settings.

Example 1: Renaming a function, adding a parameter, and passing its value through the function call

In this example, the function `result()` is renamed to `generate_result()`, a  parameter `input` is added, and the value `100` is passed as a parameter in the function call.

Before refactoring:

```JAVASCRIPT
function result() {
}

function show_result() {
    alert('Result: ' + result());
}
```

After refactoring:

```JAVASCRIPT
function generate_result(input) {
}

function show_result() {
    alert('Result: ' + generate_result(100));
}
```

Example 2: Renaming a function and adding a default parameter

In this example, the function `result()` is renamed to `generate_result()`. A default parameter `input` is added with the value `100`. The new parameter is initialized in the `generate_result()` in the format `function generate_result(input = 100) {}` for ES6 language level or `input = input || 100` for ES5.

Before refactoring:

```JAVASCRIPT
function result() {
}

function show_result() {
    alert('Result: ' + result());
}
```

After refactoring:

```JAVASCRIPT
function generate_result(input = 100) {
}

function show_result() {

alert('Result: ' + generate_result());
}


```

Example 3: Renaming a function, adding a default parameter, and propagating the parameter to the function call

In this example, the function `result()` is renamed to `generate_result()`. A default parameter `input` is added with the value `100`. The new parameter is initialized in the `generate_result()` in the format `function generate_result(input = 100) {}` for ES6 language level or `input = input || 100` for ES5. The `input` parameter is propagated through the calling function show_result() so the function call is changed accordingly.

Before refactoring:

```JAVASCRIPT
function result() {
}

function show_result() {
    alert('Result: ' + result());
}
```

Before refactoring:

```JAVASCRIPT
function generate_result(input = 100) {
}

function show_result() {

alert('Result: ' + generate_result());
}


```

Procedure: Invoke Change Signature

* In the editor, place the caret within the name of the function to refactor and  press `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+F6` (NetBeans), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS)) or choose Refactor | Change Signature from the context menu or from the main menu. The Change Signature dialog opens.

Procedure: Rename a function

* In the Change Signature dialog `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+F6` (NetBeans), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS)), edit the  Name field.

Procedure: Manage the function parameters

* In the Change Signature dialog `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+F6` (NetBeans), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS)), use the table of parameters and the buttons to the right of it:

* To add a new parameter, click ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg)  `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) and specify the name of the new parameter and its default value or the value to be passed through function calls. See [Example 1](#javascript_change_signature_examples_example_1_rename_function_and_add_required_parameter) and [Example 2](#javascript_change_signature_examples_example_2_rename_function_and_add_optional_parameter) above.

* To remove a parameter, click any of the cells in the corresponding row and click ![the Delete button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.remove.svg) `Alt+Delete` (Windows), `⌘ ⌦` (macOS), `⌘ ⌦` (IntelliJ IDEA Classic (macOS)), `⌘ ⌦` (macOS System Shortcuts), `Alt+Delete` (XWin), `Alt+Delete` (GNOME), `Alt+Delete` (KDE), `Alt+Delete` (Emacs), `Alt+Delete` (Sublime Text), `⌘ ⌦` (Sublime Text (macOS)), `Alt+Delete` (NetBeans), `Ctrl+R, D` (Visual Studio), `⌘ R, D` (Visual Studio (macOS)), `Alt+Delete` (Eclipse), `Alt+Delete` (Eclipse (macOS)).

* To reorder the parameters, use ![the Previous Occurrence button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.up.svg)  `Alt+Up` (Windows), `⌃ ⇧ ↑` (macOS), `⌃ ↑` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ ↑` (macOS System Shortcuts), `Alt+Up` (XWin), `Alt+Up` (GNOME), `Alt+Up` (KDE), `Alt+Up` (Emacs), `Alt+Up` (Sublime Text), `Alt+Up` (Sublime Text (macOS)), `Ctrl+Alt+Up` (NetBeans), `Alt+Up` (Visual Studio), `⌃ ⇧ ↑` (Visual Studio (macOS)), `Ctrl+Shift+Up` (Eclipse), `⌃ ⌥ ↑` (Eclipse (macOS)) and ![the Next Occurrence button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.down.svg) `Alt+Down` (Windows), `⌃ ⇧ ↓` (macOS), `⌃ ↓` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ ↓` (macOS System Shortcuts), `Alt+Down` (XWin), `Alt+Down` (GNOME), `Alt+Down` (KDE), `Alt+Down` (Emacs), `Alt+Down` (Sublime Text), `Alt+Down` (Sublime Text (macOS)), `Ctrl+Alt+Down` (NetBeans), `Alt+Down` (Visual Studio), `⌃ ⇧ ↓` (Visual Studio (macOS)), `Ctrl+Shift+Down` (Eclipse), `⌃ ⌥ ↓` (Eclipse (macOS)).

* To rename a parameter, edit the Name field.

* If necessary, [propagate the new parameter](#propagate_params) to the functions that call the current function.

Procedure: Propagate a parameter along the hierarchy of calls

1. In the Change Signature dialog `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+F6` (NetBeans), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS)), select the parameter and click ![the Propagate Parameter button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/propagateParameters.png). The Select Methods to Propagate New Parameters dialog opens. The left-hand pane shows the hierarchy of function calls. When you select a function, the right-hand pane shows its code and the code of the function it calls in the Caller Method and Callee Method fields respectively.

See [Example 3](#javascript_change_signature_examples_example_3_rename_function_and_add_required_parameter_propagate_param_to_call) above.

2. In the left-hand pane, select the checkboxes next to the functions where you want to propagate the parameter and click OK.

Procedure: Preview the changes and complete the refactoring

1. In the Change Signature dialog, click Preview.

2. In the Refactoring Preview tab of the [Find tool window](find-tool-window.html), [view the expected changes](refactoring-source-code.html), make the necessary adjustments, and click Do Refactor when ready.

> **Note:**
> To perform the refactoring right away, click Refactor.

## Convert default export to named export

For classes, functions, constant variables, strings, objects, and types, you can replace `export default` statements with named `export` statements and have the corresponding `import` statements updated accordingly.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_convert_default_export_to_named_intro.mp4)

If a symbol is re-exported, the corresponding `export` statements are also updated.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_convert_default_export_to_named_reexport.mp4)

Procedure:

The refactoring can be invoked both from `export default` and from `import` statements.

* Place the caret at an `export default` statement or at the name of what you are exporting, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Convert default export to named. To toggle the preview, press `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)).

![Invoke export default conversion from an export statement](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_convert_default_export_to_named_from_export.png)

* Inside an `import` statement, place the caret at the name of what is imported, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Convert default export to named. The preview (`Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))) shows how the `import` statement will be updated.

![Invoke export default conversion from an import statement](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_convert_default_export_to_named_from_import.png)

> **Note:**
> * You can also use this action in the TypeScript, Vue, React, and Angular contexts.
>
> * This conversion is only available if the exported symbol is named.

## Convert named export to default export

For classes, functions, constant variables, strings, objects, and types, you can replace named `export` statements with `export default` statements and have the corresponding `import` statements updated accordingly.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/javascript_refactoring_convert_named_export_to_default_export_intro.mp4)

Procedure:

The refactoring can be invoked both from `export default` and from `import` statements.

* Place the caret at the name of what you are exporting inside an `export` statement, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Convert named export to default export. To toggle the preview, press `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)).

![Convert named export to default export from an export statement](https://resources.jetbrains.com.cn/help/img/idea/2026.2/javascript_refactoring_convert_named_export_to_default_export_from_export.png)

* Inside an `import` statement, place the caret at the name of what is imported, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Convert named export to default export. The preview (`Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))) shows how the `import` statement will be updated.

![Convert named export to default export from an export statement](https://resources.jetbrains.com.cn/help/img/idea/2026.2/javascript_refactoring_convert_named_export_to_default_export_from_import.png)

> **Note:**
> The refactoring is only available if there is no `default` export in the exports’ file yet.

## See also

### Procedures

[Code refactoring](refactoring-source-code.html)