# How does JavaScript run our code?

**"Why isn't this working?"** This is the question that I'm sure every JavaScript developer asks themselves every day. I get it – sometimes JavaScript acts strangely and we're left wondering what's really going on. But worry not, because today you're going to discover what's happening behind the scenes and how JavaScript actually runs our code!

# The 3 main components of JavaScript's engine

In order to execute any code in JavaScript, three key components come into play:

1. A Thread of Execution.
    
2. A memory space for data storage (also known as Memory).
    
3. A Call Stack.
    

Let's take a closer look at each of these elements through the illustrative examples provided below.

# Step-By-Step examples

Let's jump into a step-by-step breakdown of the provided code example:

Consider the code snippet:

```javascript
const num = 3;
function multiplyBy2 (inputNumber){
    const result = inputNumber*2;
    return result;
}
const output = multiplyBy2(num);
```

We're about to uncover what exactly is happening within this code. Let's tackle it line by line.

1. In the first line, we are defining a constant named `num` and assign it the value 3. To ensure the availability of `num` across our code, its data is stored in the **Global Memory**.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690902999250/6748ab78-9dcb-4cef-8637-6e1eea02dfcf.png align="center")
    
2. Moving to the second line, we're defining a function named `multiplyBy2` which accepts a parameter named `inputNumber`. Just as you might have guessed, this too finds a home in the **Global Memory**.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691147416978/089f2689-99cc-4f71-b44e-9ec27fd0473c.png align="center")
    
3. Now, let's approach the third line (not chronologically third). Here, the constant `output` is defined and set to a certain value... but what value precisely? It's not immediately apparent; to unveil it, we must execute the `multiplyBy2` function.
    
4. Upon invoking the `multiplyBy2` function, a crucial entity called the **Execution Context** emerges – a fancy term essentially signifying a location equipped with memory to execute our code. Within this Execution Context resides the Local Memory, serving as a place for the function's data.
    
    Simultaneously, the invocation of `multiplyBy2` is pushed onto another component referred to as the **Call Stack**.
    
5. Within the `multiplyBy2` function, we start by saving the `inputNumber` parameter within the **Local Memory**, setting it to the argument's value of 3. Subsequently, we define a constant named `result`, assigning it the outcome of multiplying `inputNumber` – which holds the value 3 – by 2. Ultimately, the value of `result` is returned and finds its place in the **Global Memory**.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691152026747/0031f2af-e106-435b-94c1-1896a95e474b.png align="center")
    

Now, let's circle back to our three components as we observed them in action.

1. **The Thread of Execution**
    
    This is like following a recipe step by step. It's JavaScript's ability to go through the code, line by line, and do what each line says.
    
2. **A Place to Store Data**
    
    Think of this as having different storage spaces for your stuff. When we talk about the Execution Context, this storage space can be either "Global" – which means everyone can access it – or "Local" – which is just for a specific function. In the case of Local storage, once a function finishes its job, it tidies up and throws away all the notes it took while working.
    
3. **The Call Stack**
    
    Imagine you have a stack of plates, and each plate has a task written on it. This stack is the Call Stack. When a function is called, it's like adding a plate with a task to the stack. JavaScript looks at the top plate and does the task written on it. When it's done, that plate is taken off. This way, JavaScript always knows which task it's doing right now.
    

So, to sum it up, JavaScript works by following the steps one after the other, storing information in different places, and keeping track of what it's doing with the help of the Call Stack.

# Conclusion

And there you have it, the fascinating world of how JavaScript works, all neatly wrapped up!

We took that common frustration of "Why isn't this working?" and turned it into an adventure of discovery. Remember those three special parts we talked about?

First, think of JavaScript as a patient chef following a recipe step by step – that's the Thread of Execution.

Next, imagine a storage spot where JavaScript keeps ingredients. Sometimes it's a big shared pantry (Global Memory), and other times it's a small cooking corner (Local Memory) just for a specific task.

Lastly, the Call Stack is like a to-do list on plates. When JavaScript starts a task, it adds a plate, and when the task's done, it takes the plate off.

With these three amigos – Execution Thread, Memory Storage, and the Call Stack – you're not just asking, "Why isn't this working?" Instead, you're on a journey of "Aha, now I get it!"

So as you venture into coding land, armed with this new knowledge, may your coding challenges turn into victories. Happy coding, and remember – you've got this!