Javascript function execution and nested function calls

Question

I've been learning javascript for a few months I've attend one js quiz I saw this questions I'm not able to understand the execution flow of this very simple code , It would be really helpful if someone will explain it to me clearly , Thanks in advance

var a = 'Is';
function test() {
 var a = 'Fun';
 function again() {
 var a = 'JavaScript';
 alert(a);
 }
 again();
 alert(a);
}
test();
alert(a);

Output

Javascript 
Fun 
Is

• VLAZ: Did you try walking through the execution with a debugger?
• Hashim aslam: sorry, i haven't been tried a one actually, I've no idea what is a debugger,Could you please help me with any link to the debugger thing? thank you @VLAZ

Answer 1

1: var a = 'Is';
2: function test() {
3: var a = 'Fun';
4: function again() {
5: var a = 'JavaScript';
6: alert(a);
7: 
8: }
9: again();
10: alert(a);
11: }
12: test();
13: alert(a);

Before execution of Line 1: A variable a, initialized with the value undefined, and a function test, are added to the current lexical environment. If this code is run in the global context, these variables will be added as properties on the global object.

Line 1: The string 'Is' is assigned to the variable a in this lexical environment.

Line 12: The hidden method [[Call]] is invoked on the function test, and a new execution context is created, with a variable a (with an initial value of undefined) and a function again added to its lexical environment.

Line 3: The string 'Fun' is assigned to the variable a in this lexical environment.

Line 9: The hidden method [[Call]] is invoked on the function again, and a new execution context is created, with a variable a (with an initial value of undefined) added to its lexical environment.

Line 5: The string 'JavaScript' is assigned to the variable a in this lexical environment.

Line 6: The host-provided window.alert function is invoked, passing the value associated with variable a in this lexical environment ('JavaScript').

Line 10: The host-provided window.alert function is invoked, passing the value associated with variable a in this lexical environment ('Fun').

Line 13: The host-provided window.alert function is invoked, passing the value associated with variable a in this lexical environment ('Is').

• Hashim aslam: Thank you so much this really helps its more clear about how js works ,its easy to understand too

Answer 2

It's all about variables scoping and closure. Firstly test is called, so script runs it. Inside test function, new function again is created and called.

Every child function has access to parent functions variables (closure), but if the child function itself has a variable, that is overwriting parent's variable (var a), than the child function uses it own variable (or variable that is in the closest closure).

For example:

const a = 1;
function first(){
 const a = 2
 console.log(a)
 function(){
 console.log(a)
 }
}

will console log:

2
2

Some more nice info here: What is the scope of variables in JavaScript?

Answer 3

Hope with the help of console logs you will be able to understand the control flow.

Press Ctrl+Shift+I , run the code snippet at the end of this answer.

Now to navigate through the flow control use these buttons.

enter image description here

debugger
var a = 'Fun';
function test() {
 console.log("Im in test");
 var a = 'Is';
 function again() {
 console.log("Im in again");
 var a = 'JavaScript';
 alert(a);
 
 }
 again();
 console.log("Iam here after calling again");
 alert(a);
}
test();
console.log("Im here after calling test");
alert(a)

Answer 4

To begin with, refer to the following link on the alert() method https://www.w3schools.com/jsref/met_win_alert.asp. Besides, learn more about variables' scoping in Javascript on the following link https://www.w3schools.com/js/js_scope.asp.

As per your question, the execution flow is as follows:

1. A Global Variable 'a' has been initialized or assigned to 'Is'
2. We're creating a custom function test
3. Inside our custom test() function, we create a local variable 'a' and Assign it to 'Fun'
4. We create a local function again inside the test function
5. Inside the again function, we create a local variable 'a' and assign its value to 'Javascript' and then echo an elert box with the value of 'a'
6. Outside the again() function but inside test() scope we Invoke the function again and then we alert() the value of 'a' which the variable 'a' inside the test() and outside the again().
7. Finally, outside the test() function we invoke the test() which then Invoke again inside it. We then alert the value of 'a'.
8. Every time, we Invoke the test() function will trigger the Invocation of the again() and alert Inside it.

Hence, the output above. I hope the description will work.