Guess what is the output of the program?

1 var x = 10;
2 a();
3 b();
4 console.log(x);
5 function a() {
6     var x = 100;
7     console.log(x);
8 }
9  function b() {
10    var x = 1000;
11    console.log(x);
12  }

Output is:

100
1000
10

Why do we get the above result?

Due to the variable environment of the execution context.

What is variable environment of execution context?

The variable environment of an execution context refers to the memory component or environment in which variables, functions, and arguments are stored during the execution of code.

In the global execution context, this variable environment represents the global scope and contains all the variables, function declarations, and function parameters defined in the global scope.
Similarly, when a function is invoked, a new execution context is created with its own variable environment, which holds the variables, function declarations, and function parameters specific to that function's scope.
The variable environment is an important part of the execution context as it allows for the storage and retrieval of data during code execution.

Let's understand the above program line-by-line:

1. var x = 10;

Here, a variable x is declared and assigned the value 10 in the global scope. The variable x is stored in the variable environment of the global execution context.

2. a();

This line invokes the function a(). Since function declarations are hoisted, the function a() is accessible and can be called before its actual declaration in the code.

function a() {: The function a() is declared. When a function is declared, it creates its own execution context, including its own variable environment.
var x = 100;: Inside the function a(), a new variable x is declared and assigned the value 100. This variable x is local to the function a() and is stored in the variable environment of the a() execution context. It does not affect the global variable x.
console.log(x);: This line logs the value of the local variable x (which is 100) to the console. Since the function a() has its own variable environment, it can access and print the local variable x.

3. b();

Similarly, this line invokes the function b().

Similarly, the function b() is declared (lines 9-12). It creates its own execution context with its own variable environment.
var x = 1000;: Inside the function b(), a new variable x is declared and assigned the value 1000. This variable x is local to the function b() and does not affect the global or a() function variables.
console.log(x);: This line logs the value of the local variable x (which is 1000) to the console.

4. console.log(x);

Finally, after executing the function calls, the code reaches line 4, which logs the value of the global variable x (which is 10) to the console.

Conclusion:

Each function declaration creates its own execution context with a separate variable environment. Variables declared within each function are scoped to that specific function and do not interfere with variables in other scopes. The global variable environment holds variables accessible throughout the program, while each function has its own isolated variable environment. You learned How do functions work in JavaScript & Variable Environment? in this blog. You can now research more about it online. If you'd like, you can connect with me on Twitter.

Gratitude for reading.

Resource:

How functions work in JS ❤️ & Variable Environment | Namaste JavaScript Ep. 4

Request:

If I make mistakes in the blog, please comment.🙏

Technical blogs