What is Execution Context In JavaScript?
Tags: javascript, jsengine, developers, fundamentals
Published: 2024-06-08 08:02:38

---
title: What is Execution Context In JavaScript?
published: true
description: Understand the Execution Context In JavaScript in an easy way.
tags: #javascript #jsengine #developers #fundamentals
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt47ijfx4wtrtc8wggfc.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-07 15:37 +0000
---
## JavaScript Execution Context - Internal Working of JS
### In Simple Terms
In simple terms when you run a JavaScript program, the whole program runs inside a container or box, and remember this:
> "Everything in JavaScript happens inside an Execution Content"

Look at the diagram again! Yes, execution context in javascript has two components: memory; and code component.

Let's understand both components and then we can at last we will combine all these pieces and we will be able to understand JavaScript Execution Context.

![What is Execution Context In JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzvebcn508dgtrdw1hel.png)

**Memory Component**
This is the section where all the variables and functions we declare in our program are stored. These variables are stored as key-value pairs i.e., `key: value`. This memory component is also known as the variable environment

**Code Component**
This is the section where the codes are executed line by line (one line at a time). There is a fancy name for it **Thread of Execution**

### Phases of the JavaScript Execution Context
When you execute a `JS` code, it goes through 2 phases in order:
> These are not official terminology, I am using them to make you understand Execution Context In JavaScript.

1. **Scanning Phase**: In this phase, the `JS` engine creates the container that we discussed earlier (Execution Context). It allocates memory for the variables and functions in the memory component. The variables are assigned the value of `undefined` and the functions are directly copied from the code to the memory component.

2. **Execution phase**: In this phase, the magic happens and the `JS` engine executes the code one line at a time. You remember in the scanning phase it assigns the value of `undefined` to the variables, and in the execution phase the `undefined` is replaced with the value that is declared in our code.

Let's understand with the help of a simple program:

```js
 let a = 10;

 function addOne(num) {
   return num + 1;
}
```

In the scanning phase:

![Creation or Scanning Phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0h3e9dt6zrbdymzaify.png)

In the execution phase:
That `undefined` is replaced with the actual value, which we assign in our code `10`.

This as a whole is known as the Execution Context In JavaScript.
I hope you understand it clearly, but if not then below is a real-life example that will help you understand it even more!

### JavaScript Execution Context With Real Life Example
####Imagine You're at a Restaurant
Think of `JS` as a restaurant, where different chefs (functions) are preparing meals (executing code).

The **Execution Context** is like the kitchen workspace that each chef uses to prepare their meal.

When the restaurant opens, the head chef (JavaScript engine) sets up the Global Execution Context. This is the main kitchen workspace where everything starts. 
- Ingredients (variables and functions) that are available to all chefs.
- Utensils (methods and objects) that everyone can use.
- Recipes (global functions) that any chef can follow.

```js
function makeSalad(ingredient) {
  var dressing = "Olive Oil";
  console.log("Using ingredient: " + ingredient + " with " + dressing);
}
makeSalad("Lettuce");
```

When the function makeSalad("Lettuce") is called, the following happens:
- Creation
    - The workspace (Execution Context) is set up.
    - Local ingredients (variables and functions) are declared.
    - `ingredient` is set to "Lettuce".
    - `dressing` is declared but not yet defined.

- Execution Phase:
    - Local ingredients are assigned values.
    - The function's code runs using these local items.

### Conclusion
- Execution Context (EC) is created by `js` engine whenever a code is run
- EC contains two phases: creation, and execution phase
- When a variable is declared or a function is created, and completely new EC is created inside the global EC.
- The EC is the chef's workspace.
- The Global Execution Context is the main kitchen setup.
- Each Function Execution Context is a new chef's workspace, created and stacked as needed.