JavaScript : The Foundation of Modern Web Development (Part 1)

Overview

JavaScript is a lightweight scripting language used to develop websites, mobile applications, desktop applications, games, and more. It is one of the most widely used programming languages globally and is integral to various libraries and modules. JavaScript’s simplicity makes it easier to learn compared to many other programming languages, contributing to its widespread adoption and versatility in the development community.

JavaScript is a flexible programming language that can be used in different ways(multi-paradigm: used as Object oriented or Functional or Imperative). It supports styles like object-oriented, procedural, and functional programming. Instead of using classes, it uses prototypes and runs one task at a time(single-threaded).

JavaScript using AI

History of JavaScript

Brendan Eich created JavaScript in just about ten days in May 1995. Initially called Mocha, then Live Script, it finally became known as JavaScript. It was designed to be used on the client side of websites, adding dynamic and interactive elements to otherwise static HTML pages. Now with more than 95% of applications uses JavaScript making it one of the most loved programming languages in the world.

How JavaScript works under the hood ?

Understanding how JavaScript works internally is essential. It helps you write efficient, robust, and reusable code with the highest performance. You’ll gain a clear idea of how JavaScript works, providing valuable context on language optimization.

JavaScript Engine

A JavaScript engine is a program that reads the code and executes it. JavaScript engine is required to run any JavaScript code. All browsers have their own engines to run the JavaScript code. For example chrome has V8 JavaScript engine, Firefox has SpiderMonkey and Edge has Chakra.

Main components of JavaScript Engine :

1. Parser

2. Interpreter

3. Compiler (JIT : Just In Time)

4. Garbage Collector

How JavaScript code gets executed ?

<— — -JavaScript code execution flow — — →

First code is loaded by loader, then it is passed to Parser. Parser reads the code and convert it to Abstract Syntax Tree (AST). AST is basically a Tree data structure which used for optimization. Interpreter converts the AST into bytecode (Machine code) and begins the execution. Just In Time (JIT) compiler identifies the frequently used code and optimize it(Removes dead code, inlining etc. techniques are used for optimization). Then in final step it get executed.

Call Stack and Heap

Illustration of Heap and Call stack

Call stack and Heap are essential components of JavaScript Engine. JavaScript Engine uses this for memory allocation while executing the code. Both are part of JavaScript Engine. Heap stores data in unstructured way. Heap used for storing objects, functions, global variables. Call stack mainly used for managing the control flow of application’s functions. Call stack stores the local variables and deletes it once function gets executed.

The JavaScript Runtime

A JavaScript runtime is the environment in which JavaScript code is executed(It provides necessary functions to run the code). It’s not a single program, but rather a collection of components that work together to bring your JavaScript code to life. Here’s a breakdown of the key elements:

The JavaScript Runtime(JS Engine, DOM, Fetch API and Call back queue)

1. JavaScript Engine:

• This is the core component responsible for interpreting and executing JavaScript code. It parses the code, converts it into machine code the computer understands, and then carries out the instructions.
• Common JavaScript engines include V8 (used by Chrome, Node.js), SpiderMonkey (used by Firefox), and ChakraCore (used by Microsoft Edge).

2. Web APIs (in Browsers):

• These are functions and objects provided by the browser that allow JavaScript code to interact with the browser environment. Examples include:
• DOM (Document Object Model) manipulation for accessing and modifying HTML elements.
• Fetch API for making asynchronous HTTP requests.
• WebSockets for real-time communication between browser and server.
• The specific set of Web APIs available might vary slightly between different browsers.

3. Additional Components (Depending on the Runtime):

• Browser Runtime: In web browsers, the runtime environment includes the garbage collector (manages memory allocation and deallocation), event loop (handles asynchronous operations), and security features like the Same-Origin Policy (SOP).
• Node.js Runtime: For server-side JavaScript execution with Node.js, the runtime includes a module system for loading code from external files, file system access capabilities, and event loop tailored for non-browser environments.

In essence, the JavaScript runtime provides the essential tools and resources for your JavaScript code to function. It takes your code, interprets it, connects it with the necessary functionalities (like Web APIs), and ensures it runs smoothly.

Here’s an analogy: Imagine a kitchen as the runtime environment. The recipes (JavaScript code) are interpreted by the chef (JavaScript engine). The chef uses various tools (Web APIs) like ovens, mixers, and ingredients (resources) to prepare the dishes (executed code). The kitchen also has safety measures and a cleaning schedule (garbage collector) to maintain a smooth workflow.

That’s a wrap! I hope this gives you a clear understanding of how JavaScript works internally. This was just a basic overview; there are many more details involved in executing JavaScript. Stay tuned for the upcoming parts where I will cover these additional aspects in greater depth.

Thanks for reading…

Also read: What is call stack in computer science.