Hoisting and Call Stack

The term "hoisting" refers to accessing variables and functions before they have been defined. Other programming languages often forbid this, but javascript makes an exception. Let's examine the code below.

var x = 10;
function hello(){
    console.log('hello');[[Text]([Link](Link))](Link)
}
console.log(x);
hello();

Output

10
hello

However, if we use the function before we define it and print the variable before we give it a value, then our code will appear as follows.

console.log(x);
hello();
var x = 10;
function hello(){
    console.log('hello');
}

Output

undefined 
hello

A few questions are raised by javascript's odd behaviour.

Before they are declared, how are variables and functions accessed?

We must have a thorough awareness of both execution content and the global execution context in order to respond to this. For easier visibility, a global execution context is established when we run our entire code; picture it as a box. It consists of two parts: the memory component comes first, followed by the code component; these parts go by different names.

The variables are scanned when the global execution context is created and given the value "undefined," and the functions are assumed to be duplicated exactly as they are, with a reference to them being preserved in the memory stack.

Call Stack

Call stack is a stack that keeps track of the context's execution order. Java script only executes one task at a time since it is a single threaded language. With the use of the following example, let's condense these sentences:

function hello(){
    console.log('hello');

    function hi(){
    console.log('This is inside hello function');
    }
    hi();
}
hello();

Output

hello
This is inside hello function

Therefore, when our code is performed, we receive our global execution context (GEC), which is the top call stack call. The call stack is empty before the function is executed. Variables are assigned undefined (if any are there) after the inclusion of GEC (for our code), and functions references are retained. As soon as the hello() function is run, it is stacked immediately above the GEC in our call stack. When a function is called, an execution context is created by stacking the hi() function above the hello function.

Now that all of our functions are inside the stack, the LIFO principle governs the order in which they are executed (last in first out). First, the hi function will be eliminated first according to the LIFO principle since it is run last and reaches the stack last. The similar pattern is followed by Hello(), and after our code has finished running, GEC will also exit the call stack. The call stack will be empty as a result.