Should I use window.variable or var?

Question

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

Typically, 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 we be using the var myGrid or is better to use window.myGrid

What's the difference?

Answer 1

A potentially important difference in functionality is that window.myGrid can be deleted, and var myGrid can not.

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 2

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

App.myGrid = ... 

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

EDIT: Regarding the number of variables issue - 2 possible solutions come to mind:

1. You can further namespace them by type(Grids, Buttons, etc) or by relationship(ClientInfoSection, AddressSection, etc)
2. You encapsulate your methods in objects that get instantiated with the components you have

ex: 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 amount of little objects and only expose what you need (namely the foo function)

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