How JavaScript works and code is executed behind the scene ?
Last Updated :
21 Sep, 2021
JavaScript is an interesting language in the world and its working procedure quite be different from other languages. JavaScript is synchronous(specific order of execution), single-threaded language(it means JavaScript can only execute one command at a time).
Everything in JavaScript happens insides an EXECUTION CONTEXT, which you can assume to be a big box or a container in which whole JavaScript code is executed. The EXECUTION CONTEXT contains two parts one is Memory(Variable Environment), where all the variables and functions store key: value pair and the other is Code Component(Thread of Execution), where code is executed one line at a time(pictorial representation shown in below).
PICTORIAL REPRESENTATION OF EXECUTION CONTEXT
Now, What happens when you run JavaScript Code?
The simple answer is: A Execution Context Created.
Now I write a demo code below and I will say line by line, how the code run.
Javascript
<script>
var n = 3;
function squr(num) {
var ans = num * num;
return ans;
}
var three = squr(n);
</script>
|
When you run this whole code a global EXECUTION CONTEXT is created and it contains two parts one is memory and the other is code execution.
When the first line is encountered it will reserve memory for all variables(n, three, five) and function(square). When reserving the memory for variables it reserves a special value undefined and for function, it stores whole code. the pictorial representation is shown below.
PICTORIAL REPRESENTATION OF GLOBAL EXECUTION CONTEXT
After allocating memory for all variables and function, code execution phase starts(code runs line by line).
Line 1: var n=3, 3 value placed into the n identifier.
Line 2-5: nothing to execute.
line:6: we invoke a function, now function is the heart of JavaScript. The function is a mini-program and whenever a new function is invoked all together a new EXECUTION CONTEXT is created(inside the code execution phase). it also contains two-part memory and code execution phase. Memory is allocated for variable and function(it involves function parameters and other variables).
PICTORIAL REPRESENTATION OF FUNCTION EXECUTION CONTEXT
After allocating memory, the code execution phase comes here the code inside the function executes, and undefined is replaced by the actual value.
PICTORIAL REPRESENTATION OF EXECUTION CONTEXT WHILE FUNCTION EXECUTE
After that when return is encountered return the control of the program to the place where the function is invoked, control goes to line 6, it’s find the answer in local memory and return the control three and value of three(undefined) replaced by the value of ans and after that whole thing deleted(execution context).
PICTORIAL REPRESENTATION OF GLOBAL EXECUTION CONTEXT AFTER CODE EXECUTED
After that Global Execution Context is Deleted and our program ends. And One more thing, JavaScript Handle everything deleted and created (to manage the execution context) it’s managing a stack. It,s name CALL STACK. It’s a Stack that maintains the order of execution.
Similar Reads
How to Execute JavaScript Code ?
Javascript is a high-level, Just In Time compiled programming language which converts the entire machine code at once and then executes it immediately. Javascript code is executed by the Javascript Engine, which is separate software. Different browsers have their own implementation of JS Engine embe
2 min read
How JSX works behind the scene ?
Learning HTML is easier than React which consists of States, Components, Events, etc. So, to make easy coding react introduced JSX. It is a JavaScript extension where we can embed valid JavaScript objects into HTML elements. JSX makes Code easier to read and understand. Usually, HTML and JavaScript
2 min read
How React JSX gets Transformed into JavaScript behind the Scenes
React has revolutionized UI development by introducing JSX, a syntax that blends JavaScript with HTML-like elements. While JSX simplifies the process of building components, understanding its inner workings is key to creating scalable and performant applications. This article explores how inline Jav
9 min read
How does asynchronous code work in JavaScript ?
Asynchronous code in JavaScript allows to execute code in the background without blocking the main thread. Asynchronous JavaScript is mainly used for handling tasks like network requests, file operations, and API calls. To understand how asynchronous code works, it's important to first know the conc
4 min read
How asynchronous JavaScript code gets executed in browser ?
Functions or operations that are running in parallel with the other functions or operations are called the asynchronous functions or operations in JavaScript. Asynchronous functions use Callback Functions that get executed later. Let us see an example that demonstrates this: C/C++ Code setTimeout(fu
3 min read
How does the JSON.parse() method works in JavaScript ?
The JSON.parse() method in JavaScript is used to convert a JSON string into a JavaScript object. This method is essential for working with JSON data, especially when fetching or processing data from APIs or external sources. Converts a JSON-formatted string into a JavaScript object.Maintains the str
2 min read
How closure works in JavaScript ?
In this article, we will discuss about the closures working JavaScript. Let us first understand what exactly closures are and basic details which are associated with closures in JavaScript. A Closure is a combination of a function enclosed with references to its surrounding state (the lexical enviro
2 min read
Difference between Methods and Functions in JavaScript
Grasping the difference between methods and functions in JavaScript is essential for developers at all levels. While both are fundamental to writing effective code, they serve different purposes and are used in various contexts. This article breaks down the key distinctions between methods and funct
3 min read
How getElementByID works in JavaScript ?
The document method getElementById() returns an element object representing the element whose id property matches with the given value. This method is used to manipulate an element on our document & is widely used in web designing to change the value of any particular element or get a particular
2 min read
What's the difference between JavaScript and JScript?
JavaScript: JavaScript is a programming language which is commonly used in wed development. Its code is only run in web browser. JavaScript is one of the core technologies of world wide web along with HTML and CSS. JavaScript was designed by Brendan Eich and it was first appeared in 4 December 1995.
2 min read