Skip to content
Advertisement

Declare global constants in function javascript on DOMContentLoaded

Is there any way to declare constants when the DOMContentLoaded event triggers, that are accessible outside?

JavaScript

Advertisement

Answer

If the question is: “Is there any way to declare a constant variable without a value, and assign one to it later?“, then the answer is no.

Think of it again: after the declaration, a constant variable’s value must always be the same; that’s the point in creating constants.

If you were able to create such a variable, that wouldn’t really be constant. Look at this example:

JavaScript

So, you can’t create a constant in the global scope that way. But why do you want to declare it in the global scope at all?

If you know that the second event won’t be fired before DOMContentLoaded, then just move its declaration inside, like this:

JavaScript

This approach is at least as good as the one you wanted, if not better:

Keeping all variables inside an event listener:

  • Completely avoids the pollution of the global scope (like an IIFE, that some use)
  • Makes your code run only after the page is loaded, so you don’t have to worry about inaccessible DOM elements.

However, if you are unable to move all code into DOMContentLoaded (for example, because you want to listen for an event, that triggers before it), you have one more option: making use of ES6’s asynchronous structures, the so-called Promises.

By using them, your code can wait for the given event (in your case, DOMContentLoaded), without having to move that code inside its listener, and will work even if the second event is emitted multiple times:

JavaScript

This approach may seem more complicated, but using promises everywhere can simplify your life when your code becomes asynchronous.

Also note that this approach has its limits, for example, you can’t nest two of these promises (if you try to do so, you’ll find yourself in a scenario like the one you’ve asked about):

JavaScript

Instead, you can collect all DOM elements into a single object, and resolve your promise with it:

JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement