Global variables in Javascript (jQuery)

Question

So this is the first time I am using Javascript in a much more powerful context, having a thick client and doing much of the heavy-lifting through javascript in itself. I am using jQuery, and a lot of the code is getting muddy at the moment coz it's all just a bunch of functions.

Turns out for some of my functions, I required variables to be passed through multiple functions with their value being maintained. The obvious way of doing this is by declaring them outside of the scope of the function and then have the function manipulate it the way it ought to . (These variables are objects and not primitive type, so I guess javascript being pass by reference, this works).

For instance, I probably have something like this

var node = //init with some value;

$(document).ready(setup);
function setup()
{
 A();
 B();
}

function A()
{
  // operate on var node
}

function B()
{
  // operate on var node
}

This is obviously a scaled down version of my code, but captures the way I deal with global variables. My question is, is there a more elegant way to do the above ?

Thanks

"These variables are objects and not primitive type, so I guess javascript being pass by reference, this works" Since you're not actually passing the variables, what does it matter? — Waleed Khan
– Waleed Khan, Commented Dec 18, 2012 at 19:00
actually, JS doesn't pass objects by reference, it passes by "copy of reference" — Alnitak
– Alnitak, Commented Dec 18, 2012 at 19:03

Dancrumb · Accepted Answer · 2012-12-18 19:10:12Z

4

Any reason why you can't do:

$(document).ready(function() {
    var node = //init with some value;
    setup(node);

    function setup(node) {
        A(node);
        B(node);
    }

    function A(node) {
      // operate on var node
    }

    function B(node) {
      // operate on var node
    }
});

In general, using global variables and functions is a bad idea and should be avoided wherever possible.

edited Dec 18, 2012 at 19:10

answered Dec 18, 2012 at 18:58

Dancrumb

27.7k10 gold badges79 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dqhendricks Over a year ago

likewise with global functions :/

Alnitak · Accepted Answer · 2012-12-18 19:00:42Z

4

Note that while you appear to have been asking specifically about node, your functions setup, A and B are also all global variables in your version.

The simplest approach would be to put all these declarations inside an anonymous function:

$(document).ready(function() {

    var node = ...;

    function A() {
        ...
    }

    function B() {
        ...
    }

    function setup() {
        A();
        B();
    }

    setup();
});

answered Dec 18, 2012 at 19:00

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Aaron Kurtzhals · Accepted Answer · 2012-12-18 19:00:41Z

Only use one global variable (or as few as possible). Make any functions or objects members of your one global variable.

Douglas Crockford says

An objective measure of the quality of a JavaScript program is How many global variables and global functions does it have? A large number is bad because the chance of bad interactions with other programs goes up. Ideally, an application, library, component, or widget defines only a single global variable. That variable should be an object which contains and is the root namespace for all of your stuff.

Yahoo’s single global is YAHOO. It is spelled in all caps to identify it as something special, since all lower case is ordinary and initial caps indicates a constructor. Being in all caps, it is unlikely that someone would use it accidentally, which further reduces the likelihood of collision.

http://www.yuiblog.com/blog/2006/06/01/global-domination/

Also, you can create objects to further organize your code.

GLOBAL.myObject = {}; GLOBAL.myObject.myFunction = ...

Community · Accepted Answer · 2017-05-23 11:48:59Z

2

I prefer the "revealing module" pattern:

var myApp = (function () {
    // privates
    var node;

    var a = function () {
        // operate on node
    };

    var b = function () {
        // operate on node
    };

    // publics
    var init = function () {
        // initialization stuff
        a();
        b();
    };

    return {
        init: init
    };
})();

$(document).ready(function () {
    myApp.init();
});

This way you only ever have one global, myApp, which stores everything else your app needs.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Dec 18, 2012 at 19:02

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Comments

Snuffleupagus · Accepted Answer · 2012-12-18 18:59:50Z

1

I think it makes the code harder to understand, I'd much rather take the variable in as an argument and have it as a return.

$(function(){
    var outcome = multiply(add(5));
});

function add(num)
{
    return num+1;
}

function multiply(num)
{
    return num*5;
}

If you feel like you absolutely want to have global variables wrap your stuff in a closure so it doesn't actually go to a global scope.

ie,

(function(){
    var a; // can be used in any functions within this closure, but not polluting window
    function A()
    {
        a = 'blah';
    }
})();

answered Dec 18, 2012 at 18:59

Snuffleupagus

6,8053 gold badges28 silver badges36 bronze badges

Comments

dqhendricks · Accepted Answer · 2012-12-18 19:03:13Z

0

There are many. For instance, objects.

// jQuery shorthand for "wait till DOM ready"
$( function() {
   // create node object
   var node = {
      id: /* some value */,
      setup: function() {
         this.A();
         this.B();
      },
      A: function() {
         // operate on this.id
      },
      B: function() {
         // operate on this.id
      }
   };
   // setup node object
   node.setup();
} );

Global variables are trouble waiting to happen. Don't dirty up your global namespace. Javascript is an object oriented language, use objects. Notice your object can have a property that you can reference with the this keyword from within the objects methods.

answered Dec 18, 2012 at 19:03

dqhendricks

19.2k11 gold badges54 silver badges88 bronze badges

Collectives™ on Stack Overflow

Global variables in Javascript (jQuery)

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related