CODEWITHSUNDEEP
javascriptjqueryscope
Alan Budzinski
Alan Budzinski

Reputation: 809

javascript/jquery function scope

 function onMouseClickFunction() {

    $mapCanvas.click(function (e) {
        var x = cursor.getCursorPositionInCanvasX(e.pageX),
            y = cursor.getCursorPositionInCanvasY(e.pageY);

what is the variable scope in this example is it function onMouseclickFunction or perhaps the anonymous function of jquery?

What i ment is that javascript uses hoisting creating variables at the top of its parent function, so where is hoisting done in this example?

Upvotes: 1

Views: 121

Answers (4)

Quentin
Quentin

Reputation: 943108

Assuming you mean the variables x and y, then it is the anonymous function passed to click().

var always scopes to the current function.

What i ment is that javascript uses hoisting creating variables at the top of its parent function, so where is hoisting done in this example?

Hoisting means that when you use var, the variable will be scoped for the function, even if you have previously tried to use it.

i.e.

function () {
    var x = 1;

    function () {
         alert(x);
         var x = 2;
    }
}

If the inner function was called, it would alert undefined because var x = 2 creates a new x in the scope of the inner function (var is hoisted), but the assignment doesn't take place until after the alert (since the assignment is not hoisted).

All the var statements in the question appear at the top of the function they appear in, so hoisting makes no difference.

Upvotes: 4

Jens Neubauer
Jens Neubauer

Reputation: 1090

What you have created here is a closure.

As such, the anonymous function would inherit the scope of onMouseClickFunction, but the variables x and y are only in the scope of the anonymous function.

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219920

Every variable properly declared will always have a local scope to the current function.

Since you're using the var statement properly, your x and y variables are local to your anonymous function.

If you want to be able to access those variables from your onMouseClickFunction function, you should declare them outside your click event handler. You'll still have access to them from within the click handler, since that function itself is declared within the onMouseClickFunction function.

This is known as JavaScript's scope chain lookup: if a variable you're using has not been declared within the local scope, JavaScript will look for it in the scope just above the current one (which in the case of your anonymous function is the outer onMouseClickFunction). If it's not declared there either, it'll keep on looking all the way up the scope, till it reaches the global scope.

If the variable is not found anywhere through the scope chain, it'll be declared as a new variables in the global scope. That's why it's imperative to always declare your variables with a var statement, as you've done.

Upvotes: 5

Anthony Grist
Anthony Grist

Reputation: 38345

It would be the latter (the anonymous function), since that's the function in which the variables are being declared.

Upvotes: 0

Related Questions