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.

Does it crash or target the wrong ID's if many people use it simultaneously? - No, this variable is stored on the client's browser, so for each person using it, the variable is "their own" — chiapa
– chiapa, Commented Nov 12, 2015 at 11:12

Sagi · Accepted Answer · 2015-11-12 11:10:55Z

5

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);
    });
})();

answered Nov 12, 2015 at 11:10

Sagi

9,3643 gold badges38 silver badges43 bronze badges

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

5 Comments

Anthony Grist Over a year ago

Bonus: If you add $ to the beginning of that code, you get a (shorthand) jQuery document ready handler, so it doesn't matter where in your HTML the code is positioned.

Anthony Grist Over a year ago

Can't edit, but forgot to say in my previous comment that you'd also need to take away the () from the end; you don't want an IIFE, just a regular function call.

Dr Cox Over a year ago

This was exactly what I was looking for, eventhough I didn't know it myself, thanks alot :D

Sagi Over a year ago

I am glad I could help

Dr Cox Over a year ago

@AnthonyGrist Thank you too, for the additional information, it's very good to know. +1

user5294349 · Accepted Answer · 2015-11-12 11:16:34Z

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.

a.ndrea · Accepted Answer · 2015-11-12 11:12:37Z

1

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.

answered Nov 12, 2015 at 11:12

a.ndrea

5362 gold badges5 silver badges20 bronze badges

1 Comment

Anthony Grist Over a year ago

More than one script can run on a single page, though, and there's the potential that you'll run into issues if you use the same variable names. This is most easily seen with the multiple JavaScript frameworks that, just like jQuery, use $ as a shorthand for their function.

user5250554 · Accepted Answer · 2015-11-12 11:34:29Z

1

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.

answered Nov 12, 2015 at 11:34

user5250554

Collectives™ on Stack Overflow

Alternative to global variables in javascript/jquery?

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related