Java Script is some times weird...
Introduction
Java Script is one of the most popular languages in the world. I always felt even though it is most popular language but still it didn't got the respect or recognition to it. We can't deny that some of the widely used soft wares were written in it.
May be you are new to Java Script or you know it for years. Question is how much you really know about it. Today we are not going to discuss about creating an interactive web page. We are going to understand How Java Script Works? We need to understand the authors of JQuery understood. Lets get started.
What is Java Script?
Java Script is a Single-threaded Non-blocking Asynchronous Concurrent Language.
"What? What are you talking? Single threaded but concurrent? How come it is possible". I hope this would be your reaction.
Yes. Java script is single thread. At any given point only one thing can be executed through Java Script Engine. "Concurrency" is possible with help of asynchronous callbacks. What is call backs? Will discuss it later.
What is Blocking?
There is no strict definition on blocking. Any code which runs slower in the browser or makes the browser slower is called blocking. Now you got it what is non-blocking. Writing code which won't affect the browser performance is called non-blocking code.
Pothum.. Will look into our problem..
By looking at the code normal programmer will say the output will be as below.
It is wrong. One can argue by saying "if Java script is single threaded then above output is correct. In C# it would be the output.". Java Script is weird. Actual output is
There is no issue in the code. Actual problem lies in the understanding How Java Script Works under the hood? To understand why it happened like that we need to the know the components in browser.
Browser Components:
Introduction
Java Script is one of the most popular languages in the world. I always felt even though it is most popular language but still it didn't got the respect or recognition to it. We can't deny that some of the widely used soft wares were written in it.
May be you are new to Java Script or you know it for years. Question is how much you really know about it. Today we are not going to discuss about creating an interactive web page. We are going to understand How Java Script Works? We need to understand the authors of JQuery understood. Lets get started.
What is Java Script?
Java Script is a Single-threaded Non-blocking Asynchronous Concurrent Language.
"What? What are you talking? Single threaded but concurrent? How come it is possible". I hope this would be your reaction.
Yes. Java script is single thread. At any given point only one thing can be executed through Java Script Engine. "Concurrency" is possible with help of asynchronous callbacks. What is call backs? Will discuss it later.
What is Blocking?
There is no strict definition on blocking. Any code which runs slower in the browser or makes the browser slower is called blocking. Now you got it what is non-blocking. Writing code which won't affect the browser performance is called non-blocking code.
Pothum.. Will look into our problem..
 |
| 1. Problem |
By looking at the code normal programmer will say the output will be as below.
 |
| Pic 2. Expected Output |
It is wrong. One can argue by saying "if Java script is single threaded then above output is correct. In C# it would be the output.". Java Script is weird. Actual output is
 |
| Pic 3. Actual Output |
There is no issue in the code. Actual problem lies in the understanding How Java Script Works under the hood? To understand why it happened like that we need to the know the components in browser.
Browser Components:
- JS Engine - Call Stack or Execution Stack
- Web APIs
- Task Queue or Event Queue
- Event Loop
 |
| Pic 4. Components of browser |
From above picture, it is clear that Java Script Engine has two components one is Heap which is used memory and other one is Call Stack. Java Script Engine does not know setTimeout. I got surprised when i first found that. Web APIs browser components for DOM, AJAX etc. If Java Script Engine wanted to change a value in a text box. It requests DOM API. Once the WEB API completed there work and want to execute the callback then it will add it to callback queue. Event Loop will fetch the item from callback queue and add it to call stack. Once it added into call stack it will get executed.
Event Loop adds the callback to Call Stack only when the Call Stack is Empty.
Let us see step by step:
1. Console.Log will get executed. "Hi" will get printed.
2. Variable status will get initialized with false.
3. Ajax call will get executed. JS Engine will send the call to Web API.
4. If Condition Statement will get executed. Status will be still false so "fail" will be printed.
5. Now call stack is empty.
6. In the mean time, WEB API executes the ajax call and adds the callback to event queue.
7. Event loop checks the call stack is empty or not? Now Call Stack is empty so callback will be added to Call Stack.
8. Callback will get executed and Pronts "I am in".
Let us see step by step:
1. Console.Log will get executed. "Hi" will get printed.
2. Variable status will get initialized with false.
3. Ajax call will get executed. JS Engine will send the call to Web API.
4. If Condition Statement will get executed. Status will be still false so "fail" will be printed.
5. Now call stack is empty.
6. In the mean time, WEB API executes the ajax call and adds the callback to event queue.
7. Event loop checks the call stack is empty or not? Now Call Stack is empty so callback will be added to Call Stack.
8. Callback will get executed and Pronts "I am in".
Down the Files Here....
