How variable "str2" is available inside the callback method

Question

How the variable 'str2' is available inside the callback method passed to display method? str2 should be visible only inside function 'name'.

a = {
    display: function (n){
        console.log("I am inside display method");
        n();
    }
}
function name(a,str2)
{
    a.display(function (){
        console.log(str2);
    })
}
name(a, 'ddd');

No, the variables are accessible from the original scope to every inner scope. — , Nov 19 '15 at 06:22
It is inside the function `name`, being inside another function doesn't make it outside. — Spencer Wieczorek, Nov 19 '15 at 06:23

score 0 · Answer 1 · answered Nov 19 '15 at 06:24

Variable scoping in Javascript is hierarchical. Lower scopes have access to all variables of all higher scopes. Here's an example:

function outer() {
    var foo = 2;
    function inner() {
        console.log(foo); // 2
    }
}

It doesn't matter if a variable is passed as a parameter or if it was defined as a local var.

score 0 · Answer 2 · edited May 23 '17 at 12:15

In Javascript the variable declared on a certain scope is available in every inner scope. In this case it's a concept called "closure". This answer might give you good insight about scoping in Javascript: What is the scope of variables in JavaScript?

Hope this simple example can help you understand its usefulness:

function counter () {
   var votes = 0;
   this.upvote = function() { votes++; }
   this.downvote = function() { votes--; }
   this.getValue = function() { return votes; }
}

var counter1 = new counter();
counter1.upvote();
console.log(counter1.getValue()) // Prints 1

counter1.upvote();
counter1.upvote();

console.log(counter1.getValue()) // Prints 3

score 0 · Answer 3 · answered Nov 19 '15 at 06:27

Yes str should be visible only inside function 'name' yes it is working same you said, in JavaScript function declarations loads before any code is executed, and scope depend on execution context

in your code scope of str2 is inside name() function and you call a.display() within this scope (within scope of name()) that's why str2 available inside display() at the time of execution.

score 0 · Answer 4 · answered Nov 19 '15 at 06:28

To evaluate name(a, 'ddd'), the compiler will create a new stack frame and place two slots on it, one a, which will be a reference to the global object of the same name, and str2, which will contain the string literal 'ddd'. Then the body will be evaluated.

In the body, to evaluate a.display(function(){...}), the value of a.display will be resolved to the function with parameter n. To evaluate n(function(){...}), a new stack frame will be created with n assigned to the closure that results from evaluating the anonymous callback (a closure being a combination of a pointer to the static scope of the function and the compiler generated code for the function itself). Then the body of the a.display function will be evaluated.

In the body, the console.log will be called with the given string. Then the callback n() will be evaluated. Since n doesn't take any parameters, it will just be evaluated in the topmost stack frame, so when the time comes to evaluate console.log(str2), str will not be found on the current stack frame, so the compiler will follow the scope chain all the way to the frame where we bound 'ddd' to str and a to the function.

That's a pretty long answer to your simple question. I'll try to shorten it later. Also, corrections are welcome, as I'm being very hand-wavy with the evaluation process.

How variable "str2" is available inside the callback method

4 Answers4