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');
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.
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.
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.
Whenever I hover over #Rock div I want it to apply a style to both .RockToScissors & .RockToLizard at the same. A the moment I have: <div onmouseover="overRock()" onmouseout="outRock()"> ...
Whenever I hover over #Rock div I want it to apply a style to both .RockToScissors & .RockToLizard at the same. A the moment I have: <div onmouseover="overRock()" onmouseout="outRock()"> ...
Hi i've tried to display an image on jsp but failing miserably. Im generating a chart and saving a the file than refreshing it, now i want to show this picture called chart on jsp. i know this is all ...
Hi i've tried to display an image on jsp but failing miserably. Im generating a chart and saving a the file than refreshing it, now i want to show this picture called chart on jsp. i know this is all ...
How to return a component through the JS innerHTML() function? With the code below, it is returning on the browser screen: [object Object] document.getElementById("threeline-icon").innerHTML = ...
How to return a component through the JS innerHTML() function? With the code below, it is returning on the browser screen: [object Object] document.getElementById("threeline-icon").innerHTML = ...
I am learning JavaScript and currently I build simple tip calculator using function and switch statement. Basically, tip 20% of the bill when the bill is less than $50, 15% when the bill is between $...
I am learning JavaScript and currently I build simple tip calculator using function and switch statement. Basically, tip 20% of the bill when the bill is less than $50, 15% when the bill is between $...