Declare a global const in a function javascript

Question

I'd like to create a global const variable which needs to be declared in a callback of a timeout. The script is like this:

setTimeout(() => {
    const hourandminute = new HourAndMinute();
}, 1000);

This will create a new const variable but it will only exist in the callback. How do I make this global without doing the following;

let hourandminute;

setTimeout(() => {
        hourandminute = new HourAndMinute();
}, 1000);

It’s weird to define a constant or variable asynchronously, but not use it right away… why are you trying to do it this way? What are you trying to achieve? — Sebastian Simon, Oct 23 '17 at 08:11
to extend to the comment asking what you wan to achieve, why do you want to avoid the global declaration like in second example if you want it global? — Kaddath, Oct 23 '17 at 08:17
The HTML I have isn't 'rendered' when the javascript file is. I get errors when I try to get the script to work without the HTML being loaded, obviously. So I try to get around this by putting a timeout of a second and then declaring it. This might not be the best but it works. Maybe there is a better way to load a JS file after the HTML has been loaded? I need to add that I'm using w3-include-html to include HTML files. — Paul de Koning, Oct 23 '17 at 08:17
@Kaddath Because using `let` or `var` won’t make it constant and you can’t use `const` without assigning a value. — Sebastian Simon, Oct 23 '17 at 08:19
@PauldeKoning _Of course_ there is a better way: use the `DOMContentLoaded` event. See [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959/4642212). We didn’t know that you had an issue about DOM loading, until we asked you. Read [XY problem](https://meta.stackexchange.com/q/66377/289905) and try to avoid it in the future. — Sebastian Simon, Oct 23 '17 at 08:20
@Xufox you're right, didn't think about that. But can't he declare the constant as an empty object and fill it after (by copying properties for example). The object is constant, but its value can change if it's meant to be an object — Kaddath, Oct 23 '17 at 08:24
@Xofux I forgot to add that yes, but it's not all about the DOM loading because I use w3-include-html which the solutions you linked don't work with. Is there any way to use the onload event to include a javascript file? — Paul de Koning, Oct 23 '17 at 08:28

score 1 · Answer 1 · answered Oct 23 '17 at 08:24

1

setTimeout(() => {
    Object.defineProperty(window, "hourandminute", {
        enumerable: false,
        configurable: false,
        writable: false,
        value: new HourAndMinute()
    })
}, 1000)

This is a bit different from your needs, but this may be the only way.

answered Oct 23 '17 at 08:24

porcelain

69
5

This is in fact the best approach. This still allows us to define a `const` yet `global` variables from inside a function or even after Ajax return. It could even be an entire `global` function and yet `immutable`. This must be marked as the answer. – 夏期劇場 Oct 08 '22 at 06:22

score 0 · Answer 2 · answered Oct 23 '17 at 09:29

In case my comment got unnoticed, this is a pattern that might meet your requirements: Note that a JS constant cannot be reassigned, but if it's value is mutable, like an object, it can still be changed, look at this example:

const hourandminute = {};

setTimeout(() => {
    hourandminute.prop1 = 'FOO';
    hourandminute.prop2 = 'BAR';
}, 500);

setTimeout(() => {
    console.log(hourandminute);
}, 1000);

Declare a global const in a function javascript

2 Answers2