Refactoring JavaScript
class Rename{
test() {
return 12345;
}
}
let rename = new Rename();
let hello = window["Test"];
let a = rename.test();
let b = hello.test();
function calculate_sum(i) {
alert('Adding ' + 1 + ' to ' + i);
return 1 + i;
}
function show_sum() {
alert('Result: ' + calculate_sum(5));
}function calculate_sum(i) {
alert('Adding ' + 1 + ' to ' + i);
return 1 + i;
}
function show_sum() {
alert('Result: ' + calculate_sum(5));
}In the editor, place the caret within the expression that you want to convert into a parameter and press CtrlAlt0P or select Refactor | Introduce Parameter from the context menu.
Alternatively, do one of the following:
Press CtrlAltShift0T and select .
Go to .
If several expressions are detected in the current caret location, select the required one from the Expressions list.
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.
Finally, the popup for configuring the refactoring appears.
Select the Generate JSDoc to have a JSDoc comment block generated. This may be helpful if you need to specify a custom default parameter value.
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 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 above.
Initially, CLion 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>.Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with red canvas. Press Enter when ready.
Also note that in the ES6 code, the new default function parameter syntax
function calculate_sum(i, i2 = 1)will be applied instead ofi2 = i2 || 1;. Learn more about default function parameters from the https://developer.mozilla.org website.
'(' + 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).Parenizor.method('toString', function ())
{
return '(' + this.getValue() + ')';
}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";
}In the editor, select the expression to convert into a variable and press CtrlAlt0V or select from the context menu.
Alternatively, do one of the following:
Press CtrlAltShift0T and select .
Go to .
If several expressions are detected in the current caret location, select the required one from the Expressions list.
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.
Finally, the popup for configuring the refactoring appears.
From the list, choose the statement to use in the declaration of the new variable:
Choose var to introduce a function-scoped variable.
Choose let to introduce a block-scoped variable, refer to Example 2 above.
Choose const to introduce a constant.
Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with red canvas. Press Enter when ready.
class AccountingDepartment {
name;
printName() {
const departmentName = "Department name: ";
console.log(departmentName + this.name);
}
printMeeting() {...
}
generateReports() {...
}
}
let output = MyFunction(5, 8);
document.writeln("The value is .".output);
In the editor, select the expression to convert into a constant and press CtrlAlt0C or select from the context menu.
Alternatively, do one of the following:
Press CtrlAltShift0T and select .
Go to .
If several expressions are detected in the current caret location, select the required one from the Expressions list.
If refactoring is invoked from inside a class, introduce a readonly field or select the scope of the new constant, refer to Example 1.
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.
Accept one of the suggested parameter names by double-clicking it in the list or specify a custom name in the field with red canvas. Press Enter when ready.
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);c = a + b;c = a + b;function MyFunction(a, b) {
c = a + b;
return (c * c);
}
result = MyFunction(4, 6);
document.write(result);In the editor, select a code fragment to convert into a function and press CtrlAlt0M or choose from the context menu.
Alternatively, do one of the following:
Press CtrlAltShift0T and select .
Go to .
tip
The selected code fragment can be a set of statements or an expression used somewhere in the code.
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 above.
To define the extracted function inside the current enclosing function, choose function <current enclosing function name>. See Example 3 above.
GifTo open the Extract Method dialog with more options, press CtrlAlt0M once again. In this dialog, you can choose whether the extracted function will be declared through a generated function declaration or inside an expression. See Examples above.
Gif
Place the caret at a value from an array or an object and press AltEnter.
From the list, select Replace with object destructuring or Replace with array destructuring.
GifIf some of the values from an array or an object are not used, these elements will be skipped:
Gif
Place the caret at a value from an array or an object and press AltEnter.
From the list, select Introduce object destructuring or Introduce array destructuring.
GifThis intention action can be very handy when working with React class components:
Gif
function result() {
}
function show_result() {
alert('Result: ' + result());
}function result() {
}
function show_result() {
alert('Result: ' + result());
}function result() {
}
function show_result() {
alert('Result: ' + result());
}In the Change Signature dialog CtrlF6, use the table of parameters and the buttons to the right of it:
To add a new parameter, click
AltInsert and specify the name of the new parameter and its default value or the value to be passed through function calls.To remove a parameter, click any of the cells in the corresponding row and click
AltDelete.To reorder the parameters, use
Alt0↑ and 
Alt0↓.To rename a parameter, edit the Name field.
If necessary, propagate the new parameter to the functions that call the current function.
In the Change Signature dialog CtrlF6, 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.See Example 3 above.
In the left-hand pane, select the checkboxes next to the functions where you want to propagate the parameter and click OK.
Thanks for your feedback!