JavaScript is such a beautiful language, from its beautifully designed syntax to its numerous applications and a very large community. We use javascript every day, with most developers having very little understanding of how javascript is being executed.

This is going to be a series explaining some basic principles in Javascript

• Thread of Execution
• Callback Queue and Event loop
• Asynchronicity of JavaScript
• Closure
• More would be added

Usually, the best way to explain this internals of Javascript is with some visuals. I've searched for some and took most from this blog post, which also gives a good explanation of this topic.

🔧 Let's begin

const num = 3;

	function addOne(x) {
	const result = x + 1;
	return result;
	}

	const output = addOne(num);

The code above is a simple one that basically adds one to any number set as the value of the constant num.

It's important to know that JavaScript is Single-threaded, i.e. It runs synchronously, handling one task at a time. Going by this, the first line of code to be interpreted by Javascript is

const num = 3;

Here the label num is stored in Global Memory, and it's given a value 3.

Moving to the next line, A function declaration, Here the function is declared and also stored in the global memory with the label addOneand the value is the entire function. It's imperative to know the difference between declaring a function and executing a function. The most obvious difference is the ()after the function name or in the case of Immediately invoked Function Expressions(IIFE), the parenthesis is after the function declaration.

The next line of execution

const output = addOne(num);

and not the internals of the function declaration. As we previously said, the entire function is stored as the value of the label addOne in the Global memory.

The process of execution of this line is the same as the others with just a minor difference. The label output is stored in the global memory and is given the value gotten from the execution of the function addOne.

Things might feel different now, but it would be clear at the end.

To execute a function in Javascript since it's synchronous, the function is added to a Call Stack. As the name implies, Functions are being called and since its a Stack, it follows a Last-In-First-Out(LIFO) principle. It's crucial to note that there's always a global function at the bottom of the stack. To learn more about the Call Stack here is an Article

A brand New Execution context or Local memory is created, and like the Global Memory any variable or constant declared is stored in this local execution context.

The addOne function takes one argument with label x and value 3 which was declared in the Global memory. This is now stored in the Local Execution context of the currently running function addOne

😎 Simplicity

As we've been doing, the next piece of code to be executed would be storing the label, result, in the local memory, and handing it a value of 3 + 1 which is 4.

Moving to the next line, we hit a unique keyword returnwhich denotes the end of a function and gives us the ability to keep some values gotten from the memory of the current local execution context.

The returned value from the execution context is now assigned to the label outputin the Global memory.

Also, it's important to note that once the value is returned from the addOne function, it's popped out of the Call Stack, the local memory created for it is also erased including the variables we created in it, except in some cases where we can keep some of the variables, Closure! This concept would be discussed later in this series.

This simple example, explains the Thread of Execution as well a bit of Execution Context.

✅ Conclusion

• JavaScript is Synchronous
• It has only one Call Stack
• For every function execution, a brand new execution context is created, and the function is also added to the call stack
• Once the function is done, it gets popped from the call stack and local execution context is erased.

For now though I feel like this needs to be something that should be discussed more in the community & looked into further as it could very much make Javascript even more powerful than it already is.