Refactoring JavaScript

This feature is supported in the Ultimate edition only.

Refactoring means updating the structure of the source code without changing the behaviour of the application. Refactoring helps you keep your code solid, dry, and easy to maintain.

Move refactorings

Moving JavaScript and TypeScript top-level symbols

The Move Symbol Refactoring for JavaScript and TypeScript works for classes, functions, and variables in ES6 modules. To invoke this refactoring:

1. Select the symbol to move.
2. Choose Refactor | Move on the main menu or on the context menu of the selection or just press F6.

   Alternatively, choose Refactor | Refactor This or press Ctrl+Shift+Alt+T, then choose Move from the list.

3. In the dialog box that opens, specify the destination file.

In the example below, the function changeSelectedPlaylists is moved from the PlayerActions.js file to the PlaylistsActions.js file. Note that an import statement for the types that changeSelectedPlaylists requires is added to PlaylistsActions.js. Also all the imports of changeSelectedPlaylists in the other files are updated.

Rename refactorings

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 | Extract | <target>. You can select an entire expression or place the cursor anywhere inside it and use smart selection.

Choosing an expression to refactor with Smart Selection

1. Place the cursor before or within the expression, choose Refactor | Extract | <refactoring target> or press Ctrl+Alt+V.

   

2. Select the relevant expression from the Expressions pop-up list. The list shows all the expressions to which the refactoring is applicable in the current context.

   

   As you navigate through the suggested expressions in the pop-up, the code highlighting in the editor changes accordingly.

Extract Parameter

Use the Extract 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.

To extract a parameter

1. In the editor, place the cursor within the expression that you want to convert into a parameter and press Ctrl+Alt+P or choose Refactor | Extract | Parameter on the context menu. The Extract Parameter dialog opens.

   If more than one expression is detected for the current cursor position, click the required one in the Expressions list that appears.

2. Specify the name of the new parameter and its value. Initially, the Value field shows ths selected expression, and in most cases you do not need to change it.
3. Choose where the new parameter will be initialized:
   • If the Optional parameter check box is selected, the parameter will be initialized with the default value in the function body. Specify the default value in the Value field.
   • If the Optional parameter check box is cleared, the default parameter value will be passed through the existing function calls. Specify the default parameter value in the Value field. All the function calls will change according to the new function signature and parameter initialization will be added to the function body.
   Learn more from Default function parameters.

Extract Parameter examples

The table below shows two different ways to extract a function parameter:

• In the first example, a new parameter is extracted as an optional parameter so the corresponding function call is not changed.
• In the second example, the parameter is extracted as a required parameter. So the corresponding function call is changed accordingly.

// A new parameter will be added to this
// function to replace the 1's:

function calculate_sum(i) {

alert('Adding ' + 1 + ' to ' + i);
return  1 + i;
}

function show_sum() {

// Here is the function call:

alert('Result: ' + calculate_sum(5));
}

// When adding a new parameter we'll specify
// that it should be an optional one.

// The new parameter i2 has been added
// as an optional parameter:

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

function show_sum() {

// The function call has not changed:

alert('Result: ' + calculate_sum(5));
}

// A new parameter will be added to this
// function to replace the 1:

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

function show_sum() {

// Here is the function call:

alert('Result: ' + calculate_sum(5));
}

// When adding a new parameter we'll specify
// that it should be a required one.

// The new parameter i2 has been added
// as a required parameter:

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

function show_sum() {

// The function call changed accordingly:

alert('Result: ' + calculate_sum(5, 1));
}

Extract Variable

Use the Extract Variable refactoring to replace an expression with a global variable (var) or a block scope local variable (let). You can run the refactoring from the Extract Variable dialog or right from the editor (inplace refactoring).

Extracting a variable using the dialog box

1. In the editor, select the expression to convert into a variable and choose Refactor | Extract | Variable on the context menu or press Ctrl+Alt+V.
   

   Alternatively, use smart selection.

2. In the Extract Variable Dialog that opens:
   • Accept the suggested variable name or type a custom one.
   • In the Variable declaration area, choose the scope of the variable that will be extracted:
     • Choose var to introduce a global variable.
     • Choose let to introduce a block scope local variable.
   • If more than one occurrence of the selected expression is found, select the Replace all occurrences check box or clear it to have only the current occurrence replaced.
   • Click OK.

     

Extracting a variable in-place

To run this refactoring from the editor, select the Enable in-place mode check box in the Refactorings area of the General page (open the Settings/Preferences dialog (Context Menu), and click Editor | General).

1. In the editor, select the expression to convert into a variable and choose Refactor | Extract | Variable on the context menu or press Ctrl+Alt+V.

   Alternatively, use smart selection.

2. If more than one occurrence of the selected expression is found, choose Replace this occurrence only or Replace all occurrences in the Multiple occurrences found pop-up menu.

   

3. In the pop-up menu, choose the scope of the variable:
   • Choose var to introduce a global variable.
   • Choose let to introduce a block scope local variable.

   

4. Accept one of the suggested variable names by double-clicking it in the pop-up list or specify a custom name in a text box. Press Escape when ready.

Extract Variable examples

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

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

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

var 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";
}

var browserName = "N/A";
var 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";
}

Extract Constant

Use the Extract Constant refactoring to replace an expression with a constant. This refactoring makes your source code easier to read and maintain. It also helps you avoid using hard-coded constants without any explanations about their values or purpose.

Extract Constant example

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

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

Extracting a constant using the dialog box

1. In the editor, select the expression to convert into a constant and choose Refactor | Extract | Variable on the context menu or press Ctrl+Alt+V.
   

   Alternatively, use smart selection.

2. In the Extract Variable Dialog that opens:
   • Accept the suggested constant name or type a custom one.
   • In the Variable declaration area, choose const.
   • If more than one occurrence of the selected expression is found, select the Replace all occurrences check box or clear it to have only the current occurrence replaced.
   • Click OK.

     

Extracting a constant in-place

To run this refactoring from the editor, select the Enable in-place mode check box in the Refactorings area of the General page (open the Settings/Preferences dialog (Context Menu), and click Editor | General).

1. In the editor, select the expression to convert into a constant and choose Refactor | Extract | Variable on the context menu or press Ctrl+Alt+V.

   Alternatively, use smart selection.

2. If more than one occurrence of the selected expression is found, choose Replace this occurrence only or Replace all occurrences in the Multiple occurrences found pop-up menu.

   

3. In the pop-up menu, choose const.

   

4. Accept one of the suggested constant names by double-clicking it in the pop-up list or specify a custom name in a text box. Press Escape when ready.

Extract Field

This refactoring is available only within classes.

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

Extracting a field using the dialog box

1. In the editor, select the expression to convert into a field and choose Refactor | Extract | Field on the context menu or press Ctrl+Alt+F.
   Alternatively, use smart selection:
   1. Place the cursor before or within the expression, choose Refactor | Extract | Variable or press Ctrl+Alt+V.

      

   2. Select the relevant expression from the Expressions pop-up list that shows all the expressions relevant for the current cursor position.

      

      As you navigate through the suggested expressions in the pop-up, the code highlighting in the editor changes accordingly.

   Alternatively, use smart selection.

2. In the Extract Field Dialog that opens:
   • Accept the suggested name for the new field or type a custom one.
   • Choose where the new field will be initialized, the available options are Current method, Field declaration, and Class constructor.

Extracting a field in-place

To run this refactoring from the editor, select the Enable in-place mode check box in the Refactorings area of the General page (open the Settings/Preferences dialog (Context Menu), and click Editor | General).

1. In the editor, select the expression to convert into a field and choose Refactor | Extract | Field on the context menu or press Ctrl+Alt+F.

   Alternatively, use smart selection.

2. In the pop-up menu, choose where the new field will be initialized, the available options are Current method, Field declaration, and Class constructor.
3. Accept one of the suggested field names by double-clicking it in the pop-up list or specify a custom name in a text box. Press Escape when ready.

Extract Method

When the Extract Method refactoring is invoked, IntelliJ IDEA analyses the selected block of code and detects variables that are the input for the selected code fragment and the variables that are output for it. The detected output variable is used as a return value for the extracted method.

Extracting a function

1. In the editor, select a block of code to be transformed into a function.

   The selected code fragment does not necessarily have to be a set of statements. It may also be an expression used somewhere in the code.

2. On the main menu or on the context menu of the selection, choose Refactor | Extract Method or press Ctrl+Alt+M.
3. In the Extract Function dialog box that opens, specify the name of the new function.
4. To have the new function defined through a function expression, select the Declare functional expression check box.
5. In the Parameters area, configure the set of variables to be passed to the new function as parameters. By default, all the variables from the specified scope are listed.
   • To have a variable included in the parameter set, select the check box next to it.
   • To change the order of parameters, use the Move Up and Move Down buttons.
6. View and check the declaration of the function to be generated in the Signature preview read-only area.

Extracting a method

Extract Method examples

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

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

function MyFunction(a,b) {
    c = sum(a,b);
    d = c * c;
    return d;
}

Extract Include File

The Extract Include File refactoring is used to extract a fragment of HTML, JavaScript, or CSS code into a separate include file.

1. In the editor, select the code block to be extracted and choose Refactor | Extract | Extract Include File on the main menu or on the context menu of the selection.
2. In the Extract Include File dialog box that opens, specify the name of the target include file in the Name for extracted include file text box.

   Type the file name without an extension.

3. In the Extract to directory text box, specify the directory to store the include file in. Leave the predefined directory, or redefine it manually, or click the Browse button and choose the desired folder in the Select Target Directory dialog box that opens.
4. Click OK, when ready. IntelliJ IDEA extracts the selected source code into the specified file in the target directory and generates the corresponding reference in the source file.

   If there are any duplicates of the selected fragment, IntelliJ IDEA will suggest to change them for the corresponding reference as well.

Inline refactorings

Inline refactorings are opposite to Extract refactorings.

Running an Inline refactoring

1. In the editor, place the cursor at the symbol to be inlined and press Ctrl+Alt+N or choose Refactor | Inline on the context menu.

Inline Variable

The Inline Variable refactoring replaces a redundant usage of a variable with its initializer. This refactoring is opposite to the Extract Variable refactoring.

Inline Variable example

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

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

Inline Method

The Inline Function/Method refactoring results in placing the method's or function's body into the body of its caller(s); the method or function is deleted. This refactoring is opposite to the Extract Method in JavaScript.

Inline Method example

function sum(a, b){
return a + b;
}

function multiplication(a, b){
c = sum(a, b);
d = c * c;
return d;
}

function division(a, b){
result = sum(a, b) / multiplication(a, b);
return result;
}

function multiplication(a, b){
c = a + b;
d = c * c;
return d;
}

function division(a, b){
result = a + b / multiplication(a, b);
return result;
}

Change Signature refactoring

In JavaScript, you can use the Change Signature refactoring to change the function name, to add, remove, reorder, and rename parameters, and to propagate new parameters through the method call hierarchy.

To invoke Change Signature
In the editor, place the cursor within the name of the function to refactor and press Ctrl+F6 or choose Refactor | Change Signature on the context menu. The Change Signature dialog opens.

To run Change Signature

1. In the Change Signature dialog (Ctrl+F6), click Preview.
2. In the Refactoring Preview tab of the Find tool window, view the expected changes, make the necessary adjustments, and click Do Refactor when ready. For details, see Refactoring Source Code: Preview.

To rename a function
In the Change Signature dialog (Ctrl+F6), edit the Name field.

To manage the function parameters
In the Change Signature dialog (Ctrl+F6), use the table of parameters and the buttons to the right of it:

• To add a new parameter, click  (Alt+Insert) and specify the name, type, initializer, and default value of the new parameter.

  If necessary, propagate the new parameter to the functions that call the current function.

• To remove a parameter, click any of the cells in the corresponding row and click  (Alt+Delete).
• To reorder the parameters, use  (Alt+Up) and  (Alt+Down).
• To rename a parameter, edit the Name field.

To propagate a parameter along the hierarchy of calls

1. In the Change Signature dialog (Ctrl+F6), select the parameter and click . 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.
2. In the left-hand pane, select the check boxes next to the functions where you want to propagate the parameter and click OK.

Change Signature examples

The table below shows 4 different ways to run the same 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.

// This is the function whose signature will be changed:


function$#160;result() {
// some code here
}

function show_result() {

// Here is the function call:

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

// Now we'll rename the function and
// add one (required) parameter.

// The function has been renamed to generate_result.
// The new parameter input has been added.

function generate_result(input) {
// some code here
}

function show_result() {

// The function call changed accordingly:

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

// When performing the refactoring, 100 was specified as
// the parameter value.

// This is the function whose signature will be changed:


function result() {

// some code here
}

function show_result() {

// Here is the function call:

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

// Now we'll rename the function and add one parameter.
// This time, we'll specify that the parameter is optional.

// The function has been renamed to generate_result.
// The new optional parameter input has been added.

function generate_result(input) {
input = input || 100;
// some code here
}

function show_result() {

// The function call changed accordingly:

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

// When performing the refactoring, 100 was specified as
// the parameter value.

// This is the function whose signature will be changed:


function result() {
// some code here
}

// This function will also change its signature:

function show_result() {

// Here is the function call:

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

// Now we'll rename the function and add one required
// parameter. We'll also ask IntelliJ IDEA to propagate
// the new parameter through the calling function show_result()
// to the function call.

// The function has been renamed to generate_result.
// The new parameter input has been added.

function generate_result(input) {
// some code here
}

// Note the new function parameter:

function show_result(input) {

// The function call changed accordingly:

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

// This is the function whose signature will be changed:
function result() {

// some code here
}

// This function will also change its signature:

function show_result() {

// Here is the function call:

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

// Now we'll rename the function and add one optional
// parameter. We'll also ask IntelliJ IDEA to propagate
// the new parameter through the calling function show_result()
// to the function call.

// The function has been renamed to generate_result.
// The new optional parameter input has been added.

function generate_result(input) {
input = input || 100;
// some code here
}

// Note the new function parameter:

function show_result(input) {
input = input || 100;

// The function call changed accordingly:

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

// When performing the refactoring, 100 was specified as
// the parameter value.