when we execute the above file in which above code is written, then let’s see what happens in the Call stack.<\/p>\n
1 . main function (anonymous function) of the file is pushed to the call stack.<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_2-3.png\")
<\/p>\n
2 . Then Self invoking function is pushed to the call stack.<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_3-2.png\")
3 . Then div() function will go to the call stack.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_4.png\")
<\/p>\n
Then mul(), sub() and add() functions are entered to the call stack.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_1-2.png\")
<\/p>\n
After all the functions enter to the call stack now call stack executes all the function one by one from top to the bottom. means add() function will execute first which entered last into the call stack. After execution of add() function it will be removed from the call stack. And this process will continue until completion of all the functions execution. After completion call stack will be empty.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_5-1.png\")
<\/p>\n
Result will be –<\/p>\n
5<\/p>\n
-1<\/p>\n
6<\/p>\n
0.66666<\/p>\n
Now let’s bring some twists on this above code<\/p>\n
we know very well about setTimeout() function right? In setTimeout() function we can call function. setTimeout() itself is an asynchronous callback function.<\/p>\n
Let’s have a look at the below example –<\/p>\n
function add(num1, num2) {\r\n console.log(num1 + num2);\r\n}\r\n\r\nfunction sub(num1, num2) {\r\n console.log(num1 - num2);\r\n}\r\n\r\nfunction mul(num1, num2) {\r\n console.log(num1 * num2);\r\n}\r\n\r\nfunction div(num1, num2) {\r\n console.log(num1 \/ num2);\r\n}\r\n \r\n(function () {\r\n var num1 = 2;\r\n var num2 = 3;\r\n\r\n add(num1, num2);\r\n\r\n setTimeout(function () {\r\n sub(num1, num2);\r\n }, 3000);\r\n\r\n mul(num1, num2);\r\n\r\n setTimeout(function () {\r\n div(num1, num2);\r\n }, 3000);\r\n\r\n})();<\/pre>\nNow let’s see what happens in call stack. All the function will enter into the call stack one by one but at the time of execution there will be some little change.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_6-1.png\")
<\/p>\n
1 . First add() function will be executed then you must think sub() function will be execute but actually not because sub() function is in callback function, so it will be executed after 3 second. But you can see mul() function will be executed after the add() function.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot_7.png\")
<\/p>\n