Function Execution in JavaScript

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!