Introduction
This is the first blog in my new JavaScript series. In this blog, we are going to learn about how code executes in JavaScript. JavaScript is a lightweight scripting language used to provide interactivity in web applications. But it can also be used as a programming language in non-browser environments such as Node.js, etc.
Code Compilation
JavaScript is an interpreted or just-in-time (JIT) compiled language with first-class functions. The JavaScript Engine converts the code to Abstract Syntax Tree (AST) and generates scopes and these are used to generate bytecodes which are the collection of instructions. The interpreter will execute each line of code from top to bottom and generates the result.
Thread of Execution
JavaScript is a Single-threaded language which means it goes through code line-by-line and executes each line known as the thread of execution. It saves data like strings and arrays in memory so we can use it later.
Let's take an example,
const num = 3;
const double = num * 2;
console.log(double);
In this example, we are multiplying a number by 2 and printing in the console. Let's see how this executes.
Line 1: We are defining a constant called num, and assigning it a value of 3.
Line 2: We are defining another constant called double, and assigning it the value of num multiplied by 2.
Line 3: We are outputting the value of double in the web console.
Functions
A function is a piece of code, that we can use over and over again instead of writing the same code in multiple places. Let's take another example,
const num = 3;
function multiplyBy2(input){
const result = input * 2;
return result;
}
const output = multiplyBy2(num);
console.log(output);
When we define a function there are 2 parts:
Label of a function called an identifier.
Actual code is bundled up and assigned to the identifier in the memory.
Now in the above example,
Line 1: We are declaring a constant called num and assigning 3 as a value.
Line 2: We are defining a function called multiplyBy2 and the code of the function is bundled up and stored in the memory.
Now we will move to:
Line 7: We are declaring a constant called output and assigning the value returned by the function call.
Line 8: We are outputting the value of output in the web console.
When we invoke the mulitplyBy2 function, a new execution context is created.
Execution context is the environment in which the JavaScript code is being executed.
A new parameter named input is declared and assigned the value of the argument passed at the time of invocation of the function.
Now in line 1, we defined a constant named result and assigned a value of input multiplied by 2.
In the next line, we can see a return statement. It means exiting the execution context and returning the value to the global function and popping the multiplyBy2 function from the call stack.
Once we come out of the execution context, we cannot go back or access any data present in its local memory.
Now, the returned value gets assigned to the constant output and we can see it in the web console.
Call Stack
JavaScript keeps track of what function is currently being run and what functions are called from within that function using the call stack. The stack follows the LIFO principle, so the function present at the top gets executed first.
When the execution of JavaScript begins, the engine initially creates a global execution context and adds it to the call stack.
Because JavaScript is single-threaded, it has only one call stack and we can execute one line of code at a time.
Conclusion
In this blog, we discussed compilation and code execution in JavaScript.
Additionally, we also talked about the execution of functional code and the working of the call stack.
And if you're having any doubts please mention them in the comments below! 😎