WebStorm 2016.1 Help

Change Signature in JavaScriptExtract Variable in JavaScript

Extract Parameter in JavaScript

The Extract Parameter refactoring is used to add a new parameter to a method declaration and to update the method calls accordingly.

Examples

The following table shows two different ways of extracting a function parameter.

In the first of the examples a new parameter is extracted as an optional parameter. So the corresponding function call doesn't change.

In the second of the examples the parameter is extracted as a required parameter. So the corresponding function call changes accordingly.

BeforeAfter
// A new parameter will be added to this // function to replace the 1's:functioncalculate_sum(i) { alert('Adding ' +1+ ' to ' + i);return1+ i; }functionshow_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 i2has been added // as an optional parameter:functioncalculate_sum(i,i2) {i2 = i2 || 1;alert('Adding ' +i2+ ' to ' + i);returni2+ 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's:functioncalculate_sum(i) { alert('Adding ' +1+ ' to ' + i);return1+ i; }functionshow_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 i2has been added // as a required parameter: function calculate_sum(i,i2) { alert('Adding ' +i2+ ' to ' + i); returni2+ i; } function show_sum() { // The function call changed accordingly: alert('Result: ' + calculate_sum(5,1)); }

Extracting a Parameter in JavaScript

  1. In the editor, place the cursor within the expression to be replaced by a parameter.
  2. Do one of the following:
    • Press Ctrl+Alt+P.
    • Choose Refactor | Extract | Parameter in the main menu.
    • Choose Refactor | Extract | Parameter from the context menu.
  3. If more than one expression is detected for the current cursor position, the Expressions list appears. If this is the case, select the required expression. To do that, click the expression. Alternatively, use the Up and Down arrow keys to navigate to the expression of interest, and then press Enter to select it.

    JavaScript_IntroduceParameter_SelectExpression.png

  4. In the Extract Parameter dialog:
    1. Specify the parameter name in the Name field.
    2. The Value field, initially, contains the expression that you have selected. Normally, you don't need to change this. (Depending on whether the option Optional parameter is selected or not, this will be the value assigned to the new parameter in the function body or passed to the function in the function calls.)
    3. If, when extracting a new parameter, you don't want to change the function calls, select the Optional parameter check box. If you do so, the value specified in the Value field will be assigned to the new parameter in the function body. The calls to the function (if any) won't change.

      If you want to pass the value (specified in the Value field) to the new parameter through the existing function calls, clear the Optional parameter check box. If you do so, all the function calls will change according to the new function signature; no explicit assignment of the parameter value will be added to the function body.

    4. If more than one occurrence of the expression is found within the function body, you can choose to replace only the selected occurrence or all the found occurrences with the references to the new parameter. Use the Replace all occurrences check box to specify your intention.
    5. Click OK.
    JavaScript_IntroduceParameter_Result.png
Change Signature in JavaScriptExtract Variable in JavaScript

See Also

Procedures:

Reference:

Last modified: 11 July 2016