Refactoring JavaScript

Required plugin:

Javascript and TypeScript - The plugin is bundled with PhpStorm and enabled by default.

Pull Class Members Up refactoring

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.

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...");
    }
}

Rename refactorings

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.

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

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

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

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

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

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

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

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

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

Extract refactorings

Introduce Parameter

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.

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.

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

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

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

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

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

Introduce Variable

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

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

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

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 ()).

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

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

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

Introduce Constant

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

class AccountingDepartment {
    name;

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

    printMeeting() {...
    }

    generateReports() {...
    }
}

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

class AccountingDepartment {
    name;

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

    printMeeting() {...
    }

    generateReports() {...
    }
}

https://resources.jetbrains.com/help/img/idea/2022.3/ws_js_refactoring_extract_constant_local_light.png

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

Introduce Field

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

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

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

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

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

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

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

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

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

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

Extract Method

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

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

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

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

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

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

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

c = a + b;

c = a + b;

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

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

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

Extract Superclass

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

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 and include the and the field in it.

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...");
    }
}

Inline refactorings

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

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

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

Change Signature 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.

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.

function result() {
}

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

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.

function result() {
}

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

function result() {
}

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

Thanks for your feedback!

Was this page helpful?

Refactoring JavaScript

See also

Procedures

Refactoring JavaScript﻿

Move Symbol refactoring﻿

Move a class, a function, or a variable﻿

Pull Class Members Up refactoring﻿

Move the methods of a class to a superclass﻿

Rename refactorings﻿

Rename classes and their methods﻿

Keep the names of classes and containing files in compliance﻿

Rename functions, variables, and parameters﻿

Rename constants﻿

Rename dynamic usages of symbols﻿

Extract refactorings﻿

Introduce Parameter﻿

Introduce a parameter﻿

Choosing the refactoring mode﻿

Introduce Variable﻿

Introduce a variable﻿

Choosing the refactoring mode﻿

Introduce Constant﻿

Introduce a constant﻿

Introduce Field﻿

note

Introduce a field﻿

Choosing the refactoring mode﻿

Extract Method﻿

Extract a function﻿

tip

Open the Extract Function dialog by default﻿

Extract Superclass﻿

note

Extract a superclass﻿

Introduce object or array destructuring﻿

Replace the original assignment﻿

Keep the original assignment﻿

Generate destructuring parameters for a function﻿

Extract Vue Component﻿

Extract a Vue.js component﻿

Inline refactorings﻿

Run an Inline refactoring﻿

Change Signature refactoring﻿

Invoke Change Signature﻿

Rename a function﻿

Manage the function parameters﻿

Propagate a parameter along the hierarchy of calls﻿

Preview the changes and complete the refactoring﻿

note

See also

Procedures

Refactoring JavaScript

Move Symbol refactoring

Move a class, a function, or a variable

Pull Class Members Up refactoring

Move the methods of a class to a superclass

Rename refactorings

Rename classes and their methods

Keep the names of classes and containing files in compliance

Rename functions, variables, and parameters

Rename constants

Rename dynamic usages of symbols

Extract refactorings

Introduce Parameter

Introduce a parameter

Choosing the refactoring mode

Introduce Variable

Introduce a variable

Choosing the refactoring mode

Introduce Constant

Introduce a constant

Introduce Field

Introduce a field

Choosing the refactoring mode

Extract Method

Extract a function

Open the Extract Function dialog by default

Extract Superclass

Extract a superclass

Introduce object or array destructuring

Replace the original assignment

Keep the original assignment

Generate destructuring parameters for a function

Extract Vue Component

Extract a Vue.js component

Inline refactorings

Run an Inline refactoring

Change Signature refactoring

Invoke Change Signature

Rename a function

Manage the function parameters

Propagate a parameter along the hierarchy of calls

Preview the changes and complete the refactoring