Javascript Principles
Tags: JavaScript

The three core components of javascript are

Memory - To store the data as we go through the code as we go line by line. Also to store code, to execute later.

Thread of Execution - To go through the code line by line

Call Stack - To keep track of the function, where our thread of execution is.

Thread of Execution

When javascript code runs, it

Goes through the code line by line, and executes / runs each line of code. This is known as Thread of Execution (Executes the code as it goes through it)

(Executes the code as it goes through it) Saves data like strings and arrays so we can use that data later. It is saved in the device memory. We can even save a function. The whole code inside a function is taken, bundled it up and stored it in the devices memory as a string of characters.

Check this code,

const num = 5;

function addition(inputNumber) {

const result = inputNumber + 5;

return result;

}

const output = addition(num);

const newOutput = addition(10);

When we go through line by line of this code const num = 5

const num // It defines a constant called num

num = 5 //Assigns a value 5 to the num. Here num is called as an identifier. Identifier can be thought of as a label for anything that you store in the memory.

Now in the memory it is stored under identifier num: 5

Next,

function addition(inputNumber) {

const result = inputNumber + 5;

return result;

}

This code is not executed now, it is just saved in the memory under the identifier, addition

Next const output = addition(num)

Here, addition(num) is a function call. It is the call to a function. It is a command. The parenthesis tells that this is a command. Currently we don’t have any value for the constant output, so we can’t store it in the memory. We can store only values which are finalised. So in memory we are not storing any value for output. Even a small function is like a mini program.

Execution context

Created to run the code of a function, it has two parts

Thread of execution

Memory

In Javascript we have only 1 thread of execution. That means we do only one thing at a time

As soon as a javascript code starts execution, it creates a global execution context. Each and every function inside that code, creates separate execution contexts.

For this code, globally there will be an execution context with a thread of execution and memory.

const num = 5;

function addition(inputNumber) {

const result = inputNumber + 5;

return result;

}

const output = addition(num);

const newOutput = addition(10);

Inside the global execution context, when it finds another function like below, it will create another execution context with a thread of execution and memory. This memory will be local to that function. Things inside this function wont be stored inside the global memory.

function addition(inputNumber) {

const result = inputNumber + 5;

return result;

}

In the above function the first thing we handle is the parameter which is passed to the function. Here, function addition(inputNumber) inputNumber is a parameter. We are passing num to this function which is equal to 5. Here 5 is the argument of that function. So we store inputNumber: 5 to the memory.

The first line of code inside this function is declaring a constant and assigning a value, which will be 10 in this case. So the result: 10 is also stored in the memory.

return result; Javascript looks for the result in the local memory and finds that number and then returns it to the output stored inside the global memory. Here we come out of this execution context and then declare a new constant newOutput. Similar to the above function at this point of time, we don’t have anything to store inside the newOutput. Now we go into another execution context and execute addition(10), where 10 is the argument. And the same process continues.

Call Stack

Call stack is a traditional way of storing information in our computer like array and objects

When we finished running addition(num) we knew that our thread of execution is going to come back to global. Javascript keeps track of what function is currently running. When a function is run, it adds to the call stack. Once a function is finished running, javascript takes it out of the call stack. Whatever is at the top of the stack, thats the function we are currently running. When a function hits return, that function is taken out of the call stack. Always at the bottom of the call stack we have the global() execution context. As soon as we run javascript, global is added on the bottom of the call stack.

If we run one function inside another function, everything will be added to the top of call stack and while removing also, it will be removed from top one by one.