Asynchronous JS: How JavaScript Works?

Execution Context

• The JS engine reads our code line by line with help of syntax parsers and creates a execution context (Can be more than one) which is responsible for running our code and does bit of

• The base execution context is called Global (accessible anywhere, not inside any function) Execution context which has

1. Global object - window object in case of browser, it will vary in node env but there is always a global object
2. this keyword (which points to global object in this case)
3. A link to the outer environment - which will be null in case of global execution context
4. You code which it needs to run

That's why even when you don't put anything in the App.js file and run it in the browser, because we are running the Javascript file the execution context is created and we can access the window object in the browser console.

To Create Execution Context JS does two steps

1. Creation and Hoisting:

• In this step the JS setup the memory for variables (declared with var) and functions. Hence when we execution code and try to access variable which is declared later it still works as variable is already present in the memory and we can also call function which is declared later in the code

2. Code Execution

• Runs the code line by line

Call Stack

• It keeps information about which function is currently getting executed and what to call next
• It is stack DS which keep adding functions as they gets called
• We can view Call Stack by going into source tab of Dev Tools and putting breakpoint in the code

JavaScript is a Single Threaded Language

Only does one thing at any particular time or nothing

Then how we can handle things which takes time like API calls or save to Database?

Try Me to Understand How JS Works Visually