Flow Of Code Execution In JavaScript

JavaScript is a single-threaded programming language, which means it can only process one task at a time. However, it uses something called the Event Loop to handle asynchronous tasks, such as user input, network requests, and timers. Understanding the flow of code execution in JavaScript is essential for writing efficient and optimized code. In this blog post, we will take a deep dive into the flow of code execution in JavaScript and how it works with the help of an example and visible execution context in comments.

The JavaScript engine starts executing code when it encounters the global execution context. The global execution context is the outermost context and is created automatically when the script starts running. It contains all the variables and functions that are declared outside of any function. The global execution context is also known as the global scope.

// Global Execution Context
// Variables: 
//    - globalVariable
// Functions: 
//    - outerFunction()
//    - innerFunction()
var globalVariable = "global";
console.log("Start of code execution");

In the example above, the global execution context is created and it contains a variable called globalVariable and two functions called outerFunction() and innerFunction().

When JavaScript encounters a function call, it creates a new execution context for that function. This new execution context is created on top of the current execution context, which is known as the parent execution context. The new execution context contains all the variables and functions that are defined within that function.

function outerFunction() {
  // Outer Function Execution Context
  // Variables: 
  //    - outerVariable
  // Functions: 
  //    - innerFunction()
  var outerVariable = "outer";
  console.log("Inside outer function");

In the example above, when the outerFunction() is called, JavaScript engine creates a new execution context called the Outer Function Execution Context. It contains the innerFunction() function and the outerVariable.

It's important to note that the execution context contains all the variables and functions that are defined within the function. And also, variables and functions from the previous execution contexts, which are known as parent execution contexts, are accessible within the newly created execution context. This process is known as variable scope, and it's an important concept in JavaScript.

  // we are Inside outerFunction
  innerFunction();
  console.log("Accessing global variable: ", globalVariable);
  console.log("Accessing outer variable: ", outerVariable);
}

In the example above, when the innerFunction() is called, JavaScript engine creates another new execution context called the Inner Function Execution Context. It contains the innerVariable.

function innerFunction() {
  // Inner Function Execution Context
  // Variables: 
  //    - innerVariable
  var innerVariable = "inner";
  console.log("Inside inner function");
  console.log("Accessing global variable: ", globalVariable);
  console.log("Accessing inner variable: ", innerVariable);
}

In this example, you can see that each time a function is called, a new execution context is created for that function. The engine then executes the code within that context and when the function finishes executing, the execution context is removed from the stack. This process continues until all the code has been executed and the call stack is empty.

outerFunction();
console.log("End of code execution");

The above code snippet shows that the outerFunction() is called, which creates the Outer Function Execution Context. Within this context, the innerFunction() is called, creating the Inner Function Execution Context. The engine then executes the code within these contexts, and when the inner function finishes executing, its execution context is removed from the stack. The outer function then finishes executing and its execution context is also removed from the stack.

It's important to note that when a function finishes executing, the engine goes back to the previous execution context and continues executing the code. This process is known as the call stack, and it's a fundamental concept in JavaScript. It's also important to note that the JavaScript engine only executes one task at a time, and it processes the tasks in the order they are added to the call stack.

In summary, the flow of code execution in JavaScript starts with the global execution context and creates new execution contexts as functions are called. Each execution context contains all the variables and functions that are defined within that function. The engine then executes the code within these contexts and removes them from the stack when they finish executing. The call stack is a fundamental concept in JavaScript and allows the engine to process tasks in a specific order. By understanding the flow of code execution in JavaScript, you can write more efficient and optimized code.

Happy Learning😊