Javascript avoid global variables between functions

Question

I am trying my best to aviod using variables with global scope but I am not sure the best way to achieve this, currently I have a function setSizes(), (this is run once on mousedown) which gets all the measurements and doStuff(), (this is run continually on mousemove) which uses all the sizes to perform various operations:

var sizes = {};
sizes.myWidth = 0;
sizes.myHeight = 0;
sizes.myPadding = 0;
sizes.myMargin = 0;

function setSizes(){
   //sets all sizes
}

function doStuff(){
  //does stuff with sizes
}

What is the best way to avoid this sort of code? I find myself doing it continually out of "simplicity" but I can't imagine it is the most efficient way.

@RocketHazmat meant to say "you want an object, not an array" — Ingo Bürk
– Ingo Bürk, Commented Nov 14, 2013 at 19:05

Ingo Bürk · Accepted Answer · 2013-11-14 19:02:52Z

You can put a new scope around it

(function () {
    "use strict";

    var sizes = {};
    sizes.myWidth = 0;
    // ...

    function setSizes() {
        // ...
    }

    function doStuff() {
        // ...
    }
})();

Alternatively, when possible, just pass the object as a parameter. It sort of depends on the situation what feels cleaner (to me). You have to ask yourself whether an object is relevant only for that function or for the entire scope.

You can take a look at the various module patterns, too, as they will show you techniques on how to write modular code. For example, to use a particular module with another code, you simply export one (and only one) variable as your own custom namespace:

(function (exports) {
    "use strict";

    var someVar = "I won't leak to the global space!";

    exports.yourObject = {
        someFunction: function () {
            // ...
        }
    };
})(window);

yourObject.someFunction();

This is just a very simple example, please look at more common ones for better examples.

hgoebl · Accepted Answer · 2013-11-14 18:59:28Z

0

(function () {
    var sizes = {
        myWidth: 0,
        myHeight: 0,
        myPadding: 0
        myMargin: 0
    };

    function setSizes(){
        //sets all sizes
    }

    function doStuff(){
        //does stuff with sizes
    }
}());

This construct is a IIFE (immediately invoked function expression) and this way your formerly global function is not visible outside, but only in the scope of the IIFE. BTW you used an array where an object is better suited.

answered Nov 14, 2013 at 18:59

hgoebl

13.1k9 gold badges51 silver badges75 bronze badges

Collectives™ on Stack Overflow

Javascript avoid global variables between functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related