how js code gets executed

how javascript is different than others

JavaScript's execution differs from other languages due to its support for asynchronous execution of code, event-driven architecture, dynamic typing, function scope, and closures. These features enable flexible and powerful development, particularly in web environments, by allowing non-blocking I/O, responding to user events, and facilitating modular code. These things make web dev a lot more simpler and understandable.

lets look into javascript execution

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.