Call Stack Concept in JavaScript

JavaScript is a single-threaded programming language which means that it has only one call stack that is used to execute the program.

But some tasks take a long time to complete, such as an API call, or IO operation (reading file content).

Users cannot wait for this heavy task to complete and then send the next request.

Async calls will solve these issues!

Asynchronous here refers to the functions in JavaScript that are processed in the background without blocking any other tasks.

In this way (callbacks, promises, async/await), the user is not forced to wait for the main thread to become idle.

To understand async, we first have to look at the call stack concept.

The call stack, like other stacks, is LIFO (Last In, First Out) which contains all nested calls of functions code.

Since JavaScript is a single thread, it has only one stack.

Consider this code:

function f1() {
    console.log('Hi by f1!');
}
function f2() {
    f1();
    console.log('Hi by f2!');
}
f2();        

Note: You can see the call-stack steps in the attached image.

Step 1: When the code loads in memory, the global execution context gets pushed in the stack:

Step 2: The f2() function gets called, and the execution context of f2() gets pushed into the stack:

Step 3: The execution of f2() starts and during its execution, the f1() function gets called inside the f2() function. This causes the execution context of f1() to get pushed in the call stack:

Step 4: Now the f1() function starts executing. A new stack frame of the console.log() method will be pushed to the stack:

Step 5: When the console.log() method runs, it will print “Hi by f1” and then it will be popped from the stack. The execution context will go back to the function and now there are no lines of code that remain in the f1() function, and as a result, it will be popped from the call stack.

Step 6: This will similarly happen with the console.log() method that prints the line “Hi by f2” and then finally the function f2() would finish and would be pushed off the stack.

#javscript #async_task #single_thread #async_await