javascript, let function if not defined

Question

Every time a modal is opened I load via ajax some html + js, like this:

var loadModalJs = function() {
   ...
}

$(function() { loadModalJs(); });

It works with var, but if I replace var with let, when the modal is closed and then opened again I get Identifier 'loadTabJs' has already been declared

I tried something like this, without success:

if(typeof loadModalJs === 'undefined') {
    let loadModalJs = function() {
       ...
    };  
}
loadModalJs(); // ReferenceError: loadModalJs is not defined

I don't like using var because my IDE complains about "'var' used instead of 'let' or 'const'"... But none of them seems to work... How could I do?

Answer 1

The error you placed into the comment is correct: at no point do you define the variable in scope -- you define it within the the if clause, and it is not available outside of that clause, your reference to it in the if statement is to an undefined global variable.

Also, if your variable is only ever going to be undefined or a function, then no need to test its type, as undefined evaluates to false.

let loadModalJs;

// ...your other code here...


// This bit within the function/scope run multiple times:
if (!loadModalJs) {
    loadModalJs = function() {
       ...
    };  
}

if (loadModalJs) { 
  loadModalJs(); 
}

Answer 2

In addition to the current answer:

Your second snippet could work if you use var instead of let.

As if creates its own block {}:

• let is limited to the immediate block {}.
• var is limited to the immediate function block {} (or global if there are no functions).

E.g.:

if (true) {
  var x = "It'll work outside the if.";
}

console.log(x);

---

Edit:

As an additional tip, you might be careful with the way you 'create' functions in javascript:

• Functions defined, e.g. let myFunction = function() { }, are under top-to-bottom flow of control (i.e. first define, then use).
• Functions declared, e.g. function myFunction() { }, are hoisted (i.e. declare and use where you want, in the same scope).