JavaScript variable definition and scope

Question

I'm trying to understand how variable scope works when you bind an event.

The following example works fine:

function clickHandler() {
    alert(foo);
}

var foo = true;

$('div').on({
    'click': clickHandler
});

See: http://jsfiddle.net/OliverJAsh/7fM5U/4/

However, when I make this simple change, it doesn't work anymore:

function clickHandler() {
    alert(foo);
}

(function () {
    var foo = true;

    $('div').on({
        'click': clickHandler
    });
}());

See: http://jsfiddle.net/OliverJAsh/7fM5U/3/

How would you go about making the second example work? Can I do anything with .call? I am wondering this because the function is being called where the variable is defined, so I want it to have access to that.

UPDATE:

I understand why it can't access the variable - but because the function is being called from where the variable is defined, I wondered how I could make it work, without moving the scope of things. I think I'm asking about the .call method.

Matt · Accepted Answer · 2012-01-09 14:13:16Z

2

If you declare a variable within a function using var, it will only be accessible within that function, or within functions that are declared within that function.

clickHandler is declared outside the function in which foo is declared, so it's not accessible.

If you move the declaration of clickHandler to be within the function, you'll see it works fine;

(function () {
    var foo = true;


    function clickHandler() {
        alert(foo);
    }

    $('div').on({
        'click': clickHandler
    });
}());

If you can't move clickHandler, you'll have to modify it to access foo as a parameter;

function clickHandler(foo) {
    alert(foo);
}

(function () {
    var foo = true;

    $('div').on({
        'click': function () {
            // We can access `foo` here because the function is being declared within the scope of `foo`.
            clickHandler(foo);
        }
    });
}());

edited Jan 9, 2012 at 14:13

answered Jan 9, 2012 at 14:01

Matt

75.4k26 gold badges156 silver badges181 bronze badges

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

1 Comment

user1082754 Over a year ago

But I am calling a function where the variable is defined, so how can I make it access that? I don't really want to pass the variable as a parameter. Can I do anything with .call?

Rich O'Kelly · Accepted Answer · 2012-01-09 14:17:00Z

1

In javascript variables are scoped within functions - so the scope of foo is within your anonymous (function () { .. }()); which is not visible to clickHandler.

To fix it you can bring the clickHandler function into the anonymous function like so:

(function () {
  var foo = true;
  var clickHandler = function() {
    alert(foo);
  }

  $('div').on({
    'click': clickHandler
  });
}());

Update

If you are unable to change the scoping if the clickHandler function and do not wish to change the signature either, you can use the call function like so:

function clickHandler () {
  alert(this);
}

(function () {
  var foo = true;
  $('div').on({
    'click': function() { clickHandler.call(foo); }
  });
}());

edited Jan 9, 2012 at 14:17

answered Jan 9, 2012 at 14:02

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

1 Comment

user1082754 Over a year ago

Thanks for your answer, but that's not an option in the script I am writing. Is there anything else I can do?

Shailesh Jangir · Accepted Answer · 2012-01-09 14:05:13Z

0

because var foo is not publically defined.... try this code

var foo = true;
function clickHandler() {
    alert(foo);
}
(function () {
    foo = true;
    $('div').on({
        'click': clickHandler
    });
}());

answered Jan 9, 2012 at 14:05

Shailesh Jangir

3952 silver badges10 bronze badges

Comments

amd · Accepted Answer · 2012-01-09 14:17:30Z

0

when you wrap the function with a anonymous function, the javascript parser parse all the block together and execute it as separate block.

you have to put the definition of your function clickHandler into the block

answered Jan 9, 2012 at 14:17

amd

21.7k6 gold badges54 silver badges71 bronze badges

Collectives™ on Stack Overflow

JavaScript variable definition and scope

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related