JavaScript is one of the most used languages, people find it hard as they don't understand the depth of it. Let's begin from scratch.
1) How JavaScript works (Behind the Scenes)
Everything in JavaScript is Written in the Execution context block, Execution Context Block contains a Variable environment and Code Component
Variable Environment
All the variables and the Functions are stored in the Variable Environment in the form of
Key: Value
Code Component
It is also known as the Thread Of Execution, each line is executed one by one.
JavaScript is a Synchronous and Single Threaded Language, Synchronous means in a specific order, and Single threaded means execution of one command at a time.
var n=2;
function square(num){
var ans=num*num;
return ans;
}
var square2=square(n);
var square4=square(4);
Global Execution Contex will be created
It is divided into 2 phases
1) Memory Creation: every variable will be allocated undefined, and if a function block is encountered the whole code will be placed inside the memory block
n: undefined
square{...}
square2:undefined
square4:undefined
2)Code Execution Phase: In this Phase, the value will be allocated to the variables in the code block, and if the function is invoked the new Local Execution Contex will be created, with the 2 phases again, all the variables inside the function will get memory inside the local execution memory block and in code block the code will get executed if return is encountered the variables in the global executed will get the value. And the local Execution block will be deleted from the call stack.
Call Stack maintains the execution order of the Execution Context.
2) Hoisting in JavaScript
getName();
console.log(x);
console.log(getName());
var x=5;
function getName()
{
console.log("HELLO");
}
OUTPUT:
HELLO
undefined
f getName()
{
console.log("HELLO");
}
Before execution of code, the memory has already been assigned to the variables, variables are allocated with the undefined placeholder. hence we get output as undefined for the variable, and functions are copied as it is in the memory, the whole function block is printed.
Therefore we can invoke the functions before defining them.
3) Functions in JS
var x=1;
one();
two();
console.log(x);
function one(){
var x=5;
console.log(x);
}
function two(){
var x=6;
console.log(x);
}
Firstly, the Global Execution will be created in a call stack. It consists of two phases: Memory and Code. Initially, variables will be defined as "undefined," but in the code phase, they will be allocated with the assigned value, e.g., 1.
Then function one is invoked, and it will go into the call stack, creating its own memory and code block (local to this function). Hence, the output will be 5. After that, it will be popped off from the call stack.
The same process occurs with function two; its local execution will be created, and the output will be 6. Then it will be removed from the call stack.
Control will go back to line number 4, and the value of x will be printed, e.g., 1.
Now everything is executed so the execution context will get deleted and the Global execution context will be popped out from the stack.
4) Undefined vs Not Defined
Let's see a code snippet and understand this
console.log(a);
var a=5;
console.log(a);
The output will be :
undefined
5
Why undefined ?
As we know in the first phase the memory will get allocated to the variables, since the 'a' variable is in global scope, undefined will be assigned to it.
Later on, it is assigned as (a=5) during the execution phase.
console.log(a);
var a=5;
console.log(a);
console.log(x); // since x variable is not defined
// error will be thrown
5) The Scope Chain and Lexical Environment