DEV Community: Rahul Vijayvergiya

Load Balancer vs API Gateway (can one replace other)

Rahul Vijayvergiya — Wed, 17 Dec 2025 09:45:02 +0000

This post was initially published on my blog. Check out the original source using the link below:

rahulvijayvergiya.hashnode.dev

In modern architectures, Load Balancers and API Gateways are both critical components, but they solve different problems.

Because they sometimes appear in the same request path, they are often confused or even treated as interchangeable.

Load Balancer and OSI Layers

Load Balancer Type	OSI Layer	What It Understands
L4 Load Balancer	Layer 4 (Transport)	TCP/UDP, IP, Port
L7 Load Balancer	Layer 7 (Application)	HTTP/HTTPS, headers, paths

Key point:

A Load Balancer primarily focuses on traffic distribution, not API logic.

API Gateway and OSI Layers

Component	OSI Layer
API Gateway	Layer 7 (Application)

An API Gateway deeply understands HTTP semantics, such as:

Headers
JSON payloads
Authorization tokens
Request paths
API versions

4. Key Differences at a Glance

Aspect	Load Balancer	API Gateway
Primary Purpose	Distribute traffic	Manage APIs
OSI Layer	L4 or L7	L7 only
Authentication	❌ (Very limited)	✅ Built-in
Rate Limiting	❌	✅
API Versioning	❌	✅
Request Transformation	❌	✅
Protocol Awareness	TCP/HTTP	HTTP/REST/GraphQL
Backend Awareness	Servers	Microservices & APIs

Because both can work at Layer 7 (Application Layer), a common question comes up:

“If both understand HTTP, why can’t one replace the other?”

What Is a Load Balancer?

A Load Balancer is like a traffic police officer 🚦.

Its main job:

👉 Decide which server should handle the request

Layer 4 = Transport Layer

It deals with:

IP address
Port number
TCP / UDP
Connections

At this layer, the load balancer does NOT understand HTTP, URLs, or headers.

Layer 7 = Application Layer

Even when working at Layer 7, a load balancer mainly does:

Distributes traffic across servers
Path-based routing (/api → server A)
Sticky sessions (same user → same server)
Health checks
SSL termination

NOTE: Sticky sessions only mean:

“Send this user to the same server again”

It does not mean: Checking identity, Validating tokens, Enforcing permissions

What Is an API Gateway?

An API Gateway is like a security guard at the building entrance 🛂.

Its main job:

👉 Control access to APIs

It handles: Authentication (JWT, OAuth, API keys), Authorization (what user can do), Rate limiting & throttling, API versioning (v1, v2), Request / response transformation, Logging and monitoring

API Gateway cares about:

Who is calling, how often, and what they are allowed to access

Why Load Balancer Cannot Handle Authentication

Even though a load balancer can read headers, authentication is more than reading headers.

Authentication involves: Token validation, Expiry checks, Role & permission checks, Sometimes DB or IAM calls

Load balancers are designed to be:

Fast, lightweight, and simple

If they start doing heavy security logic then Performance will drop, Scaling becomes harder

That’s why authentication belongs to API Gateway, not Load Balancer.

Can One Replace the Other?

Can API Gateway replace Load Balancer?

Sometimes, in small or serverless setups

Can Load Balancer replace API Gateway?

No, because it does not manage API security, limits, or versions

Final Summary

Load Balancer answers: “Where should this request go?”
API Gateway answers: “Who is calling and what can they do?”

Sundar, Satya and Sam's AI Dream: Take everyones job

Rahul Vijayvergiya — Wed, 11 Jun 2025 21:33:54 +0000

This post was initially published on my blog

Why AI Doesn’t Take Your Job — and Why That Worries Them More Than You

Sundar, Satya, and Sam promise a future where AI transforms everything — from your job to your brain. They stand on stages, preach about the AI revolution, and declare this is the moment we all wait for. But behind the billion-dollar valuations and press releases, they struggle to keep the illusion alive.

They promise AI will replace workers. But it doesn’t. It struggles to write a coherent paragraph, hallucinates facts, and needs more human babysitting than a toddler with a Sharpie.

Let’s be honest — AI doesn’t take your job. It wants your time, your data, and your belief. But it can’t truly replace you. Not because it lacks processing power — but because it lacks soul. And that’s something not even the best models can mimic.

🤖 The Great Job Panic: Manufactured, Marketed, and Failing

Sundar, Satya, and Sam help fuel a global panic — that AI comes for your job. But most AI tools today can’t even summarise a PDF correctly, let alone run your business. It generates code that breaks, writes text with no voice, and fails at nuance.

The real danger isn’t AI itself — it’s executives who believe the pitch decks and fire human talent to gamble on incomplete tech that often requires more supervision, not less.

😬 The Tech Gods Now Serve Investors, Not Innovation

These so-called pioneers — Sundar with “AI-first” Google, Satya with Copilot baked into every Microsoft app, and Sam with his AGI daydreams — now serve one god only: ROI. Not humanity. Not innovation. Not even good UX.

They chase profit over purpose. They pivot features weekly to satisfy boardrooms. And while they claim AI is the solution to everything, they still need armies of humans to fact-check, correct, and rephrase AI outputs.

So who’s doing the job again?

🪦 AI: The Emergency Exit for Failing Startups

Open LinkedIn. Everyone sells “AI-powered” tools. Doesn’t matter if it’s a slideshow maker, resume scanner, or glorified chatbot — they all claim to use AI.

Why? Because AI sells the dream even when the product doesn’t work.

Most tools run on wrappers around ChatGPT, slapped together with prompt engineering and desperation. If you’re a real company with real users, you still hire designers, engineers, writers — because tools like these can’t understand users, solve edge cases, or think critically.

AI is not Step 1. It’s Plan Z.

💡 What Actually Remains?

A few cool demos
A trillion-dollar hype cycle
Founders who pitch more than ship
And three tech giants who hope their own tech doesn’t implode during a live demo

Meanwhile, real people keep working, keep building, and keep creating value AI still can’t replicate — because creativity and understanding don’t come from token prediction.

🚫 The Bottom Line

AI doesn’t end jobs — it forces us to question how we define work, value, and trust. And the loudest believers — Sundar, Satya, and Sam — now look less like prophets and more like salesmen who oversold a half-baked dream.

They fear what happens when the world wakes up and says: “Wait, this is it?”

So don’t panic. Don’t submit. AI can assist — but it can’t replace you.

Not today. Not tomorrow. Maybe not ever.

And deep down, even Sundar, Satya, and Sam know it.

Multithreading, Concurrency: A Deep Dive with JavaScript

Rahul Vijayvergiya — Tue, 04 Mar 2025 12:06:07 +0000

This post was initially published on my blog. Check out the original source using the link below:

Multithreading, Concurrency: A Deep Dive with JavaScript

This article discusses how javascript handle Multithreading and Concurrency

rahulvijayvergiya.hashnode.dev

Ever wondered how your computer handles multiple tasks at once? Whether it's running multiple apps, loading web pages, or processing data, it all comes down to multithreading and concurrency.

But what exactly do these terms mean, and how do they work? Let’s break it down in a way that’s easy to understand, with a special focus on how JavaScript—despite being single-threaded—handles concurrency like a pro.

What is Multithreading?

Multithreading allows a CPU or program to execute multiple threads simultaneously. A thread is the smallest unit of execution within a process, and multithreading helps in parallelising tasks, leading to better performance and resource efficiency.

Key Concepts in Multithreading

Thread – A lightweight unit of execution within a process.
Process – A running program with its own memory space.
Thread Scheduling – The operating system decides which thread runs when.
Context Switching – Storing the state of one thread while switching to another.

Why Use Multithreading?

🚀 Performance Boost – Multiple tasks run in parallel.
🏗️ Efficient Resource Use – Threads share memory, reducing overhead.
🖥️ Responsive Applications – Keeps UI applications smooth and lag-free.
🔬 Parallel Computing – Great for CPU-heavy tasks like AI, simulations, and gaming.

Challenges of Multithreading

Race Conditions – Multiple threads accessing shared data can cause unpredictable behavior.
Deadlocks – Threads waiting indefinitely for each other to release resources.
Synchronisation Overhead – Managing shared resources requires extra work (locks, semaphores, mutexes, etc.).

What is Concurrency?

Concurrency is about managing multiple tasks at the same time, but not necessarily executing them in parallel. A system that supports concurrency can switch between tasks efficiently, even if it has only one thread.

Key Concepts in Concurrency

Asynchronous Execution – Tasks run without blocking each other.
Event Loop – A single-threaded mechanism to handle multiple operations efficiently.
Non-Blocking I/O – Prevents slow I/O operations from blocking execution.
Task Scheduling – Determines the execution order of different tasks.

Why Concurrency Matters?

🔄 Faster Execution – Keeps applications running smoothly by handling multiple tasks efficiently.
🌍 Better Scalability – Essential for handling many client requests in web applications.
⚡ Non-Blocking Performance – Ideal for real-time apps like chat, gaming, and video streaming.

Challenges of Concurrency

Synchronisation Issues – Ensuring correct execution order can be tricky.
Data Races – Tasks modifying shared data at the same time can lead to conflicts.
Debugging Complexity – Bugs related to concurrency are often hard to trace.

Multithreading and Concurrency in JavaScript

JavaScript is single-threaded by design, meaning it executes one task at a time. However, it achieves concurrency using an event-driven, non-blocking architecture powered by the event loop.

How JavaScript Manages Concurrency

Event Loop – Manages async operations efficiently.
Callbacks & Promises – Allow non-blocking execution.
Async/Await – A cleaner syntax for handling asynchronous code.
Web Workers – Enable multithreading in JavaScript.

Example: Concurrency in JavaScript

console.log("Start");

setTimeout(() => {
  console.log("Async Task Completed");
}, 2000);

console.log("End");

Output:

Start
End
Async Task Completed (after 2 seconds)

Even though setTimeout is scheduled first, JavaScript doesn’t wait for it to complete—it moves on to the next task. The event loop ensures smooth execution without blocking.

Using Web Workers for Multithreading in JavaScript

// main.js
const worker = new Worker("worker.js");
worker.onmessage = function(event) {
  console.log("Message from Worker:", event.data);
};
worker.postMessage("Hello Worker");

// worker.js
onmessage = function(event) {
  postMessage("Worker received: " + event.data);
};

Web Workers let JavaScript run scripts in background threads, preventing the main thread from getting blocked by heavy computations.

Conclusion

While JavaScript doesn’t support traditional multithreading, it leverages event-driven concurrency to handle multiple tasks efficiently. If you need actual parallel execution, Web Workers can help!

Understanding LibUV and Its Thread Pool

Rahul Vijayvergiya — Tue, 11 Feb 2025 18:27:12 +0000

This post was initially published on my blog. Check out the original source using the link below:

Understanding LibUV and Its Thread Pool

In this post, we'll explore what LibUV does and dive into one of its essential features: the thread pool.

rahulvijayvergiya.hashnode.dev

Even if you've never heard of LibUV, , If you've worked with Node.js, you've already benefited from it. LibUV is the engine that powers Node.js' asynchronous operations, making it possible to handle non-blocking I/O efficiently.

In this post, we'll explore what LibUV does and dive into one of its essential features: the thread pool.

What is LibUV?

LibUV is a C library that handles asynchronous I/O operations. While it was originally created for Node.js, it is now used by other projects as well. Its main responsibilities include:

Event Loop: The heart of Node.js, managing asynchronous operations.
Asynchronous I/O: Handling file system operations, DNS, networking, and more.
Thread Pool: Running CPU-bound or blocking tasks on separate threads.

Since JavaScript is single-threaded, LibUV helps Node.js perform non-blocking tasks without freezing the main thread.

The Role of the Thread Pool in LibUV

While many Node.js operations are truly asynchronous (like networking), some are inherently blocking—such as file system operations, cryptographic functions, and DNS lookups. These cannot be performed on the main thread without slowing down the entire application. This is where LibUV’s thread pool comes into play. It provides a pool of worker threads to handle expensive operations without blocking the event loop.

Let's imagine you have a task that takes a while to complete, like reading a large file from your hard drive. If your application waited for that file to be read completely before doing anything else, it would freeze and become unresponsive. This is where the thread pool comes in. LibUV can offload these time-consuming tasks to a separate pool of threads.

How It Works

When a blocking operation (e.g., reading a file) is triggered, LibUV offloads it to the thread pool.
A worker thread picks up the task and executes it.
Once completed, the result is passed back to the event loop, which then invokes the corresponding callback in JavaScript.

Example: File Reading with Thread Pool

Here’s a simple Node.js example that uses the thread pool:

const fs = require('fs');

console.log('Start reading file...');
fs.readFile('example.txt', 'utf-8', (err, data) => {
    if (err) {
        console.error('Error reading file', err);
        return;
    }
    console.log('File contents:', data);
});
console.log('Reading file initiated, non-blocking!');

Even though fs.readFile is a blocking operation under the hood, it gets offloaded to the thread pool, keeping the event loop free.

Key Points About the Thread Pool

The default size of the thread pool is 4 threads (can be modified via UV_THREADPOOL_SIZE environment variable).
Not all async operations use the thread pool. For example, network requests are handled by the operating system and do not require threads.
The thread pool is essential for performance, especially for CPU-intensive tasks.

When to Be Cautious

While the thread pool is powerful, there are a few things to watch out for:

Large Thread Pool: Increasing thread pool size can help, but too many threads can lead to excessive CPU usage and context switching.
CPU-Intensive Workloads: If a task is purely CPU-bound (e.g., heavy computations), consider using worker threads instead of the LibUV thread pool.

Conclusion

LibUV plays a crucial role in making Node.js efficient, and its thread pool is a key feature for handling blocking operations in an asynchronous way.

Under the Hood of Node.js: Exploring the V8 JavaScript Engine

Rahul Vijayvergiya — Tue, 11 Feb 2025 18:11:03 +0000

This post was initially published on my blog. Check out the original source using the link below:

Exploring the V8 JavaScript Engine

what exactly is V8, and how does it make Node.js so efficient? In this article we will explores the inner workings of V8.

rahulvijayvergiya.hashnode.dev

V8 engine is at the heart of executing JavaScript. It’s is an open-source, high-performance JavaScript and WebAssembly engine written in C++. It is used in Google Chrome and Node.js, enabling fast JavaScript execution both in the browser and on the server side.

But what exactly is V8, and how does it make Node.js so efficient? In this article we will explores the inner workings of V8.

What is V8?

v8’s primary function is to take JavaScript code and execute it. However, V8 doesn't just interpret the code line by line, It includes features like Just-In-Time (JIT) compilation, garbage collection, and optimisation techniques to improve performance.

From JavaScript to Machine Code

Traditionally, JavaScript was interpreted, meaning each line of code was executed one at a time. This process can be slow. V8, on the other hand, uses a Just-In-Time (JIT) compiler.

The V8 Execution Process

Here's a simplified breakdown of the process:

Parsing: V8 first parses the JavaScript code, creating an Abstract Syntax Tree (AST). This tree represents the structure of the code.

Interpreter: V8's interpreter, takes the AST and converts it into bytecode. Bytecode is an intermediate representation that is easier to execute than raw JavaScript but not as fast as machine code.

Compilation (Crankshaft): Initially, V8 uses a baseline compiler (called Crankshaft in older versions, but now Turbofan is the primary optimising compiler). This compiler quickly generates machine code.

Optimization : V8 monitors the running code. If it identifies frequently executed "hot paths" (parts of the code that are run often), it uses a more sophisticated optimising compiler (Turbofan) to generate highly optimised machine code. This optimisation happens in the background while the code is running.

Deoptimisation: Sometimes, V8 makes assumptions during optimisation. If these assumptions turn out to be incorrect (e.g., a variable's type changes), V8 can deoptimise the code and revert to the baseline compiler. This ensures correctness.

V8 and Node.js Performance:

V8's efficiency directly translates to Node.js's performance. The JIT compilation and other optimisations allow Node.js applications to run quickly and handle a large number of concurrent requests. This makes Node.js suitable for building high-performance web servers and other applications.

Summary

By using JIT compilation, garbage collection, and optimisations like inline caching, V8 ensures JavaScript runs at high speed both in browsers and in Node.js.

SAML vs. OAuth vs. OpenID Connect

Rahul Vijayvergiya — Wed, 16 Oct 2024 06:47:22 +0000

This post was initially published on my blog. Check out the original source using the link below:

SAML vs. OAuth vs. OpenID Connect

This article will explore SAML, OAuth and OpenID Connect, their use cases, and how they interact with one another

rahulvijayvergiya.hashnode.dev

Authentication and Authorisation are crucial for ensuring the security of applications and data. Three widely-used protocols for managing these processes are OAuth, SAML, and OpenID.

When you use apps like Facebook, Google, or LinkedIn to log into other websites, you’re encountering some important protocols: OAuth, SAML, and OpenID Connect. These protocols help keep your information secure while allowing you to access different services.

1. SAML (Security Assertion Markup Language)

SAML is an open standard for exchanging authentication and authorization data between parties, particularly between an identity provider (IdP) and a service provider (SP). It is primarily used for single sign-on (SSO) scenarios, enabling users to authenticate once and gain access to multiple applications.

How SAML Works

Roles/Actors:

User: The individual accessing the applications.
Identity Provider (IdP): The service that authenticates the user and provides the identity assertions.
Service Provider (SP): The application or service the user is trying to access.

Request Flow Diagram:

Key Features of SAML

Single Sign-On (SSO): Users authenticate once for multiple services.
XML-Based: Uses XML for messages, making it robust.
Secure Assertions: Transmits user identity and attributes securely.

2. OAuth (Open Authorisation)

OAuth is an open standard for access delegation commonly used for token-based authentication and authorisation. It allows third-party applications to access user data without exposing their credentials. OAuth is primarily used for authorisation, enabling users to grant limited access to their resources hosted on one site to another site.

How OAuth Works

Roles/Actors:

Resource Owner: The user who owns the data and grants access to it.
Resource Server: The server hosting the user's data (e.g., Google, Facebook).
Client: The third-party application requesting access to the user's data.
Authorization Server: The server responsible for issuing access tokens to the client after authenticating the resource owner.

Request Flow Diagram:

Key Features of OAuth

Delegated Access: Users can grant access without sharing credentials.
Access Tokens: Short-lived tokens that limit access duration.
Scopes: Define the extent of access granted to the client.

3. OpenID Connect

OpenID Connect is an authentication layer built on top of OAuth 2.0. It adds identity verification and provides a way for clients to verify the identity of the user based on the authentication performed by an Authorisation Server.

How OpenID Connect Works

Roles/Actors:

End User: The user who wants to authenticate.
Client: The application requesting user authentication.
Authorisation Server: The server that authenticates the user and issues tokens.

Request Flow Diagram:

Key Features of OpenID Connect

ID Tokens: JWTs that provide user information and claims.
Seamless Integration with OAuth: Combines authentication and authorisation.
User Info Endpoint: Allows fetching additional user information.

OpenID Connect and OAuth

Seems similar but they both serve different but complementary purposes:

OAuth: Used for authorisation. It allows apps to access resources (like your profile or photos) from another service (e.g., Facebook or Google) without needing your password. Use OAuth when you want to grant limited access to your data (e.g., a third-party app accessing your calendar).
OpenID Connect (OIDC): Built on top of OAuth, it's used for authentication. It verifies your identity and allows apps to know who you are. Use OpenID Connect when you need to log in to a website or app using a service like Google, proving who you are.

When to Use:

Use OAuth:
- When you want an app to access data or resources on your behalf (e.g., an app posting on Twitter for you).
- "Can this app access my data?" (Authorisation)
Use OpenID Connect:
- When you need to verify a user's identity (e.g., signing into a website using your Google account).
- "Who is this user?" (Authentication)

Quick Comparison of OAuth, SAML, and OpenID Connect

Feature	OAuth	SAML	OpenID Connect
Purpose	Authorization	Authentication	Authentication & Authorization
Format	JSON, Token	XML	JSON
Use Cases	API access, Mobile apps	Web applications, SSO	Web and mobile applications
Complexity	Moderate	High	Moderate
User Experience	Redirects to IdP	Redirects to IdP	Redirects to Authorisation Server

Conclusion

Understanding OAuth, SAML, and OpenID Connect is essential for building secure applications that handle user authentication and authorisation effectively. Each protocol has its purpose, ensuring you can access what you need while keeping your data safe.

References

JavaScript Prototypes and Inheritance

Rahul Vijayvergiya — Wed, 28 Aug 2024 09:35:58 +0000

This post was initially published on my blog. Check out the original source using the link below:

JavaScript Prototypes and Inheritance

In this blog, we ha break down the concepts of prototypes and inheritance in JavaScript in a friendly and easy-to-understand manner, with examples to help s

rahulvijayvergiya.hashnode.dev

JavaScript is unique language, it doesn't use classical inheritance like languages such as Java or C++. Instead, it relies on prototypes. When i initially started learning javascript Prototype was always a confusing topic for me.

Even though with the advancement of es6, writing classes in javascript is much easier but the fact is that prototypes and inheritance are the foundation of JavaScript's object model, understanding them is essential for writing more effective and interoperable code,

In this blog, I'll break down the concepts of prototypes and inheritance in JavaScript in a friendly and easy-to-understand manner.

What are Prototypes in javascript?

In JavaScript, every object has a prototype. A prototype is another object that the original object inherits properties and methods from. We can think of it as a blueprint or a template that provides default values for the object.

Let’s take an example to make this clearer:

// Creating a simple object
const person = {
  greet: function() {
    console.log("Hello!");
  }
};

// Creating another object that inherits from 'person'
const john = Object.create(person);

// Calling the greet method on 'john'
john.greet();  // Output: "Hello!"

In this example, john doesn't have a greet method on its own, but it can still call greet because it inherits from the person object. The greet method is part of the person prototype, and john has access to it.

How Prototypal Inheritance Works

When we try to access a property or method on an object, JavaScript first checks if that property or method exists on the object itself. If it doesn't, JavaScript then looks at the object's prototype to see if the property or method exists there. This process continues up the prototype chain until the property or method is found or until the chain ends.

Here’s another example to explain this:

const animal = {
  type: 'Mammal',
  sound: function() {
    console.log("Generic animal sound");
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log("Woof!");
};

dog.sound();  // Output: "Generic animal sound"
dog.bark();   // Output: "Woof!"

In this example, the dog object inherits from animal via the Object.create method. Even though dog does not directly have the sound method, it can access it through its prototype (animal). This is the core idea behind prototypes and inheritance in JavaScript.

Javascript Constructor Functions and Prototypes

In JavaScript, you can use constructor functions to create objects that share the same prototype. Constructor functions are regular functions that are intended to be used with the new keyword. When you use the new keyword, JavaScript automatically sets the prototype of the new object to the prototype property of the constructor function.

Let’s see how this works:

// Constructor function
function Person(name) {
  this.name = name;
}

// Adding a method to the prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// Creating a new object using the constructor
const alice = new Person("Alice");

// Accessing properties and methods
console.log(alice.name);  // Output: "Alice"
alice.greet();  // Output: "Hello, my name is Alice"

In this example, Person is a constructor function. When we create a new Person object with new Person("Alice"), JavaScript sets the '__proto__' of the newly created object to Person.prototype. This means alice can access the greet method even though it’s not defined directly on alice

Inheritance with Constructor Functions

You can also create more complex inheritance structures using constructor functions. Suppose you want to create a Student constructor function that inherits from Person.

Example:

// Person constructor function
function Person(name) {
  this.name = name;
}

// Adding a method to the Person prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// Student constructor function
function Student(name, course) {
  // Call the Person constructor function with 'this'
  Person.call(this, name);
  this.course = course;
}

// Setting up inheritance by linking prototypes
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// Adding a method to the Student prototype
Student.prototype.study = function() {
  console.log(`${this.name} is studying ${this.course}`);
};

// Creating a new Student object
const bob = new Student("Bob", "Mathematics");

// Accessing properties and methods
bob.greet();  // Output: "Hello, my name is Bob"
bob.study();  // Output: "Bob is studying Mathematics"

In this example, the Student constructor function inherits from the Person constructor function. We use Person.call(this, name) to call the Person constructor within the Student constructor, ensuring that the name property is set correctly. Then, we set up the inheritance by linking Student.prototype to Person.prototype using Object.create.

Finally, we added a study method to the Student.prototype, and the bob object can now access both greet and study methods.

Object.create vs. Constructor Functions

Both Object.create and constructor functions can be used to create objects that share behaviour, but they work differently.

Object.create: It creates a new object with the specified prototype object and properties. It's straightforward and gives more control over the prototype chain.
Constructor Functions: They initialize the object and set up the prototype chain automatically using the new keyword. Constructor functions are often used for creating multiple similar objects.

Understanding proto, prototype

__proto__: The Internal Prototype Link

proto is an internal property that every JavaScript object has. It points to the object's prototype (from which it inherits properties and methods).
When you try to access a property on an object, JavaScript first looks for the property on the object itself. If it doesn’t find it, it moves up the prototype chain by following the proto link until it either finds the property or reaches the end of the chain (null).

prototype: The Property of Constructor Functions

Only functions (specifically, constructor functions) have prototype property. It's used to define methods and properties that should be shared by all instances created by the constructor function.
When you create an object using the new keyword with a constructor function, the object's __proto is automatically set to the constructor's prototype.

Object.prototype: The Default Top-Level Object

All JavaScript objects inherit from Object.prototype, which is the root of the prototype chain. This object contains basic methods like, which toString, valueOf, and hasOwnProperty etc which are defined in Object.prototype.

ES6 Classes and Prototypes

With the introduction of ES6, JavaScript now has a class syntax, which provides a more familiar way to define constructor functions and inheritance. However, under the hood, the class syntax still uses prototypes.

Here’s the previous example rewritten using ES6 classes:

// Person class
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// Student class that inherits from Person
class Student extends Person {
  constructor(name, course) {
    super(name);  // Call the parent class constructor
    this.course = course;
  }

  study() {
    console.log(`${this.name} is studying ${this.course}`);
  }
}

// Creating a new Student object
const charlie = new Student("Charlie", "Physics");

// Accessing properties and methods
charlie.greet();  // Output: "Hello, my name is Charlie"
charlie.study();  // Output: "Charlie is studying Physics"

Conclusion

JavaScript's prototypal inheritance might seem confusing , but once you understand the basic concepts, it becomes a important tool for creating reusable and extensible code, enabling code reuse and better code organisation.

JavaScript Memory Management: The Secret to a Clean and Fast App

Rahul Vijayvergiya — Tue, 20 Aug 2024 09:08:34 +0000

This post was initially published on my blog. Check out the original source using the link below:

JavaScript Memory Management: The Secret to a Clean and Fast App

Understanding how JavaScript manages memory, including the role of garbage collection and memory leaks.

rahulvijayvergiya.hashnode.dev

Ever wonder how JavaScript keeps our web apps running smoothly without turning user's computer into a digital hoarder’s house. All thanks to memory management and garbage collection. Think of it as a digital housekeeper that clean up behind the scenes. In this blog, we’ll dive into how JavaScript handles memory, why garbage collection matters, and how can we avoid the memory leaks which can make our app sluggish.

1. Memory Allocation: Where Does All the Stuff Go?

When we write code in JavaScript, memory allocation happens automatically. Imagine we’re moving into a new house. We’ve got boxes labeled "Clothes," "Kitchen Stuff," and "Random Things that Should be Probably Throw Away." When we unpack, we need to find places for everything. In JavaScript, memory allocation is a bit like unpacking those boxes. There are three main scenarios where memory gets allocated:

Variables: When we declare a variable, JavaScript allocates memory to store its value. They are like socks and need a drawer to live in.
Objects and arrays : Creating objects and arrays also requires memory allocation for storing data. They are like our kitchen appliances which take up more space and need proper storage.
Functions: Memory is allocated when we define and execute functions. They are recipes, we pull them out when we need them, and then put them away once no longer needed.

let name = "Cookie Monster"; // Memory drawer for the string "Cookie Monster"
let snacks = ["cookies", "more cookies", "even more cookies"]; // A pantry for the array of snacks
function eatSnack() {
    console.log("Om nom nom"); // A recipe for snacking
}

We don’t have to manually manage this memory—JavaScript does it for us. Just like how we wouldn’t leave our toaster in the living room, JavaScript makes sure everything’s in its place so our code can run smoothly.

2. Javascript Memory Life Cycle: Use It and Lose It

The life cycle of memory in JavaScript is like borrowing stuff from a friend. First, we take it (allocate memory), then use it (run our code), and finally, (should) give it back (release memory). If we forget to give things back, well, that’s when the trouble starts :)

Memory in JavaScript goes through a simple life cycle:

Allocation: When we create a variable, object, or function, memory is allocated.
Usage: This allocated memory is used to store values and execute code.
Release: When no longer needed, it should be released to make room for new data.

JavaScript tries to be a good friend by automatically cleaning up after we are done through garbage collection.

3. What is Garbage Collection?

Garbage collection is the process of identifying and freeing up memory that is no longer in use. JavaScript’s garbage collector automatically removes data that our program no longer needs to prevent memory leaks.

In a way its Javascript's Marie Kondo ;) that cleanup and organise things we don’t need anymore. It finds all the things we’ve left lying around that don’t "spark fun" (a.k.a. aren’t being used) and gets rid of them to free up space.

Mark-and-Sweep Algorithm

The garbage collector uses something called the Mark-and-Sweep algorithm.

Marking: The garbage collector starts by marking all the objects that are still reachable from the root (e.g., the global object or variables still in use). Just like the cleaner who first goes through entire house, marking everything that’s still useful ( favourite mug, that shirt we wear all the time).
Sweeping: It then identifies objects that are not marked, meaning they’re no longer reachable, and removes them from memory. Just like a cleaner sweeps up everything we don’t need and gets rid of it.

function createSnack() {
    let snack = {
        type: "cookie",
        flavor: "chocolate chip"
    };
    return snack;
}

let snack1 = createSnack();
let snack2 = createSnack();

// When we finish the first snack, it's time to get rid of the crumbs (memory).
snack1 = null;

In this example, once when snack1 is set to null, JavaScript’s knows we’re done with it and sweeps it away.

4. Memory Leaks: When Our House Starts to Overflow

If we keep holding onto stuff we don’t need, our house (memory) gets cluttered. The same way despite automatic garbage collection, memory leaks can still happen when references to unused objects persist. Here are some common scenarios that lead to memory leaks:

Global Variables: The Socks Under the Bed

Global variables stay in memory for the entire life of the application. They are like those socks that keep disappearing under the bed. They stay forever and take up space we didn’t even know.

function messyFunction() {
    forgottenSocks = "These are now global"; // Whoops, no 'let', 'const', or 'var'—now it's everywhere!
}

Unintended Closures: The Forgotten Sandwich

With Closures, an inner function retains access to variables from an outer function, even after the outer function has finished execution. It's like that sandwich we accidentally left in our backpack.

function outerFunction() {
    let bigSecret = "This is a huge secret no one needs to know anymore";

    return function innerFunction() {
        console.log(bigSecret); // Why are we still holding onto this?
    };
}

let inner = outerFunction(); // The big secret is still around, cluttering up memory.

Event Listeners: The Party Guests Who Never Leave

If we add event listeners but don’t remove them when they’re no longer needed, they can cause memory leaks because they keep references to elements that may have been removed from the DOM. Think of it like guests who refuse to go home after the party. We need to tell them it’s time to leave, or they’ll keep eating our snacks :D

let button = document.getElementById("partyButton");

button.addEventListener("click", function() {
    console.log("Party time!");
});

// If the button disappears, tell our guests to go home.
button.removeEventListener("click", partyTime);

Detached DOM Elements: The Floating Ball in pool after party

DOM elements that are removed from the document but still referenced in our JavaScript code will not be garbage collected, leading to memory leaks.

let ball = document.getElementById("myChair");
document.body.removeChild(ball); // The ball is still in memory, just floating around!

5. Best Practices to Keep The Code Clean

Always declare variables (use let, const, or var) to avoid creating global variables.
Clean up event listeners when they are no longer needed, especially if the elements they were attached to are removed, so our guests don’t overstay.
Watch out for closures that hold onto unnecessary secrets.
Use weak references (WeakMap, WeakSet) when we can—they won’t stop the garbage collector from doing its thing.
Manually nullify references to things (object, variable) we don’t need anymore, so our house doesn’t overflow.

Conclusion: Keep It Clean, Keep It Fun

JavaScript’s memory management is like having a good friend who helps us stay organised. But even the best of friends need some guidance. By being mindful and following some simple practices, we can keep our app running smoothly and prevent it from turning into a hoarder’s house. So lets declutter code and enjoy a clean, efficient app!

References

JavaScript Memory Management: The Secret to a Clean and Fast App

Understanding how JavaScript manages memory, including the role of garbage collection and memory leaks.

rahulvijayvergiya.hashnode.dev

Event Loop and Concurrency in JavaScript

Rahul Vijayvergiya — Tue, 13 Aug 2024 18:30:00 +0000

This post was initially published on my blog. Check out the original source using the link below:

Event Loop and Concurrency in JavaScript

This article explain how JavaScript handles asynchronous operations with the event loop, microtasks, and macrotasks.

rahulvijayvergiya.hashnode.dev

What is the Event Loop?

Event loop is the core mechanism of javascript that allows it to perform non-blocking operations, even though it’s single-threaded. It continuously checks the call stack and the task queue (or message queue) to check what should be executed next.

Here's how the event loop operates:
1. Call Stack: JavaScript has a call stack that keeps track of function executions. When a function is called, it’s added to the stack. When it finishes executing, it’s removed from the stack.

2. Task Queue: When an asynchronous operation completes (e.g., an API call, setTimeout), its callback is placed in the task queue.

3. Event Loop: The event loop continuously monitors the call stack and the task queue. If the call stack is empty, the event loop will push the first task from the task queue into the call stack, allowing it to be executed.

Asynchronous Operations in JavaScript

JavaScript uses different types of asynchronous operations, including:

Timers (setTimeout, setInterval): These functions execute code after a specified delay.
Promises: Used for handling asynchronous operations, promises can be resolved or rejected and are managed by the microtask queue.
Event Listeners: Events such as clicks, key presses, and network requests trigger asynchronous callbacks.

Macrotasks vs. Microtasks in Event loop

To understand the event loop better, we need to distinguish between macrotasks and microtasks.

Macrotasks

Macrotasks include operations like setTimeout, setInterval, I/O, and event callbacks. When these operations are complete, their callbacks are pushed into the task queue, waiting for the event loop to pick them up.

Microtasks

Microtasks, on the other hand, are primarily related to promise resolutions and MutationObserver. When a microtask is queued, it is processed after the currently executing script and before any macrotasks. This gives microtasks higher priority over macrotasks.

How the Event Loop Handles Tasks

Let’s break down the event loop with an example:

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

Output:

Start
End
Promise
Timeout

Here’s what happens:

1) The synchronous code is executed first:

console.log('Start') is executed and logged.
setTimeout is encountered, and its callback is queued as a macrotask.
Promise.resolve().then(...) is encountered, and its callback is queued as a microtask.
console.log('End') is executed and logged.

2) The call stack is now empty, so the event loop checks the microtask queue:

The promise’s .then() callback is executed, logging Promise.

3) Only after the microtask queue is empty does the event loop move to the macrotask queue:

The setTimeout callback is executed, logging Timeout.

Understanding Event Loop as a Restaurant

To make the concept of the event loop more easy to understand, let’s compare it to how a restaurant kitchen operates.

1. The Call Stack as the Chef: Imagine the chef is the call stack, responsible for cooking one dish at a time. When an order comes in, the chef starts preparing it. They can only work on one dish at a time, so if a new order comes in while they’re busy, it has to wait until the current dish is finished.

2. The Task Queue as the Wait Staff: The task queue is like the wait staff, who bring orders to the chef. They keep track of the orders waiting to be prepared. When the chef finishes a dish, the next order is passed to them to start cooking.

3. Microtasks as Quick Fixes: Sometimes, the chef might need to do something really quick, like adding a garnish or tasting a sauce. These are like microtasks—small, quick jobs that get done before the chef moves on to the next big order.

4. Macrotasks as Full Orders: Full meal preparations, like cooking a steak or making a salad, represent macrotasks. These take more time and are handled one after the other.

5. Event Loop as the Kitchen Manager: The event loop is like the kitchen manager who oversees everything, ensuring the chef stays busy but not overwhelmed. They make sure the chef handles quick fixes (microtasks) before starting the next full order (macrotask).

Common Issues

Understanding the event loop, microtasks, and macrotasks helps avoid common pitfalls in JavaScript, such as:

1) Starvation of macrotasks: when macrotasks (like setTimeout, setInterval, and event callbacks) are delayed or don't get a chance to run because the event loop is constantly busy handling microtasks (like promise callbacks). In simpler terms, if your code keeps adding more and more microtasks, they can pile up and get processed continuously, leaving no time for the macrotasks to execute. This can cause certain actions, like a setTimeout callback, to be delayed or not run as expected, which can make your application feel slow or unresponsive.

2) UI responsiveness: Since microtasks are executed before the rendering phase, heavy usage of microtasks can delay the UI update.

Conclusion
The event loop, with its handling of microtasks and macrotasks gives JavaScript its concurrency capabilities. By managing the execution of async tasks efficiently, JavaScript ensures that web applications remain responsive and can handle multiple operations without blocking the main thread.

References

How Web Workers Supercharge Web Application

Rahul Vijayvergiya — Mon, 05 Aug 2024 07:07:15 +0000

This post was initially published on my blog. Check out the original source using the link below:

How Web Workers Supercharge Web Application

Workers is a powerful feature in JavaScript which allow background processing and giving us option to run scripts concurrently with the main thread.

rahulvijayvergiya.hashnode.dev

In today's web development, performance is a critical when a application run on various devices like mobile phones, laptops, tablets, and iPads, each with different memory capabilities. As applications grows, handling multiple tasks concurrently without blocking the main thread becomes important. Web Workers is a powerful feature in JavaScript which allow background processing and giving us option to run scripts concurrently with the main thread.

What are Web Workers?

Web Workers are a standard feature of JavaScript that allow us to run scripts in the background which are independent of the main thread. Which means that tasks that takes a long time to execute can be offloaded to a worker, giving space for the main thread to handle user interactions, rendering, and other critical tasks of web application.

Why Web Workers?

JavaScript is single-threaded, which means it can only do one thing at a time. If we have a long-running task, like processing a large dataset or rendering a complex graphic then it can block the main thread, as a result UI can lag or freeze.

Types of Web Workers

Dedicated Workers: Operate in a single context and communicate with the main thread via messages.
Shared Workers: Can be accessed by multiple scripts, even across different windows, tabs, or iframes.
Service Workers: Act as a proxy between your web application and the network, managing push notifications, background sync, and caching resources.

How Web Workers Work?

Web Workers create a separate JavaScript file that the worker will execute. The main script and the worker script communicate using the postMessage() and onmessage methods. The worker runs in isolation, without access to the DOM or global variables from the main thread, ensuring safe, concurrent execution.

Here’s a simple example of creating a Web Worker:

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
  console.log('Message from worker:', event.data);
};

worker.postMessage('Hello Worker!');

// worker.js
onmessage = function(event) {
  console.log('Message from main thread:', event.data);
  postMessage('Hello from Worker!');
};

Some Real-World Use Cases of Web Workers

1. Process large CSV files

Imagine we’re building a web application that allows users to upload and process large CSV files. This app parses the CSV, performs data analysis, and then displays the results. Without Web Workers, this processing would block the main thread.

Here’s how we can use Web Workers to handle this:

Setting Up the Web Worker

First, we’ll create a separate JavaScript file, say worker.js, which will handle the data processing.

// worker.js
self.onmessage = function(e) {
    const csvData = e.data;
    const result = processData(csvData); // Assume processData is a function that handles your data
    self.postMessage(result);
};

function processData(data) {
    // complex data processing logic here
    return processedData;
}

Using the Web Worker in Main Thread

Next, in your main JavaScript file, we’ll create a new worker instance and post the CSV data to it.

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(e) {
    const processedData = e.data;
    displayResults(processedData); // Function to update the UI with the processed data
};

function handleFileUpload(file) {
    const reader = new FileReader();
    reader.onload = function() {
        const csvData = reader.result;
        worker.postMessage(csvData); // Send data to the worker
    };
    reader.readAsText(file);
}

In this example, main thread reads the uploaded file and sends data to the Web Worker. Web Worker processes this data in the background and sends the results back once it’s done. Meanwhile, the main thread remains free to do other task in the UI, show progress indicators, or respond to other user input.

2. Image Processing

Image processing is CPU-intensive tasks that can significantly impact performance of application, if its done on the main thread. Web Workers can handle tasks like resizing, filtering, or converting images in the background.

// imageWorker.js
onmessage = function(event) {
  const imageData = event.data;
  // Perform heavy image processing
  const processedImage = applyFilter(imageData);
  postMessage(processedImage);
};

// main.js
const imageWorker = new Worker('imageWorker.js');
imageWorker.postMessage(imageData);

imageWorker.onmessage = function(event) {
  displayImage(event.data);
};

3. Data Processing and Parsing

if we need to deal with large dataset, such as parsing JSON files or processing large arrays then we can offload this to web workers. This is particularly useful in data-intensive applications like analytics dashboards or real-time monitoring systems.

// dataWorker.js
onmessage = function(event) {
  const largeDataset = event.data;
  const processedData = processData(largeDataset);
  postMessage(processedData);
};

// main.js
const dataWorker = new Worker('dataWorker.js');
dataWorker.postMessage(largeDataset);

dataWorker.onmessage = function(event) {
  sendUpdatedDataToUI(event.data);
};

4. Complex Mathematical Calculations

if our application need complex mathematical operations, such as simulations, cryptography, or machine learning tasks then this can also be offloaded to web workers

// mathWorker.js
onmessage = function(event) {
  const result = performComplexCalculation(event.data);
  postMessage(result);
};

javascriptCopy code// main.js
const mathWorker = new Worker('mathWorker.js');
mathWorker.postMessage(inputData);

mathWorker.onmessage = function(event) {
  displayCalculationResult(event.data);
};

Limitations of Web Workers

Web Workers come with certain limitations:

No DOM Access: Web Workers cannot manipulate the DOM directly, so any UI updates need to be communicated back to the main thread.
Limited API Access: Not all JavaScript APIs are available in Web Workers. For eg., you cannot use localStorage or directly make XMLHttpRequests in older browsers.

Conclusion

Web Workers are a powerful tool in the a web developer’s toolkit, enabling him to build responsive, user-friendly applications. By offloading resource heavy (resource Hungary actually :) ) task to background threads, developer can keep his main thread free to handle user interactions and UI updates.

References

JavaScript Generators

Rahul Vijayvergiya — Mon, 29 Jul 2024 09:30:08 +0000

This post was initially published on my blog. Check out the original source using the link below:

JavaScript Generators

Explore JavaScript generators, Learn how to create and use generators for managing control flow, handling asyn operations, and creating iterators

rahulvijayvergiya.hashnode.dev

JavaScript generators are a powerful feature introduced in ECMAScript 6 (ES6) that provide a new way to work with functions and manage asynchronous operations. They enable developers to write code that can pause and resume its execution, offering greater control over the flow of data and execution.

What Are Javascript Generators?

Generators are a special type of function that can be paused and resumed, allowing you to control the execution flow more precisely. They are defined using the function* syntax and produce values using the yield keyword.

Syntax of Javascript Generators

Here's a basic example of a generator function:

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}

To use the generator function, you need to create an iterator:

const generator = generatorFunction();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

How JavaScript Generators Work

Creation: When a generator function is called, it does not execute its code immediately. Instead, it returns an iterator object.
Execution: The code inside the generator function runs when the iterator's next() method is called.
Yield: The yield keyword pauses the generator function and returns the value. The function can be resumed from where it left off when next() is called again.
Completion: When the generator function completes its execution, the iterator returns an object with done: true.

Use Cases for JavaScript Generators

Generators are versatile and can be used in various scenarios, such as:

Lazy Evaluation: Generators allow you to generate values on-the-fly, which is useful for working with large datasets or streams of data.

function* infiniteSequence() {
     let i = 0;
     while (true) {
         yield i++;
     }
 }

 const iterator = infiniteSequence();
 console.log(iterator.next().value); // 0
 console.log(iterator.next().value); // 1

2. Asynchronous Programming: Generators can be combined with Promises to handle asynchronous operations more elegantly.

function* fetchData() {
     const data1 = yield fetch('https://api.example.com/data1');
     const data2 = yield fetch('https://api.example.com/data2');
     return [data1, data2];
 }

 const iterator = fetchData();
 iterator.next().value.then(response1 => {
     iterator.next(response1).value.then(response2 => {
         console.log(iterator.next(response2).value);
     });
 });

3. Iterating Over Collections: Generators can create custom iterators for objects or arrays.

const collection = {
     items: [1, 2, 3],
     *[Symbol.iterator]() {
         for (const item of this.items) {
             yield item;
         }
     }
 };

 for (const item of collection) {
     console.log(item); // 1, 2, 3
 }

Advanced javascript Generator Concepts

Generator Delegation: Generators can delegate to another generator or iterable using the yield* expression.

function* subGenerator() {
     yield 'a';
     yield 'b';
 }

 function* mainGenerator() {
     yield* subGenerator();
     yield 'c';
 }

 const iterator = mainGenerator();
 console.log(iterator.next().value); // 'a'
 console.log(iterator.next().value); // 'b'
 console.log(iterator.next().value); // 'c'

2. Two-way Communication: You can send values back into the generator using the next method.

function* generatorFunction() {
     const result = yield 'Initial';
     console.log(result); // 'Input'
 }

 const iterator = generatorFunction();
 console.log(iterator.next().value); // 'Initial'
 iterator.next('Input');

3. Error Handling: Generators can handle errors gracefully using try...catch blocks.

function* generatorFunction() {
     try {
         yield 'Try this';
         throw new Error('Something went wrong');
     } catch (error) {
         console.log(error.message); // 'Something went wrong'
     }
 }

 const iterator = generatorFunction();
 console.log(iterator.next().value); // 'Try this'
 iterator.next();

4. Pausing and Resuming Execution: Generators can be paused and resumed multiple times, making them useful for complex state management.

function* stateMachine() {
    const state1 = yield 'State 1';
    console.log(state1); // 'State A'
    const state2 = yield 'State 2';
    console.log(state2); // 'State B'
}

const iterator = stateMachine();
console.log(iterator.next().value); // 'State 1'
console.log(iterator.next('State A').value); // 'State 2'
iterator.next('State B');

5. Using Generators for Stream Processing: Generators can be particularly useful for processing streams of data, allowing you to handle each chunk of data as it arrives.

const fs = require('fs');
const readline = require('readline');

function* processFile(filename) {
   const fileStream = fs.createReadStream(filename);
   const rl = readline.createInterface({
       input: fileStream,
       crlfDelay: Infinity
   });

   for await (const line of rl) {
       yield line;
   }
}

(async () => {
   for await (const line of processFile('example.txt')) {
       console.log(`Line from file: ${line}`);
   }
})();

Conclusion

JavaScript Generators are a powerful and flexible feature in JavaScript, providing a new way to manage control flow and handle asynchronous operations. By understanding how to create and use generators, you can write more efficient and readable code. Whether you're working with large data sets, implementing lazy evaluation, or managing asynchronous tasks, generators can significantly enhance your JavaScript programming experience.

This post was initially published on my blog. Check out the original source using the link below:

JavaScript Generators

Explore JavaScript generators, Learn how to create and use generators for managing control flow, handling asyn operations, and creating iterators

rahulvijayvergiya.hashnode.dev

Understanding JavaScript Promises

Rahul Vijayvergiya — Mon, 29 Jul 2024 04:24:52 +0000

This post was initially published on my blog. Check out the original source using the link below:

Understanding JavaScript Promises

Learn the essentials of JavaScript promises, including their creation, usage, and common pitfalls. Understand how to handle asynchronous operations.

rahulvijayvergiya.hashnode.dev

JavaScript promises are a powerful way to handle asynchronous operations. Before the introduction of promises, callbacks were the primary method to handle asynchronous tasks. However, callbacks can lead to "callback hell," where nested callbacks become difficult to manage and read. Promises provide a cleaner, more readable way to manage asynchronous operations.

What is a Promise?

A promise in JavaScript represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It is an object that can be in one of three states:

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: Operation completed successfully.
Rejected: Operation failed.

Creating a Promise

To create a promise, use the Promise constructor, which takes a function with two parameters: resolve and reject. These functions control the promise's state.

const myPromise = new Promise((resolve, reject) => {
  let success = true; // Simulate an operation
  if (success) {
    resolve("Operation successful!");
  } else {
    reject("Operation failed.");
  }
});

Using Promises

Promises have then, catch, and finally methods to handle the result.

then: Called when the promise is fulfilled.
catch: Called when the promise is rejected.
finally: Called regardless of the promise's outcome.

myPromise
  .then((message) => {
    console.log(message); // "Operation successful!"
  })
  .catch((error) => {
    console.error(error); // "Operation failed."
  })
  .finally(() => {
    console.log("Operation completed.");
  });

Chaining Promises

One of the main advantages of promises is chaining. You can chain multiple then calls to perform a sequence of asynchronous operations.

const firstPromise = new Promise((resolve) => {
  setTimeout(() => resolve("First promise resolved"), 1000);
});

firstPromise
  .then((result) => {
    console.log(result); // "First promise resolved"
    return new Promise((resolve) => {
      setTimeout(() => resolve("Second promise resolved"), 1000);
    });
  })
  .then((result) => {
    console.log(result); // "Second promise resolved"
  })
  .catch((error) => {
    console.error(error);
  });

Handling Multiple Promises

JavaScript provides utility methods to handle multiple promises concurrently: Promise.all, Promise.race, Promise.allSettled, and Promise.any.

Promise.all: Waits for all promises to resolve or any to reject.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, 'foo']
});

Promise.race: Resolves or rejects as soon as one of the promises resolves or rejects.

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // "two"
});

Promise.allSettled: Waits for all promises to settle (either resolve or reject).

const promise1 = Promise.resolve(42);
const promise2 = Promise.reject('error');
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  results.forEach((result) => console.log(result.status));
  // "fulfilled"
  // "rejected"
  // "fulfilled"
});

Promise.any: Waits for any promise to resolve.

const promise1 = Promise.reject('error1');
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

Promise.any([promise1, promise2]).then((value) => {
  console.log(value); // "foo"
}).catch((error) => {
  console.error(error); // AggregateError: All promises were rejected
});

Common Mistakes with Promises

While promises are powerful, they can also be a source of confusion and errors. Here are some common mistakes developers make when working with promises:

1. Not Returning a Promise in a then Handler

For chaining to work correctly, you must return a promise inside a then handler. Failing to do so breaks the chain.

firstPromise
  .then((result) => {
    console.log(result);
    new Promise((resolve) => setTimeout(resolve, 1000, 'Second promise resolved')); // Missing return
  })
  .then((result) => {
    console.log(result); // This will log undefined
  });

2. Catching Errors Too Early

Catching an error early in a chain can prevent downstream then handlers from being aware of the error.

firstPromise
  .then((result) => {
    throw new Error('Something went wrong');
  })
  .catch((error) => {
    console.error(error); // Caught too early
  })
  .then(() => {
    console.log('This will still run');
  });

To avoid this, place error handling at the end of the chain or as close to the specific operation as possible.

3. Creating Unnecessary Promises

It's common to wrap synchronous operations in promises unnecessarily, which adds complexity.

const promise = new Promise((resolve) => {
  resolve('Hello, World!');
});
promise.then((message) => console.log(message));

Instead, just use the value directly:

Promise.resolve('Hello, World!').then((message) => console.log(message));

4. Forgetting to Handle Rejections

Always handle rejections to prevent unhandled promise rejections, which can cause issues in your application.

const promise = new Promise((_, reject) => {
  reject('Error occurred');
});
promise.then((message) => console.log(message)); // No catch handler

Always add a catch block:

promise
  .then((message) => console.log(message))
  .catch((error) => console.error(error));

5. Mixing Promises and Async/Await

While promises and async/await are both ways to handle asynchronous code, mixing them can lead to confusion.

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  data.then((result) => console.log(result)); // Unnecessary promise
}

Stick to one approach:

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  console.log(await data.json());
}

Conclusion

Promises are an essential part of modern JavaScript, providing a robust way to handle asynchronous operations. By understanding how to create, use, and manage promises, you can write cleaner, more maintainable code. Avoiding common mistakes will help you leverage promises effectively and prevent potential pitfalls. Whether you're handling a single asynchronous task or coordinating multiple concurrent operations, promises are a powerful tool in your JavaScript toolkit.

This post was initially published on my blog. Check out the original source using the link below:

Understanding JavaScript Promises

Learn the essentials of JavaScript promises, including their creation, usage, and common pitfalls. Understand how to handle asynchronous operations.

rahulvijayvergiya.hashnode.dev

DEV Community: Rahul Vijayvergiya

Load Balancer vs API Gateway (can one replace other)

Load Balancer and OSI Layers

API Gateway and OSI Layers

4. Key Differences at a Glance

What Is a Load Balancer?

Its main job:

What Is an API Gateway?

Its main job:

Why Load Balancer Cannot Handle Authentication

Can One Replace the Other?

Can API Gateway replace Load Balancer?

Can Load Balancer replace API Gateway?

Final Summary

Sundar, Satya and Sam's AI Dream: Take everyones job

Why AI Doesn’t Take Your Job — and Why That Worries Them More Than You

🤖 The Great Job Panic: Manufactured, Marketed, and Failing

😬 The Tech Gods Now Serve Investors, Not Innovation

🪦 AI: The Emergency Exit for Failing Startups

💡 What Actually Remains?

🚫 The Bottom Line

Multithreading, Concurrency: A Deep Dive with JavaScript

What is Multithreading?

Key Concepts in Multithreading

Why Use Multithreading?

Challenges of Multithreading

What is Concurrency?

Key Concepts in Concurrency

Why Concurrency Matters?

Challenges of Concurrency

Multithreading and Concurrency in JavaScript

How JavaScript Manages Concurrency

Example: Concurrency in JavaScript

Using Web Workers for Multithreading in JavaScript

Conclusion

Understanding LibUV and Its Thread Pool

What is LibUV?

The Role of the Thread Pool in LibUV

How It Works

Example: File Reading with Thread Pool

Key Points About the Thread Pool

When to Be Cautious

Conclusion

Under the Hood of Node.js: Exploring the V8 JavaScript Engine

What is V8?

From JavaScript to Machine Code

The V8 Execution Process

V8 and Node.js Performance:

Further Reading:

Summary

SAML vs. OAuth vs. OpenID Connect

1. SAML (Security Assertion Markup Language)

How SAML Works

Key Features of SAML

2. OAuth (Open Authorisation)

How OAuth Works

Key Features of OAuth

3. OpenID Connect

How OpenID Connect Works

Key Features of OpenID Connect

OpenID Connect and OAuth

When to Use:

Quick Comparison of OAuth, SAML, and OpenID Connect

Conclusion

References

JavaScript Prototypes and Inheritance

What are Prototypes in javascript?

How Prototypal Inheritance Works

Javascript Constructor Functions and Prototypes

Inheritance with Constructor Functions

Object.create vs. Constructor Functions

Understanding __proto__, prototype

Object.prototype: The Default Top-Level Object

ES6 Classes and Prototypes

Conclusion

Further readings:

JavaScript Memory Management: The Secret to a Clean and Fast App

1. Memory Allocation: Where Does All the Stuff Go?

2. Javascript Memory Life Cycle: Use It and Lose It

3. What is Garbage Collection?

Understanding proto, prototype