What Is The Best Way To Store A Value For Use In A Later Function? I'm Hearing Global Variables Are Evil

July 30, 2023 Post a Comment

So the code I'm using is at http://jsfiddle.net/8j947/10/ and it returns a value of true or false for the variable isLive. How can I use the variable onLive in a later function?

Solution 1:

Just define your variable in the same scope as you are defining your functions that rely on it. If your functions are in the global scope, then so should your variable be.

If you are developing a plugin or control or a script that will be used in more than one page, then yes, avoid global variables. If, on the other hand, you have a page-specific piece of data that you need available in more than one location, a global variable is absolutely appropriate.

Go ahead critics! Down-vote me! And when your done with that check out some of my other answers where I actually advocate for using tables in HTML! :-)

Sometimes you have to understand the rules, so that you know when it's ok to break them.

Now, if you just now realized that your functions are in the global scope, and you want to change that, just wrap all of your code in an anonymous function and call it immediately:

(function(){
    var scopeLevelVariable = true;
    functionscopeLevelFn(){
        ...
    }
    window.globallyAvailableVariable = "foo";
    window.globallyAvailableFunction = function(){
        ...
    };
})();

Solution 2:

Global variables are considered "evil", because any function could inadvertently modify your variable, which can cause some hard-to-track bugs. This usually isn't a problem for simple projects, but it's something you should think about.

To save a value without muddying the global namespace too much, and thus reduce the risk of the aforementioned bugs, you can create you own "namespace" object (Option 2 of the accepted answer in the question you linked). Like so:

var MyPageData = {};

MyPageData.someProperty = someFunc();

// Later on...function anotherFunc() {
    // Use the data you set...
    alert(MyPageData.someProperty);
}

Solution 3:

I would not agree that global variables are evil in themselves, just that there are a few precautions to take whilst using them.

To avoid colision with other global variables (possibly ones written in included libraries) I would suggest taking two measures

1) Use anonymous functions (self envoking) to keep your code (and variables) seperated from other code

// other peoples/modules codevar myVariable = "whatever";

// anonymous function for your self contained code
(function(){
var myVariable = "inside closure";
alert(myVariable);
})() // the empty brackets envoke the anonymous function// still retains value from before your self envoking anonymous functionalert(myVariable);

2) Use unique namespace - and make all globals you use under that one object to avoid polution

myUniqueNameSpaceRaiders = {};
// will not conflict with other global variables if your namespace is unique
myUniqueNameSpaceRaiders.desiredVariable = "something";

I think if you organise your global variables well, it is fine to use them. Hope this helps.

Solution 4:

If you're working with some specific set of functions and data, you could do something like this:

var yahooInterface = newfunction(){
   var isLive = false;

   this.function1(){ isLive = true };
   this.function2(){ alert( isLive ) };
};

In this manner, function1 and function2 share data, but they don't wastefully pollute the global namespace.

Example: http://jsfiddle.net/XpJFn/1/

Solution 5:

Try modular javascript programming .

Also, closures are useful for holding information w/o exposing it to the global namespace.

If you must use a global... create your own global namespace and put anything you need inside of it. This may be a good starting point for you as you venture into other javascript patterns.

Ex.

//Global Namespacewindow.ns = {};

ns.onLive = false;

if(ns.onLive === false) {
   ns.notLive = !ns.onLive;
}

//Closuresvar hello = (function() {

  var onLive = true;

  my.fn1 = function () {
    return onLive;
  }

  my.fn2 = function () {
    return !onLive;
  }

  return my;
})();

hello.fn1(); //true;
hello.fn2(); //false

JavaScript Test