Scoping variables in JavaScript functions

Question

Q: What would you name the local scope that is in a function that is inside of another function?

Let me explain:

I'm having trouble with the naming convention that I want to use. Here's a trivial example:

!function($, window, undefined) {
    var Variables = {};
    Variables.X = 1;

    function myFunction() {
        var local = {};
        local.X = 2;
        $('.myClass').each(function() {
            var local = {};
            local.X = 3;
        });
    }
}(jQuery, window);

Now, I've decided that I'm going to use the object called "Variables" to house all objects that are shared anywhere between functions. A global scope, if you will, limited to within the outer !function() {} definition.

And I've decided to use the object called "local" to house all the objects that are within a function. My problem is the scope of a function inside of a function. I think I have to somehow incorporate the name of the function in order to make it unique. I know that in this trivial example, local.X is two separate variables. But I want to name them separately so that it's more easily readable by a human. I don't want to come back 6 months from now and wonder what local.X is.

Adding to the problem is that it's an anonymous function, so there is no function name to tie into in order to make the "local scope" uniquely identifiable. I may have to make up a rule that if a variable is required inside a callback function, then give the callback function a name and tie the local scope to that name (somehow).

I understand your problem (variable shadowing) but I don't understand what you are trying to do and why. — Felix Kling
– Felix Kling, Commented Feb 24, 2013 at 20:04

Matt Browne · Accepted Answer · 2013-02-24 20:00:31Z

2

The way you're trying to set up scopes is a little weird and not really taking advantage of the way Javascript is designed to handle this...

A more standard approach would be something like this:

function($, window, undefined) {
    var x = 1;

    function myFunction() {
        var y = 2;
        $('.myClass').each(function() {
            var z = 3;
        });
    }
}(jQuery, window);

Of course it seems you want to reuse the same variable names...for the outermost x you could give it a namespace, e.g. myPlugin.x, but trying to set a local scope for the function passed to each doesn't make much sense to me...in order for it to affect anything outside of itself it's going to have to just use variables in the scope of myFunction.

answered Feb 24, 2013 at 20:00

Matt Browne

12.5k5 gold badges61 silver badges80 bronze badges

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

4 Comments

lmortenson Over a year ago

Just to add to this, 'var' is essentially the same as 'local' for the purposes that Phillip using it. When you say var x, you are guaranteeing that x will be local to that scope.

Matt Browne Over a year ago

Yes, that's true...and you could perfectly well use var x = 2; within myFunction as long as you didn't have any need to access the outer x.

Phillip Senn Over a year ago

OK, suppose I want to keep a copy of the 'this' object in each of the three variables mentioned above. In my scenario, I would have Variables.this and local.this. But I don't know what I would call it inside of the .each iterator.

Matt Browne Over a year ago

Well using this with jQuery's each method for anything other than the intended purpose is problematic to begin with...it sets this (for the iterator function) to the current element in the loop. If you use var within the iterator function, then that variable will only be accessible from the current iteration (you can override an existing variable name from myFunction if you want to). Also, if myFunction were a method in an object then you could set var self = this before calling each, which would allow you to access myFunction's this.

lxgreen · Accepted Answer · 2013-02-24 20:10:52Z

2

I suggest to rely on semantics. I.e. every (even anonymous) function has some goal it was created for.

Also, it provides two more benefits: 1) better readability, 2) self-proving code (I mean, if you have no difficulty to give a meaningful name to the scope, it implies that your model is good, and you design according to Single Responsibility Principle).

Hope this helps.

answered Feb 24, 2013 at 20:10

lxgreen

1,57915 silver badges14 bronze badges

Collectives™ on Stack Overflow

Scoping variables in JavaScript functions

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related