How to use objects for storing global variables? Best practice

Question

I'm new to OOP in JavaScript, since I always worked with some frameworks and my own simple constructs, but never thought about what happened under the hood. Now, I want to tackle one problem which many JS programmers face - global variables. I know it's a bad practice to make global variables and many suggest using objects instead. And this is where a problem pops up. I do not know what is the best way to create an object and to call it somewhere in the application to get global variable values. For example, I'm not sure whether to use init function or not and how to return a global variable value (through a function or by "dot" notation). I've seen a bunch of examples concerning objects but they looked different in style. Imagine a concrete example. I want to store global variables in an object - window's height and window's width. To make it cross-browser I will use this code

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    w = w.innerWidth || e.clientWidth || g.clientWidth, // this is global variable
    h = w.innerHeight|| e.clientHeight|| g.clientHeight; // and this is global varibale too

So, how to apply this code inside an abject and how to get these global variables' values somewhere in the application?

Now, my code looks like this:

var module = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
width = w.innerWidth || e.clientWidth || g.clientWidth,
height = w.innerHeight || e.clientHeight || g.clientHeight;
return {
  getHeight:function(){
     return height;
  },
  getWidth:function(){
     return width;
  }
}
}());

To access height and width attributes I call getHeight and getWidth methods. The only thing which looks strange to me is these returns inside the overlapping return . Is it a right way to do?

Answer 1

I will suggest you to avoid Globals .

Global variables are a terribly bad idea.

Reason: You run the danger of your code being overwritten by any other JavaScript added to the page after yours.

Workaround: Use closures and the module pattern

Sample Code to explain modules and closures :

module = function(){
   var current = null;
   var labels = {
      'home':'home',
      'articles':'articles',
      'contact':'contact'
   };
   var init = function(){
   };
   var show = function(){
      current = 1;
   };
   var hide = function(){
      show();
   }
   return{init:init, show:show, current:current}
}();
module.init();

YOUR CODE:

var module = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
width = w.innerWidth || e.clientWidth || g.clientWidth,
height = w.innerHeight || e.clientHeight || g.clientHeight;
    var getWidth = function(){
        console.log(width);
        return width;
}
    var getHeight = function(){
        console.log(height);
        return height;
}
    return{getWidth:getWidth, getHeight:getHeight}
}());
module.getHeight();
module.getWidth();

DEMO FIDDLE