How does one declare a global variable from inside an external js file?

Question

I'd like to declare a global variable in an external javascript file and have it become accessible in the main window that loads the file.

So far the following methods have failed

var foo = 'bar';
window.foo = 'bar';

Only implicit globals seem to work

foo = 'bar';

However, people seem to recommend against ever using implicit globals. So what should I do in this case?

`var foo` in the global scope (not inside a function) will create an actual global variable just fine. — Matti Virkkunen, Jul 05 '16 at 08:49
`window.foo` is the same than `foo` alone without var. It will be attached as a "fake global" in the window object — Marcos Pérez Gude, Jul 05 '16 at 08:49
@yosefrow They should work fine. You need to show more context to your question to show how/why they didn't work for you. — James Thorpe, Jul 05 '16 at 08:50
You probably have some extra garbage in your js file. Externals create globals just like anywhere else. — John Green, Jul 05 '16 at 08:51
I figured it out. Basically I was calling window.foo.method() inside the file when I should have been just calling foo.method(); — yosefrow, Jul 05 '16 at 08:59

score 0 · Answer 1 · answered Jul 05 '16 at 08:59

0

Both your solutions should work just fine, they define a variable in the global scope but you must make sure to include the JavaScript file that defines these variables before the scripts that are actually using them. Probably you forgot to include your all your script files or you just you have other errors in your code (check the browser's console for errors, F12 in Firefox).

That said it is a bad practice to use globals anyway. It makes your code hard to test, hard to debug and your globals can overlap with globals from third party javascript libraries (if you are using any of them).

answered Jul 05 '16 at 08:59

Arpad Toth

231
2
6

I'm using an IIFE to attach my code to a namespace so there is just one specially named global with all functions and variables attached to it. Is this still considered bad practice? – yosefrow Jul 05 '16 at 09:04
It depends, I would say that theoretically yes, It is still a bad practice but on the other hand, lots of popular frameworks use this approach and is OK. I done some code using this approach and I didn't have any issues but these days i feel that using a module loader such as browserify + commonjs is better. If you are using globals only for namespace names and you plan to use your code only on browser (no server side js) I think this is not necessarily a bad practice. It can actually simplify your design. – Arpad Toth Jul 05 '16 at 09:12

score 0 · Answer 2 · answered Jul 05 '16 at 09:02

The issue was that I was attaching an IIFE to window and then calling it via window instead of directly.

window.foo = (function() {
    return {
        log: function() {
            console.log('bar function');
        }
    };
})();
window.foo.log();

Note: that this example actually works fine, but due to some content of my IIFE it did not work for me until I called it using just foo.log();

I'll look into this more later. As it interests me what part of my code caused this.

How does one declare a global variable from inside an external js file?

2 Answers2