Introduction
JavaScript also supports functions like every other programming language. In C, when a function is called, it is pushed to the call stack and the control is passed from the main to the called function. Functions get executed differently in every language. This is because each language is developed in a certain way.
According to its characteristics and features, every language is suitable for a specific use case.
This article will look at how functions are executed in Javascript language. But there are some pre-requisite concepts that you should be aware of before we jump to the functions in JavaScript.
Also, in this whole article, you will notice that we are mentioning code execution line by line in a specific order. For the reason behind this, recollect that JavaScript is a synchronous single-threaded language.
Now, let’s start by understanding the internal working of JavaScript.
Execution Context
How does a browser know that it is a JavaScript code when you embedded it in your HTML base code? For that, you add <script> tag or any JavaScript related tag like OnSubmit, OnClick, etc. in your code.
As soon as the browser gets to know it is a JavaScript code, it sends it to the JavaScript engine. All this code is compiled and executed here.
For this, the JavaScript engine creates an environment called Execution Context. In the Execution Context, memory is allocated to all the variables and executable code.
There are mainly two categories of the Execution Context:
- Global Execution Context
- Function Execution Context
Global Execution Context
The whole code inside the <script> tag falls in the Global Execution Context. It is similar to the main() function in C/C++.
It is the default or Base Execution Context where the whole code gets executed.
When we say ‘the whole code’, we exclude the functions included in the code. For functions, there is another Execution Context created.
Function Execution Context
For every function in the code, there is a separate Execution Context used known as Function Execution Context. Function Execution Context holds all the variables inside the function and its executable code.
So, while there can be only one Global Execution Context, the number of Function Execution Context can be more than one. It is equal to the number of functions.
As the number of total Execution Context can be many in number, JavaScript employs Execution Stack to ensure that they are executed in a specific order. It is a stack-like structure that holds the Execution Contexts that are to be executed. The one at the top gets executed first. As soon as its execution is completed, it is popped out and the next is executed until the whole Execution Stack is emptied. It is similar to the call stack in other languages like C, C++, etc.
At the bottom of the Execution Stack is always the Global Execution Context.
For example, a JavaScript code has a function inside it, so at a point when the function is getting executed, Execution Stack will look like this:
By now, you must be aware that everything in JavaScript happens inside the Execution Context only. Let’s see how the JavaScript engine creates an Execution context.