Call Stack Concept in JavaScript

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

要查看或添加评论,请登录

Ehsan Safari的更多文章

  • Tips For Better Next.js Development...!

    Tips For Better Next.js Development...!

    Hi, dear connections, In this article, I listed 5 tips to improve your Next.js Development.

    2 条评论
  • Prevent XSS Attacks in React.js

    Prevent XSS Attacks in React.js

    Imagine that we have a blog variable that contains some HTML tags. If we display the blog directly inside the JSX…

    6 条评论
  • Schema-Based Form Validation in React.js

    Schema-Based Form Validation in React.js

    There are several libraries in the market, that can provide React.js projects with the schema-based form validation.

    1 条评论
  • Updating objects in React State

    Updating objects in React State

    Just like Props, we should treat state objects as immutable (read-only). For example, in the following code, we cannot…

    4 条评论
  • How to integrate TinyMCE into a React.js App

    How to integrate TinyMCE into a React.js App

    When it comes to choosing the best text editor for our application, TinyMCE is one of the top rich text editors in the…

  • Image Loading Optimization in Nextjs

    Image Loading Optimization in Nextjs

    ?? Image Loading Optimization in Next.js: For your NEXT.

  • ????? ???? ???? ?? pagination ???? ?? ??? ?????

    ????? ???? ???? ?? pagination ???? ?? ??? ?????

    ???? pagination ?? ???? ??? useQuery ?? ?? ??? ??? ????? ???: useQuery(["posts", currentPage],() =>…

社区洞察

其他会员也浏览了