JavaScript variable definition and scope?

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

Up vote 0 down vote favorite 1 share g+ share fb share tw.

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: 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: 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. Javascript variables scope link|improve this question edited Jan 9 at 14:04 asked Jan 9 at 13:58Oliver Joseph Ash1848 75% accept rate.

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

Thanks for your answer, but that's not an option in the script I am writing. Is there anything else I can do? – Oliver Joseph Ash Jan 9 at 14:05 @OliverJosephAsh answer updated.

– rich. Okelly Jan 9 at 14:13.

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

I don't really want to pass the variable as a parameter. Can I do anything with . Call?

– Oliver Joseph Ash Jan 9 at 14:02 @OliverJosephAsh: See me update. – Matt Jan 9 at 14:03.

Because var foo is not publically defined.... try this code var foo = true; function clickHandler() { alert(foo); } (function () { foo = true; $('div'). On({ 'click': clickHandler }); }()).

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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.