Table of contents
1.
Introduction
2.
Execution Context
2.1.
Global Execution Context 
2.2.
Function Execution Context
3.
Creation Of Execution Context
3.1.
Creation Phase
3.2.
Execution Phase
4.
Function Execution in JavaScript
5.
Frequently Asked Questions
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Function Execution in JavaScript

Author Vidhi Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

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: 

  1. Global Execution Context
  2. 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. 

Creation Of Execution Context

An Execution context is created in two phases, that are explained in detail below:

Creation Phase

It is the first phase where all the variables and functions are stored. They are stored as key-value pairs. Initially, the value of the variables is set to ‘undefined’.
Basically, it creates an environment where all the variables and functions are allocated memory and this environment is called the variable Environment. 
No sort of execution takes place in this phase, JavaScript engine just scans through the whole code in this phase. 

This concept where memory allocation takes place prior to the execution, no matter where the declaration is done in the code, is called Hoisting.

Execution Phase

It is where the JavaScript is executed line by line or one line at a time. This environment is known as the Thread of Execution. 
In this phase, again the whole code is scanned and the variables are assigned the values in the variable Environment in case it is done in the code. 

Let’ s try to understand this concept with an example. 

Consider the following code: 

<script> 
	var  example=1; 
	console.log(example);
</script> 
You can also try this code with Online Javascript Compiler
Run Code

 

Now, let’s see how it is run internally by the JavaScript engine.

Firstly, a Global Execution Context is created and pushed in the Execution Stack, as soon as <script> tag is encountered.

Now in the Creation Phase, the variable ‘example’ is allocated the memory with a value undefined in line 2. In line 3, there is no memory allocation. 

 

After Creation Phase:

Again the whole code is scanned, this time in the Execution Phase.

For line 2, the value of the variable ‘example’ is updated.  

 

After line 2 in the Execution Phase:

 

For line 3, the value of the variable ‘example’ is printed on the console. 

Output: 

2 

 

After line 3 in the Execution Phase:

Function Execution in JavaScript

Execution of function is similar to the execution of any other code. Just that there is Creation of Execution Context for each function as mentioned earlier. 
Now, that you know the basics of a code is executed in JavaScript, learning how function execution works are going to be a cakewalk. 

First, let’s consider a piece of code:

<script> 
	var example1=2;
	var one=double(example1); 
	function double(num)
	{
		var val=num*2;
		return val;
	}
</script>
You can also try this code with Online Javascript Compiler
Run Code

 

Along with the code, the line number is also mentioned, so that it becomes easier to follow while explaining.  
Also, if you observe in the code, the function declaration has not been done in the beginning as we do usually. Well, this is intentional. You will get it as you follow along with the article.
Let’s start by executing this code.

As soon as we run this code, a Global Execution Context is created and pushed into the Execution Stack. 

Now we enter the Creation Phase.

In line 2, the variable ‘example1’ is allocated memory.

We move to line 3. Here, the variable ‘one’ is allocated memory.

Line 4 to line 8 include function declaration and definition. 

After all this the Execution Phase begins. 

Line 2 of the code updates the value of the variable ‘example1’.

Line 3 invokes the function double(). Now, when the function is invoked, a Function Execution Context is created and pushed to the Execution Stack. 

Now, Function Execution Context is created as the function gets invoked.

So, in the Creation Phase, memory is allocated for num (line 4) and val (line 6)

For Execution Phase: In line 4, value of ‘num’ is updated to 2 as ‘num’ is the parameter and the argument passed to it has the value 2, which is ‘example1’ in this case.

In line 6, the value of ‘val’ is updated to num*2, that is, 4.

Line 6 simply returns the value 4. 

After this, the Function Execution Context is popped out of Execution Stack.

Now, the control is returned back to the Global Execution Context. 

So, the value of ‘one’ is updated to 4 as it was returned by the function. 

After the execution ends, Global Execution Context is also popped out and Execution Stack is empty. 
So, you see although the function was not declared in the beginning, the code worked perfectly. 

We hope now you know how function execution works in JavaScript You find it a little confusing initially, but we suggest you take your own sample code and try to run it as explained here.

You can compile with the help of Online Javascript Compiler for better understanding.

Also check out - Phases of Compiler

Must Read Fibonacci Series in JavaScript

Frequently Asked Questions

  1. What are the two phases in which Execution Context is created in JavaScript?
    The two phases are: The Creation Phase and the Execution Phase. 
     
  2. What value is assigned to the variables in Creation Phase?
    The variables are assigned as undefined in the Creation Phase.
     
  3. How does JavaScript keep track of what function to execute?
    Execution Stack helps in keeping track of what function to execute.

Conclusion

This article extensively discusses how function execution takes place in JavaScript. We also explain JavaScript’s procedure of code execution. 

We hope that this blog has helped you enhance your knowledge regarding how JavaScript function execution work and if you would like to learn more, check out our articles on JavaScript. Do upvote our blog to help other ninjas grow. 

Happy Coding!    

Live masterclass