How JS code gets executed?

Welcome, Reader! Explore the world of JavaScript code execution in this blog. Learn about parsing, execution contexts, and more. Discover insights to enhance your coding skills and boost performance!

Let's begin

What is JavaScript?

JavaScript is a High level, interpreted programming language primarily known for its use in web development. It is a versatile language that allows developers to create interactive and dynamic content on the client side of web applications. As its popularity increases, it is also being used in Server side development and other fields such as testing and machine learning.

let's take a look at sample JS code

const message = "Hello World!";

function sayHello(message) {
    return console.log(message);
}

sayHello(message); // Outputs: "Hello World!"

Now, let's understand how this code works and how Javascript code gets executed behind the scenes.

Code Explanation:

1. In the First line, assign a String data type to the variable named message.

2. Next, creating a function named sayHello() and it accepts a parameter named message

3. Finally, the function sayHello() is invoked with the argument message, the Output is, it consoles the message argument.

---

JS code execution:

Now let's understand execution of the code & also how it displays an output on the screen. It involves several stages to convert Javascript language to machine level language.

1. Parsing and Lexical Analysis: During parsing, the JavaScript engine breaks down the code into tokens, identifying keywords, operators, and identifiers. Lexical analysis establishes the structure of the code, creating a series of tokens for further processing.

2. Abstract Syntax Tree (AST): The parser constructs an Abstract Syntax Tree (AST) based on the tokens. The AST represents the hierarchical structure of the code, providing a visual representation of how different elements relate to each other.

3. Execution Context Creation: An execution context is created before code execution. This context includes the Variable Object, Scope Chain, and the this keyword. The global context is formed first, and each function call generates a new context.

4. Variable Hoisting and Scoping: Variable and function declarations undergo hoisting during the creation phase of the execution context. Variables are hoisted, but their values are initialized with undefined, and functions are fully hoisted, allowing access throughout the function's scope

5. Execution Stack and Call Stack: The engine uses an execution stack (or call stack) to manage function calls. Each function invocation adds a new frame to the stack, and the stack is popped when the function completes, maintaining the sequence of execution.

6. Memory Management and Garbage Collection: The JavaScript engine manages memory using garbage collection. Unreferenced objects are identified and removed, freeing up memory for efficient resource utilization during the execution of the program.

7. Event Loop and Asynchronous Operations: JavaScript's event loop is responsible for managing asynchronous operations. It continuously checks the call stack and callback queue, ensuring that asynchronous tasks, such as callbacks from timers or promises, are processed in a non-blocking manner.

---

Summary:

In summary, JavaScript execution involves parsing and lexical analysis, creating execution contexts with hoisting and scoping, managing closures, maintaining the call stack, utilizing the event loop for asynchronous tasks, and employing memory management techniques like garbage collection. These processes collectively enable JavaScript to execute code efficiently, handle asynchronous operations, and manage memory effectively in programming environments.