Should I use window.variable or var?

Question

We have a lot of custom JS code that defines the panels, buttons, etc. that will be used in many other JS files.

Usually we do something like:

grid.js

var myGrid = ..... 

combos.js

 var myCombo = ..... 

Then in our application code we:

application.js

 function blah() { myGrid.someMethod() } 

someother.js

 function foo() { myCombo.someMethod(); myGrid.someMethod(); } 

So should I use var myGrid or is it better to use window.myGrid

What's the difference?

Answer 1

I would suggest creating a namespace variable var App = {};

 App.myGrid = ... 

This way you can limit the pollution of the global namespace.

EDITOR: Regarding the number of variables - 2 possible solutions:

• You can additionally use the namespace by type (grids, buttons, etc.) or by relations (ClientInfoSection, AddressSection, etc.).
• You encapsulate your methods in objects that are created using the components you have.

ex: do you have

 function foo() { myCombo.someMethod(); myGrid.someMethod(); } 

becomes:

 var Foo = function(combo, grid) { var myCombo = combo;//will be a private property this.myGrid = grid;//will be a public property this.foo = function() {//public method myCombo.someMethod(); myGrid.someMethod(); } } App.myFoo = new Foo(someCombo, someGrid); App.myFoo.foo(); 

this way you limit the number of small objects and reveal only what you need (namely, the foo function)

PS: if you need to expose internal components, add them to this inside the constructor function

Answer 2

A potentially important difference in functionality is that window.myGrid can be delete d, and var myGrid cannot.

 var test1 = 'value'; window.test2 = 'value'; console.log( delete window.test1 ); // false ( was not deleted ) console.log( delete window.test2 ); // true ( was deleted ) console.log( test1 ); // 'value' ( still accessible ) console.log( test2 ); // ReferenceError ( no longer exists ) 

Answer 3

A good use of window.variable is that you can check it without javascript error. For example, if you have:

 if(myVar){ //do work } 

and myVar is not defined anywhere on the page, you will get a javascript error. However:

 if(window.myVar){ //do work } 

It doesn’t give errors and works as one would expect.

var myVar = 'test'; as well as window.myVar = 'test';

roughly equivalent.

In addition, like others, you must go down from one global object to avoid pollution of the global namespace.

Answer 4

On a global scale, both options are virtually equivalent in functionality. In the scope of capabilities, var is certainly preferable when closure behavior is required.

I would just use var all the time: firstly, it is consistent with the usually preferred behavior in closure (so it’s easier for you to move your code to closure if you decide to do it later), and secondly, it just makes more sense for me to say that I am creating a variable than attaching a window property. But basically it is a style.

Answer 5

The general answer to the question will be to use var .

In particular, always put your code in an Expression with Instant Call Function (IIFE) :

 (function(){ var foo, bar; ...code... })(); 

This saves variables, such as foo and bar , from contaminating the global namespace. Then, when you explicitly want the variable to be in a global object (usually window ), you can write:

 window.foo = foo; 

JavaScript has functional reach, and it is really useful to take full advantage of it. You wouldn’t want your application to crash because some other programmer did something stupid like overwriting your timer.

Answer 6

In addition to other answers, it is worth noting that if you do not use var inside a function when declaring a variable, it flows into the global region, automatically making it a property of the window object (or global region).

Answer 7

To expand on what Liviu said, use:

 App = (function() { var exports = {}; /* code goes here, attach to exports to create Public API */ return exports; })(); 

By doing so, you can hide part of your specific implementation code that you might not like using var inside. However, you can access something attached to the exports object.