javascript – When should a variable be declared?

I hope this is the right place for asking this type of question. If not please direct me to the right place.

So we have quiet a big TypeScript codebase at work, where each method resides in its own file. Now in a lot of those methods the variables are often declared all together at the top/beginnng of the method.

I was discussing with some principal developers that it would be better to declare them only when they’re really needed. Because in some cases those variables are used only if some conditions are met. So my point is to avoid executing a bunch of methods to set those variables when they’re eventually not needed at all.

Here an example to illustrate my point, keep in mind that this is a very simple example and in some cases we have multiple conditions and more variables.:

Simplified method how it currently is:

namespace some.namespace {

  export async function FunctionName (Toolbar : example.Toolbar) : Promise<void> {

    const Form         : example.Form       = Toolbar.window.getForm("example");
    const WindowCaller : example.Window     = (Toolbar.window.caller as example.Window);
    const DSO          : example.DataSource = WindowCaller.getDataSource("example");
    const ElementID    : number             = DSO.getCurrentRecord()("example");
    const DynSelect    : example.DynSelect  = Form.getDynSelect("example");
    
    const ExampleEnum      : typeof example.ExampleEnum      = example.ExampleEnum;  
    const OtherExampleEnum : typeof example.OtherExampleEnum = example.OtherExampleEnum;     
    
    if (!Form.validate()) return;

    const Parameter : any = {
      prop_one : ElementID,
      prop_two : DynSelect.value
    };
  
    const Response = await SomeServerCall(Parameter);

    Form.window.close();

    if (Response.someBoolean) {
      DisplayMessage(ExampleEnum.SOMETHING, OtherExampleEnum.SOMETHING );
    }
  };
}

In the example above a bunch of variables are defined and not used before if (!Form.validate()) return; which could stop the execution of the method there. Also the enums are used only in the last if statement.

So what I suggested was to write our code like this, where we declare our variables only when they’re actually needed:

My suggestion

namespace some.namespace {

  export async function FunctionName (Toolbar : example.Toolbar) : Promise<void> {

    const Form : example.Form = Toolbar.window.getForm("example");   
    
    if (!Form.validate()) return;

    const WindowCaller : example.Window     = (Toolbar.window.caller as example.Window);
    const DSO          : example.DataSource = WindowCaller.getDataSource("example");
    const ElementID    : number             = DSO.getCurrentRecord()("example");
    const DynSelect    : example.DynSelect  = Form.getDynSelect("example");

    const Parameter : any = {
      prop_one : ElementID,
      prop_two : DynSelect.value
    };
  
    const Response = await SomeServerCall(Parameter);

    Form.window.close();

    if (Response.someBoolean) {
      const ExampleEnum      : typeof example.ExampleEnum      = example.ExampleEnum;  
      const OtherExampleEnum : typeof example.OtherExampleEnum = example.OtherExampleEnum;  
      DisplayMessage(ExampleEnum.SOMETHING, OtherExampleEnum.SOMETHING );
    }
      
  };
}

Some arguments of the PD’s were that the code is less readable like this and if we want to do this we need to add some scopes, for example with an else after the first if. But I don’t really see the difference regarding the overall concept of defining variables only if they’re needed.


Wouldn’t my sggestion be better for performance, memory etc.? Especially when taking into account that some of those early called methods could also be async. Also calling fewer methods means fewer risks that something goes wrong in one of those methods (even if it shouldn’t). Also regarding the readability I prefer to see the definitions where they’re needed.

So what do you guys think? Am I splitting hairs here?