How Javascript Code Executed

JavaScript has become a staple for web development, powering the interactive features we see on modern websites. But have you ever wondered how JavaScript code actually gets executed? In this blog post, we will explore the intricacies of code execution, from lexical analysis to variable initialization, and understand why having a solid understanding of this process is crucial for developers.

Execution Process

The execution process of JavaScript code can be divided into several key stages. Let's take a step-by-step look at how the code is interpreted and executed.

For javascript execution some essential components are required :

javascript Engine : This is the most important component which helps javascript with its runtime environment. it interprets the js code and executes the code. The most common example of these engines are chrome's and nodejs's V8 engine. However they can be different nowadays depending upon your browser.

Host Environment : js typically interacts with HTML using Document Object Model. This facility is provided by web browers (e.g chrome, firefox, safari) or server environment such as Node.js.

HTML or DOM : these are the most important components which helps js to manupulate the html document. This helps html to change the content, structure and style the web page dynamically.

lets look into execution inside the js engine :

Just as the every language, javascript execution goes through certain steps :

1. Parsing : parsing is done using script tag used on browser's html parser.

2. lexical analysis : it is then converted into tokens, keywords and identifiers, operators and literals.

3. syntax analysis : checks the syntax of the code.

4. context creation : creates the space for objects, variables and references to outer environments

5. hoisting : functional and variable hoisting is done.

6. execution : engine starts executing the code line by line following the syntax tree. this is where execution context decides where the code will be run asynchronously or not.

but the ability of async programming and event handling is what makes js different :

Asynchronous nature: js run on single thread and to handle the time taking operations, I/O operations, some methods are explicitly been created to support asynchronous behaviour. These async behaviour is always supported by a callback which helps to tell the completion of these async operations. These async operations imporves systems ablility to handle more load and makes it more scalable.

How this happens exactly, whenever engine notices that the function is asynchronous or using methods which are async. it puts the code on different queue which is then executed within event loop. Engine always try to keep main thread working with non-blocking code. Soon as the event loops is done with the execution, its callback is then called to notify the main thread about the execution.

Event Handling: event handling in JavaScript empowers developers to create dynamic, interactive, and user-friendly applications that respond to user input and external events in real-time, ultimately enhancing the overall quality and usability of web-based experiences.