Alternative to global variables in javascript/jquery?

Question

So, I've got my app to work. But I don't want to use a global variable.

Here's what I'm trying to do:

var AMLid;
$(".commentButton").on('click', function () {
  AMLid = $(this).closest('tr').siblings().find('p.important').text();
  alert("id is:" + AMLid);
});

$(".saveButton").on("click", function () {
     $(".modal-body #txtAddComment").val(AMLid);
});

I want to get an ID from a selected table row, and pass the ID to the modal dialog, so I then can use the ID as a parameter when clicking a button in the modal dialog.

How do I do the exact same thing, without using a global variable? is it possible?

And what are the cons of using a global variable like this? Does it crash or target the wrong ID's if many people use it simultaneously?

Any help is appreciated.

Answer 1

You can wrap the whole thing in a function

 (function(){
    var AMLid;
    $(".commentButton").on('click', function () {
       AMLid = $(this).closest('tr').siblings().find('p.important').text();
       alert("id is:" + AMLid);
    });

    $(".saveButton").on("click", function () {
        $(".modal-body #txtAddComment").val(AMLid);
    });
})();

Answer 2

You can avoid the use of a global variable by using an Immediately-Invoked Functon Expression, which would look like this:

(function() {
    var AMLid;
    $(".commentButton").on('click', function () {
      AMLid = $(this).closest('tr').siblings().find('p.important').text();
      alert("id is:" + AMLid);
    });

    $(".saveButton").on("click", function () {
         $(".modal-body #txtAddComment").val(AMLid);
    });
})();

This works because the AMLid is now private to the function; when the function is executed it creates a new execution context which includes that variable, which is then accessible to statements made in the function, but not outside it. And because this creates a closure the variable continues to be accessible by the callbacks attached to those functions. Moreover, as the function is anonymous it itself doesn't have a name polluting the namespace.

The term Immediately-Invoked Functon Expression comes from Ben Alman, and you can read his original blog post discussing the concept here: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Some cons of using a global include: hard to keep track of variables, other scripts might mess with its value (when they probably shouldn't have access to it), harder to maintain, less clean code. Your worry about it being overwritten if multiple people use it won't be an issue because it's client-side and so there will be one instance per page loaded in any given browser.

Answer 3

Javascript is client-side so actually I can't get the point in your "many people use it simultaneously". One browser for user, so you don't have to worry about multiple client. Each one use his own set of global variable.

If your executions are not linked in any way (they are "onclick") you can just wrap them in a function so you're actually setting a "local/global" variable. Every function that'll need that AMLid has to be declared inside that function scope.

Answer 4

The only way to keep variables out of the global scope is by wrapping them in a function. If this is all the code you're using in this particular module, it doesn't really make a difference.