🎁🎁 Thread of Execution Visually Explained 🎁🎁
Tags: javascript, code, beginners, 100daysofcode
Published: 2020-02-13 22:41:00

---
title: 🎁🎁 Thread of Execution Visually Explained 🎁🎁
published: true
description: Visualise what the thread of execution looks like
tags: javascript, js, code, beginners, #100daysofcode
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ijgcld082cob0fuf0rzc.png
---

This is the first in a series of articles on looking at how JavaScript works.  I will try to make it interesting and not bore you as I know this stuff can sometimes get really boring!

Imagine being a pilot and now knowing how a plane flys, every day we run our JavaScript code but do we know how it runs?

## Let's talk about the Thread of Execution
Ok, let's bang out some simple code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s4ayan2l76647exapspv.png)

The code above is nothing to get excited about but will serve us well to demonstrate the thread of execution.

When our JavaScript is executed, it steps through line by line (single-threaded), so in our code above the first line is:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ubxodmh74vemkwth6abr.png)

The next question is, what happens when it steps onto this line?  Where does `num` get stored?

`num` gets stored in the global memory/execution context, visually it looks like this:
![Gif showing animation](https://i.gyazo.com/89dafa3b04d56ff262bd3cf90fc3ba2f.gif)

So then we move onto the next line.
![Function line](https://dev-to-uploads.s3.amazonaws.com/i/nw7j6wyf96fk9z1mv32e.png)

It is important to note that we are declaring a function here and not executing one.  Therefore, we store the function name with the value of the entire function.
![Image from Gyazo](https://i.gyazo.com/ac32c4bc720c97c95bcc1ec926545a26.gif)

The `- f -`above is just shorthand for the entire function.

Now we move onto the next line, some of you may think the next line is the body of the function but since we are only declaring the function and not running it, the next line to run is:
![Next line to run](https://dev-to-uploads.s3.amazonaws.com/i/zrtspm31cvmujr9e22z2.png)

Similar to above, we send the label `output` to memory but with no value yet as we must run our function.
![Saving function label](https://i.gyazo.com/b8733aaac9e33b78d5ab0e9adce45033.gif)

Now comes the fun part! Actually executing our `addOne` function.

When a function is executed, it is added to the `call stack`.  The `call stack` always has `global`/`main` at the bottom, we now will push on `addOne(3)`.
![Call stack visualised](https://i.gyazo.com/27a387c2d4599d5b501fc9c8d93647cc.gif)


We also create an `execution context` for that function.  Any variable declared in the function will be added to the function's execution context.


The first variables that will be added are the function's arguments, in our case `x`.
![Image from Gyazo](https://i.gyazo.com/1585f3c1e4deeb192815fbae8e3c9857.gif)

Now we move onto the next line and store `result` in the `execution context`.
![Image from Gyazo](https://i.gyazo.com/184ba973b6fa462f52be44d40b6be7b9.gif)


On the next line, we hit the `return` keyword which marks the end of a function.  We pop `addOne()` from the `call stack` and give `output` a value which is `4`.

So first pop `addOne` from the `call stack`.
![Pop from call stack](https://i.gyazo.com/1ed1d369e1bee08040c2602323ecc6ef.gif)

Now our last step, assigning the value `4` to the `output` variable.
![Image from Gyazo](https://i.gyazo.com/d96ce811a6b9e52f80708e52d72f7bd5.gif)

## Donzo
So that is it!  I hope this demonstrates how our code is stepped through.  This was a time-consuming article due to creating all the gifs so let me know if you like them or not.  I know I only touched off the `call stack` and `execution context` in this article but we will be delving deeper into them in the future.


## Conclusion

Any questions on the above, feel free to contact me on my socials! :heavy_heart_exclamation:
 
| :guardsman: [Insta](https://www.instagram.com/paulryancodes/) | :eyes: [Twitter](https://twitter.com/PaulRyan7) | :speech_balloon: [Github](https://github.com/PaulRyan17) | :thought_balloon: [LinkedIn](https://www.linkedin.com/in/paulryan9/) | :collision: [Youtube](https://www.youtube.com/channel/UCf4AtM9ldMfBsO0_bbYWvfw?view_as=subscriber) |:mailbox_with_no_mail: [Website](https://www.paulryancodes.com/)
| -- |--| --| -- | -- | -- |