DEV Community: Sai Swaroop Bijinapalli

JavaScript Design Patterns: Singleton and Factory Explained with Real Examples

Sai Swaroop Bijinapalli — Fri, 14 Aug 2026 06:55:33 +0000

JavaScript Design Patterns: Singleton and Factory Explained with Real Examples

When developing software, we often face the same types of problems repeatedly.

For example:

How should we create objects?
Should every part of the application create its own object?
How can multiple parts of an application share the same object?
How can we add new types of objects without changing existing code?

Instead of solving these problems from scratch every time, software engineering provides design patterns.

This blog focuses on understanding design patterns conceptually and then implementing two important patterns in JavaScript:

Singleton Pattern
Factory Pattern

What Is a Design Pattern?

A design pattern is a reusable solution or approach to a commonly occurring software design problem.

It is important to understand that a design pattern is not a library or a ready-made piece of code.

It is more like a blueprint.

For example, an architect may have a standard approach for designing a particular type of building. The actual building can be different, but the underlying design idea can be reused.

Similarly, a design pattern gives us a proven way to structure software.

Why Do We Need Design Patterns?

Imagine an application where every developer solves object creation differently.

One developer writes:

```js id="cxk6wq"
const user = {
name: "Sai"
};




Another creates a class:



```js id="f3yykp"
class User {
    constructor(name) {
        this.name = name;
    }
}

Another creates a factory function:

```js id="i6gtdj"
function createUser(name) {
return {
name
};
}




All of these can work, but as applications become larger, we need consistent and maintainable approaches.

Design patterns provide commonly understood structures.

---

# Categories of Design Patterns

Design patterns are commonly grouped into categories.

### Creational Patterns

These deal with **object creation**.

Examples:

* Singleton
* Factory
* Builder

### Structural Patterns

These deal with how objects and classes are combined.

Examples:

* Adapter
* Decorator
* Facade

### Behavioral Patterns

These deal with communication and behavior between objects.

Examples:

* Observer
* Strategy
* Command

For this part of Week-06, the main focus is on **creational patterns**, particularly Singleton and Factory.

---

# Singleton Pattern

Let's start with the Singleton Pattern.

The easiest way to understand Singleton is:

> **One object should exist, and everyone who needs it should use that same object.**

This is the key idea.

---

# Why Would We Need Only One Object?

Consider application configuration.

Suppose our application has:



```text id="d8pjk6"
Application Name
Environment
Port
API URL
Database Configuration

You could create a configuration object in every module:

```text id="gqaf3a"
user.js → Configuration A
payment.js → Configuration B
server.js → Configuration C
database.js → Configuration D




Now we have multiple configuration objects.

That can cause inconsistency.

Instead, we may want:



```text id="6ctf3b"
                  Configuration
                       ↑
          ┌────────────┼────────────┐
          │            │            │
       user.js     payment.js    server.js

Every module accesses the same configuration instance.

This is where Singleton becomes useful.

Singleton in Simple Terms

Think about a Singleton like a single shared resource.

The rule is:

```text id="z4j0wb"
First request
↓
Create object

Second request
↓
Return existing object

Third request
↓
Return existing object




The object is created only once.

---

# Singleton Example

Let's create a configuration manager.



```js id="jv4o4s"
class ConfigManager {

    constructor() {

        if (ConfigManager.instance) {
            return ConfigManager.instance;
        }

        this.config = {
            appName: "My Application",
            environment: "development",
            port: 3000
        };

        ConfigManager.instance = this;
    }

    get(key) {
        return this.config[key];
    }

    set(key, value) {
        this.config[key] = value;
    }
}

Now:

```js id="l8o5m0"
const config1 = new ConfigManager();
const config2 = new ConfigManager();

console.log(config1 === config2);




Output:



```text id="5l5xwi"
true

Why?

Because the second call doesn't create a new object.

It returns the already existing instance.

Understanding the Singleton Step by Step

Initially:

```text id="90s1k3"
ConfigManager.instance
↓
undefined




First:



```js id="8k0xkb"
const config1 = new ConfigManager();

There is no existing instance, so the constructor creates one.

```text id="7xkwcg"
ConfigManager.instance
↓
Object A




Now:



```js id="a0a52k"
const config2 = new ConfigManager();

The constructor checks:

```js id="5z0zsk"
if (ConfigManager.instance) {
return ConfigManager.instance;
}




An instance already exists.

Therefore:



```text id="o2i90s"
config1 ─────┐
             ↓
          Object A
             ↑
config2 ─────┘

Both variables reference the same object.

Singleton and Shared State

This is another important concept.

Suppose:

```js id="vym9qz"
config1.set("port", 5000);




Now:



```js id="8a3rwh"
console.log(config2.get("port"));

Output:

```text id="3vpt8x"
5000




Why?

Because `config1` and `config2` are not two independent objects.

They reference the same object.

This means changes made through one reference are visible through the other.

---

# When Can Singleton Be Useful?

Common examples include:

### Configuration Manager

One application configuration.

### Logger

A centralized logging system.

### Database Connection Manager

A shared connection-management object.

### Cache Manager

One shared cache.

However, Singleton should not automatically be used everywhere.

Creating global shared state can also make applications harder to test and reason about.

The important principle is:

> Use Singleton when having exactly one shared instance is actually part of the application's requirements.

---

# Factory Pattern

Now let's look at the Factory Pattern.

The Factory Pattern solves a different problem.

Singleton asks:

> **"How can I make sure there is only one object?"**

Factory asks:

> **"How can I centralize the creation of different objects?"**

---

# Factory in Simple Terms

Imagine a factory in the real world.

You tell the factory:



```text id="78shm2"
"Build me a car"

The factory handles the details of producing the car.

You don't need to know every internal step.

Similarly, a JavaScript Factory can receive information and create the appropriate object.

Simple Factory Function

Consider:

```js id="n9b4ex"
function createEmployee(name, role) {

return {
    name,
    role
};

}




Now:



```js id="s3pqg0"
const employee1 = createEmployee("Sai", "Developer");
const employee2 = createEmployee("Rahul", "Tester");

The factory function creates objects for us.

The important idea is:

```text id="2x0uyg"
Input
↓
Factory
↓
Object




---

# Why Use a Factory?

Imagine an application that supports different notification types:



```text id="g5th0w"
Email
SMS
Push

Without a Factory, different parts of the application might directly create these objects:

```js id="d5xv7y"
new EmailNotification();
new SMSNotification();
new PushNotification();




Now object creation logic is spread throughout the application.

Instead, we can centralize it:



```js id="m4e6km"
NotificationFactory.create("email");
NotificationFactory.create("sms");
NotificationFactory.create("push");

The Factory decides which object needs to be created.

Notification Factory Example

```js id="8h6wkw"
class EmailNotification {

send(message) {
    console.log(`Email: ${message}`);
}

}

class SMSNotification {

send(message) {
    console.log(`SMS: ${message}`);
}

}

class PushNotification {

send(message) {
    console.log(`Push: ${message}`);
}

}




Now create the Factory:



```js id="7s2k3p"
class NotificationFactory {

    static create(type) {

        switch (type) {

            case "email":
                return new EmailNotification();

            case "sms":
                return new SMSNotification();

            case "push":
                return new PushNotification();

            default:
                throw new Error("Unsupported notification type");
        }

    }

}

Now the application can simply say:

```js id="x1k9jf"
const notification =
NotificationFactory.create("email");

notification.send("Welcome!");




Output:



```text id="e47g4k"
Email: Welcome!

The application doesn't need to know the details of how the EmailNotification object was created.

Understanding the Factory Flow

For Email:

```text id="7unxob"
NotificationFactory
|
| "email"
↓
EmailNotification
|
↓
send()




For SMS:



```text id="iz0lqf"
NotificationFactory
        |
        | "sms"
        ↓
SMSNotification
        |
        ↓
send()

For Push:

```text id="4dd20p"
NotificationFactory
|
| "push"
↓
PushNotification
|
↓
send()




The Factory hides the object creation details.

---

# Factory vs Singleton

This is one of the most important differences to understand.

| Singleton                             | Factory                                 |
| ------------------------------------- | --------------------------------------- |
| Controls the number of instances      | Controls object creation                |
| Usually provides one shared instance  | Can create many objects                 |
| Focuses on reuse of the same instance | Focuses on selecting/creating an object |
| Example: Config Manager               | Example: Notification Factory           |

### Singleton



```text id="f5y22a"
getInstance()
     ↓
Same Object
     ↓
Same Object
     ↓
Same Object

Factory

```text id="p5j1vh"
create("email")
↓
Email Object

create("sms")
↓
SMS Object

create("push")
↓
Push Object




This difference is extremely important.

---

# Connecting Factory with Open/Closed Thinking

Now we can connect this topic to the **Open/Closed Principle**.

The Open/Closed Principle states:

> **Software should be open for extension but closed for modification.**

Suppose our application initially supports:



```text id="m2p5p4"
Email
SMS
Push

Later, we want to add:

```text id="d5d0fj"
WhatsApp




The Factory-based design gives us a clear place to extend the system.

We can introduce:



```js id="b0fkli"
class WhatsAppNotification {

    send(message) {
        console.log(`WhatsApp: ${message}`);
    }

}

Then extend the creation logic to support it.

The larger architectural idea is:

```text id="v7j6tq"
Existing functionality
↓
stays stable

New functionality
↓
added




This is the kind of thinking the Open/Closed Principle encourages.

---

# Important Difference: Pattern vs Principle

These concepts are related but not the same.

### Design Pattern

A reusable design approach.

Example:



```text id="0exzfk"
Singleton
Factory
Observer

Design Principle

A guideline for designing maintainable software.

Example:

```text id="c0zq1p"
Open/Closed Principle




So:



```text id="r5iyj8"
Design Pattern
     ↓
Reusable solution

Design Principle
     ↓
Guideline for better design

Real-World Example

Imagine an e-commerce application.

Singleton

The application has one configuration manager:

```text id="bqu3hw"
Application
↓
Config Manager
↓
One Instance




### Factory

The application supports different notifications:



```text id="4xevq5"
Notification Factory
      |
      ├── Email
      ├── SMS
      └── Push

Observer

When an order is placed:

```text id="8u0q67"
Order Placed
↓
Event

↓

| | |
Email SMS Analytics




Each pattern solves a different problem.

---

# The Three Patterns at a Glance

### Singleton

**Problem:**

> I need exactly one shared instance.

**Solution:**

> Create it once and return the same instance.

---

### Factory

**Problem:**

> I have different object types and don't want object creation logic scattered throughout my application.

**Solution:**

> Centralize object creation in a Factory.

---

### Observer

**Problem:**

> Multiple parts of the application need to react when something happens.

**Solution:**

> Allow listeners/observers to subscribe and notify them when an event occurs.

---

# Final Mental Model

The easiest way to remember these patterns is:



```text id="f9e2ul"
                 DESIGN PATTERNS
                       |
        --------------------------------
        |              |               |
    Singleton        Factory        Observer
        |              |               |
   ONE object      CREATE objects    NOTIFY objects
        |              |               |
   Config         Email/SMS/Push      Events

The patterns are not just code tricks. They are ways of thinking about software design.

Singleton helps control instance creation.

Factory helps control object creation.

Observer helps control communication between objects.

Together with principles such as the Open/Closed Principle, these ideas help us build JavaScript applications that are easier to understand, extend, test, and maintain.

Week-06 Day 1: CommonJS vs ESM and Modules in JavaScript

Sai Swaroop Bijinapalli — Fri, 14 Aug 2026 06:24:31 +0000

JavaScript Modules: CommonJS vs ESM and Why Modules Matter

When a JavaScript application is small, it is possible to keep everything inside a single file. But as an application grows, putting all the code in one file becomes difficult to understand and maintain.

For example, imagine an application containing:

User authentication
Database operations
Payment processing
Notification services
Utility functions
API routes

If all of this code is placed in one JavaScript file, the file can quickly become difficult to manage.

This is where JavaScript modules become important.

What is a Module?

A module is a separate, self-contained piece of JavaScript code that handles a particular responsibility.

For example, instead of having one large file:

app.js

we can organize the application as:

project/
│
├── app.js
├── user.js
├── database.js
├── payment.js
└── utils.js

Each file becomes responsible for a particular part of the application.

The important idea is:

A module allows us to organize code into separate units and share only the functionality that other parts of the application need.

Why Do We Need Modules?

Modules solve several problems.

1. Code Organization

Instead of putting everything into one file, related functionality can be grouped together.

For example:

user.js

can contain user-related functionality, while:

database.js

contains database-related functionality.

2. Reusability

Suppose we create an add() function.

Instead of rewriting it in multiple files, we can export it from one module and reuse it.

3. Avoiding Global Variables

Without modules, variables can accidentally become globally accessible.

Modules provide a controlled scope for variables and functions.

4. Maintainability

When functionality is separated into modules, changing one part of the application becomes easier.

For example, if database logic is inside:

database.js

we don't need to search through the entire application to find database-related code.

CommonJS

CommonJS is a module system traditionally associated with Node.js.

It uses:

require()

for importing modules and:

module.exports

for exporting functionality.

Creating a CommonJS Module

Suppose we have:

math.js

Inside it:

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = {
    add,
    subtract
};

Here we are exporting both functions.

Now another file can use them.

const math = require("./math");

console.log(math.add(10, 5));
console.log(math.subtract(10, 5));

Output:

15
5

The important flow is:

math.js
   |
   | module.exports
   ↓
Exports functions
   |
   ↓
app.js
   |
   | require()
   ↓
Uses functions

ESM — ECMAScript Modules

ESM stands for ECMAScript Modules.

It is the standardized JavaScript module system and uses:

export

and:

import

Creating an ESM Module

math.js:

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

Then:

import { add, subtract } from "./math.js";

console.log(add(10, 5));
console.log(subtract(10, 5));

Output:

15
5

The concept is the same as CommonJS:

One file
   ↓
exports functionality
   ↓
Another file
   ↓
imports functionality

Only the syntax and module system are different.

Named Exports

With ESM, we can export multiple named values.

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

Import them using their names:

import { add, multiply } from "./math.js";

The names need to match the exported names unless aliases are used.

Default Export

ESM also supports a default export.

export default function greet(name) {
    return `Hello ${name}`;
}

Then:

import greet from "./greet.js";

console.log(greet("Sai"));

With a default export, the importing code can choose the local name.

CommonJS vs ESM

The main difference can be understood from the syntax.

CommonJS

Export:

module.exports = {
    add
};

Import:

const { add } = require("./math");

ESM

Export:

export function add(a, b) {
    return a + b;
}

Import:

import { add } from "./math.js";

Comparison

Feature	CommonJS	ESM
Import	`require()`	`import`
Export	`module.exports`	`export`
Standard	Node.js module system	JavaScript standard
Common usage	Traditional Node.js projects	Modern JavaScript
Default syntax	`require("./file")`	`import x from "./file.js"`

The important thing is not to memorize the table.

Remember:

CommonJS → require + module.exports

ESM → import + export

Why This Matters in Node.js

Modern Node.js applications commonly use ESM, but CommonJS is still widely used in existing Node.js projects.

For example, a project may have:

const express = require("express");

which indicates CommonJS.

Another project may have:

import express from "express";

which indicates ESM.

Both approaches allow modules to be created and reused.

The important thing when working on a project is to understand which module system the project is configured to use.

Modules and Separation of Responsibility

One of the biggest benefits of modules is separation of responsibility.

Imagine an employee-management application.

Instead of:

server.js
   |
   ├── Database code
   ├── Employee code
   ├── Authentication code
   ├── Validation code
   └── Utility code

we can organize it:

server.js
   |
   ├── database.js
   ├── employee.js
   ├── auth.js
   ├── validation.js
   └── utils.js

Now each module has a clear responsibility.

This idea becomes extremely important when we start learning design patterns.

Connection to Design Patterns

Modules and design patterns solve different problems.

Modules answer:

"How should I organize and share my code?"

Design patterns answer:

"How should I structure my code to solve a recurring design problem?"

For example:

Modules
   ↓
Organize code

Design Patterns
   ↓
Structure solutions

Open/Closed Principle
   ↓
Make code easier to extend

These concepts work together when building larger applications.

A Simple Real-World Example

Imagine an online shopping application.

We might have:

shop/
│
├── user.js
├── product.js
├── cart.js
├── payment.js
└── notification.js

notification.js might export notification functionality.

Later, we might use a Factory Pattern inside that module to create:

Email Notification
SMS Notification
Push Notification

So modules give us the structure, while design patterns help us solve specific design problems inside that structure.

Key Takeaways

From this topic, the most important concepts are:

Modules divide an application into smaller, manageable pieces.
Modules improve organization, reuse, and maintainability.
CommonJS uses require() and module.exports.
ESM uses import and export.
ESM is the standardized JavaScript module system.
Modules help separate responsibilities.
Modules and design patterns are different concepts, but they work together to create maintainable applications.

The most important mental model is:

Large Application
       ↓
   Divide into
     Modules
       ↓
Organize responsibilities
       ↓
Use Design Patterns
       ↓
Solve recurring design problems
       ↓
Maintainable Application

This understanding of modules provides the foundation for the next part of Week-06: design patterns such as Singleton, Factory, and Observer.

Asynchronous JavaScript II: Promise Combinators & Concurrency Control

Sai Swaroop Bijinapalli — Wed, 12 Aug 2026 11:27:20 +0000

Week-05 Task 02 — Asynchronous JavaScript II

The main topics are:

1. async / await
2. Error handling with try/catch
3. Promise.all()
4. Promise.allSettled()
5. Promise.race()
6. Promise.any()
7. Generators
8. Iterators
9. Async iterators
10. Fail-fast vs fail-soft
11. Concurrency limiting

1. First: What is asynchronous JavaScript?

JavaScript normally executes code sequentially.

console.log("Start");
console.log("Middle");
console.log("End");

Output:

Start
Middle
End

But some operations take time, such as:

API requests
Database requests
File operations
Timers
Network requests

For example:

console.log("Start");

setTimeout(() => {
    console.log("Data received");
}, 2000);

console.log("End");

Output:

Start
End
Data received

Why?

Because setTimeout() is asynchronous. JavaScript doesn't wait for the timer before continuing.

2. Why do we use Promises?

When an asynchronous operation finishes, we need a way to handle its result.

A Promise represents the future result of an asynchronous operation.

const promise = new Promise((resolve, reject) => {

    setTimeout(() => {
        resolve("Data received");
    }, 2000);

});

The Promise starts as:

pending

After 2 seconds:

pending
   ↓
fulfilled

with:

value = "Data received"

3. `async/await`

async/await provides a cleaner way to work with Promises.

`async`

When we write:

async function getData() {

}

the function automatically returns a Promise.

Example:

async function hello() {
    return "Hello";
}

Although we return a string:

return "Hello";

the function actually returns a Promise.

hello().then((value) => {
    console.log(value);
});

Output:

Hello

Remember

An async function always returns a Promise.

4. `await`

await is used to get the result of a Promise.

function getData() {

    return new Promise((resolve) => {

        setTimeout(() => {
            resolve("Data received");
        }, 2000);

    });
}

Now:

async function main() {

    const data = await getData();

    console.log(data);
}

main();

Output after 2 seconds:

Data received

What happens?

main()
 ↓
getData()
 ↓
Promise pending
 ↓
await
 ↓
wait for Promise
 ↓
resolve("Data received")
 ↓
data = "Data received"
 ↓
console.log(data)

Important

await doesn't create the value.

The value is provided by:

resolve("Data received");

Then:

const data = await getData();

receives that value.

So:

resolve() → provides value
await → receives value
data → stores value

5. Why use async/await?

Without async/await:

getData()
    .then((data) => {
        console.log(data);
    });

With async/await:

async function main() {

    const data = await getData();

    console.log(data);
}

Both work with Promises.

async/await makes asynchronous code easier to read.

6. Error handling with `try/catch`

Promises can either:

fulfill

or:

reject

Example:

function getData() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {
            reject("Server error");
        }, 2000);

    });
}

Using async/await:

async function main() {

    try {

        const data = await getData();

        console.log(data);

    } catch (error) {

        console.log("Error:", error);
    }
}

main();

Output:

Error: Server error

Flow

await getData()
       ↓
Promise rejects
       ↓
error thrown
       ↓
catch(error)
       ↓
handle error

Mentor answer

"try/catch allows us to handle rejected Promises when using async/await. If an awaited Promise rejects, the rejection is thrown as an error and the catch block handles it."

7. Promise Combinators

Suppose you have multiple asynchronous operations:

const user = getUser();
const profile = getProfile();
const posts = getPosts();

You may want to handle them together.

That's where Promise combinators are useful.

The four important combinators are:

Promise.all()
Promise.allSettled()
Promise.race()
Promise.any()

8. `Promise.all()`

Promise.all() waits for all Promises to fulfill.

Example:

const p1 = Promise.resolve("User");
const p2 = Promise.resolve("Profile");
const p3 = Promise.resolve("Posts");

Promise.all([p1, p2, p3])
    .then((results) => {

        console.log(results);

    });

Output:

[
    "User",
    "Profile",
    "Posts"
]

Important

The result order follows the input order.

Promise.all([
    p1,
    p2,
    p3
]);

Result:

[p1 result, p2 result, p3 result]

even if p3 finishes first.

9. What happens when one fails?

const p1 = Promise.resolve("User");

const p2 = Promise.reject("Profile failed");

const p3 = Promise.resolve("Posts");

Promise.all([p1, p2, p3])
    .then((results) => {

        console.log(results);

    })
    .catch((error) => {

        console.log(error);

    });

Output:

Profile failed

Promise.all() rejects when one Promise rejects.

This is called:

Fail-fast

Promise 1 → success
Promise 2 → failure
               ↓
          Promise.all()
               ↓
             reject

When should you use it?

Use Promise.all() when all operations are required.

Example:

Load user
Load permissions
Load account settings

If one required operation fails, you don't want to continue.

10. `Promise.allSettled()`

Promise.allSettled() waits for every Promise to finish, whether it succeeds or fails.

Example:

const p1 = Promise.resolve("User");

const p2 = Promise.reject("Profile failed");

const p3 = Promise.resolve("Posts");

Promise.allSettled([p1, p2, p3])
    .then((results) => {

        console.log(results);

    });

Result:

[
    {
        status: "fulfilled",
        value: "User"
    },
    {
        status: "rejected",
        reason: "Profile failed"
    },
    {
        status: "fulfilled",
        value: "Posts"
    }
]

It doesn't stop because p2 failed.

This is called:

Fail-soft

Promise 1 → success ─┐
Promise 2 → failure ─┤
Promise 3 → success ─┤
                     ↓
              allSettled()
                     ↓
              collect everything

When should you use it?

When each operation is independent.

For example:

Send email to User 1 → success
Send email to User 2 → failure
Send email to User 3 → success

You still want to know the result for every user.

11. `Promise.race()`

Promise.race() returns the result of the first Promise to settle.

Example:

const p1 = new Promise((resolve) => {

    setTimeout(() => {
        resolve("First");
    }, 1000);

});

const p2 = new Promise((resolve) => {

    setTimeout(() => {
        resolve("Second");
    }, 2000);

});

Promise.race([p1, p2])
    .then((result) => {

        console.log(result);

    });

Output:

First

because p1 finished first.

Important

race() cares about settling, not just success.

If the first Promise rejects:

p1 → reject after 1 second
p2 → resolve after 2 seconds

then:

Promise.race()
      ↓
reject

So:

race() = first settled Promise wins.

12. `Promise.any()`

Promise.any() waits for the first fulfilled Promise.

Example:

const p1 = Promise.reject("Server 1 failed");

const p2 = new Promise((resolve) => {

    setTimeout(() => {
        resolve("Server 2");
    }, 1000);

});

const p3 = new Promise((resolve) => {

    setTimeout(() => {
        resolve("Server 3");
    }, 2000);

});

Promise.any([p1, p2, p3])
    .then((result) => {

        console.log(result);

    });

Output:

Server 2

p1 failed, but Promise.any() ignores that rejection and waits for a successful Promise.

13. `race()` vs `any()`

This is important for interviews.

`Promise.race()`

First to settle
     ↓
success OR failure

`Promise.any()`

First to fulfill
     ↓
success only

Example:

P1 → reject in 1 sec
P2 → fulfill in 2 sec

race():

P1 rejects first
↓
race rejects

any():

P1 rejects → ignored
↓
P2 fulfills
↓
any returns P2

14. All four combinators together

Remember this:

Method	Meaning
`Promise.all()`	All must succeed
`Promise.allSettled()`	Everyone must finish
`Promise.race()`	First to settle wins
`Promise.any()`	First success wins

Easy memory trick:

ALL
↓
Everyone succeeds

ALLSETTLED
↓
Everyone finishes

RACE
↓
First result

ANY
↓
First success

15. Generators

Now another concept: Generators.

A generator is a special function that can pause and resume execution.

We declare one using:

function*

Example:

function* numbers() {

    yield 1;
    yield 2;
    yield 3;

}

Create the generator:

const generator = numbers();

Then:

console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());

Output:

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }

16. What does `yield` do?

yield pauses the generator.

function* numbers() {

    yield 1;

    yield 2;

    yield 3;
}

Flow:

next()
 ↓
yield 1
 ↓
pause

next()
 ↓
yield 2
 ↓
pause

next()
 ↓
yield 3
 ↓
pause

next()
 ↓
done

So:

yield produces a value and pauses execution.

17. Iterators

An iterator is an object that provides a next() method.

next() returns:

{
    value: ...,
    done: ...
}

For example:

const generator = numbers();

console.log(generator.next());

gives:

{
    value: 1,
    done: false
}

Generators automatically provide iterator behavior.

18. `for...of`

Instead of manually calling:

generator.next();

we can use:

function* numbers() {

    yield 10;
    yield 20;
    yield 30;

}

for (const number of numbers()) {

    console.log(number);

}

Output:

10
20
30

19. Async Iterators

An async iterator is useful when values become available asynchronously.

We create an async generator using:

async function*

Example:

async function* getData() {

    yield "User";

    await new Promise(resolve => {
        setTimeout(resolve, 1000);
    });

    yield "Profile";

    await new Promise(resolve => {
        setTimeout(resolve, 1000);
    });

    yield "Posts";
}

We consume it using:

async function main() {

    for await (const data of getData()) {

        console.log(data);

    }
}

main();

Output:

User
Profile
Posts

The values are produced asynchronously.

20. `for...of` vs `for await...of`

Normal iterator

for (const value of iterable) {
    console.log(value);
}

Used for synchronous values.

Async iterator

for await (const value of asyncIterable) {
    console.log(value);
}

Used when values may arrive asynchronously.

Remember:

for...of
    ↓
synchronous iteration

for await...of
    ↓
asynchronous iteration

21. Concurrency

Now connect everything to your implementation task.

Suppose you have 10 API calls:

API 1
API 2
API 3
...
API 10

If you run all 10 at once, you have:

10 concurrent operations

Sometimes you want a limit:

Maximum = 3

So only:

API 1
API 2
API 3

run initially.

When one finishes:

API 4

starts.

This is called concurrency limiting.

22. Simple concurrency example

async function runTask(id, time) {

    console.log(`Task ${id} started`);

    await new Promise(resolve => {
        setTimeout(resolve, time);
    });

    console.log(`Task ${id} finished`);
}

If we start everything directly:

runTask(1, 2000);
runTask(2, 1000);
runTask(3, 1500);
runTask(4, 1000);

all four can run concurrently.

A concurrency limiter controls that.

Limit = 2

Task 1 ───────────
Task 2 ─────

Task 3 starts after Task 2 finishes
Task 4 starts when another slot is free

This is exactly what your concurrency-limiter.js task is designed to implement.

23. Complete Week-05 Task 02 picture

Asynchronous JavaScript II
│
├── async/await
│   ├── async
│   └── await
│
├── Error Handling
│   └── try/catch
│
├── Promise Combinators
│   ├── Promise.all()
│   ├── Promise.allSettled()
│   ├── Promise.race()
│   └── Promise.any()
│
├── Fail Strategies
│   ├── all() → fail-fast
│   └── allSettled() → fail-soft
│
├── Generators
│   ├── function*
│   └── yield
│
├── Iterators
│   └── next()
│
├── Async Iterators
│   ├── async function*
│   └── for await...of
│
└── Concurrency
    └── limit simultaneous async tasks

⭐ Most important things to remember

If your mentor asks you quickly:

What is async/await?

"async/await is syntax built on Promises that makes asynchronous code easier to read. async makes a function return a Promise, and await gets the resolved value of a Promise."

What is Promise.all()?

"It waits for all Promises to fulfill and fails fast if one rejects."

What is Promise.allSettled()?

"It waits for all Promises to settle and gives the result of every Promise, whether fulfilled or rejected."

Difference between race() and any()?

"race() returns the first settled Promise, while any() returns the first fulfilled Promise."

What is a generator?

"A generator is a function that can pause with yield and resume with next()."

What is an async iterator?

"An async iterator produces values asynchronously and can be consumed using for await...of."

What is concurrency limiting?

"Concurrency limiting controls how many asynchronous operations can run at the same time, such as allowing only three API calls concurrently."

Custom Promise in JS

Sai Swaroop Bijinapalli — Mon, 10 Aug 2026 11:19:16 +0000

Implementing a Custom Promise from Scratch in JavaScript

Promises are one of the most important features of modern JavaScript. We normally use the built-in Promise object for asynchronous operations, but understanding how a Promise works internally gives us a much deeper understanding of asynchronous JavaScript.

In this project, I implemented a simplified custom Promise class from scratch based on the core ideas of the Promises/A+ specification.

The implementation supports:

Promise states
resolve()
reject()
.then()
.catch()
.finally()
Promise chaining
Error propagation
Thenable resolution
Asynchronous .then() execution
Multiple .then() handlers

I also created a test suite that compares the behavior of the custom Promise with JavaScript's native Promise.

1. Why Build a Promise From Scratch?

Usually, we simply write:

const promise = new Promise((resolve, reject) => {

    resolve("Success");

});

The JavaScript engine handles all the internal Promise behavior for us.

But implementing one ourselves helps us understand:

How Promise states are stored
How resolve() changes the state
How reject() works
How .then() callbacks are stored
How Promise chaining works
How errors propagate
Why .then() executes asynchronously
How returned Promises are adopted
How .catch() and .finally() are implemented

Instead of treating Promise as a black box, we can understand its internal mechanism.

2. Project Structure

I created a simple project:

custom-promise/
│
├── my-promise.js
└── test.js

The responsibilities are:

my-promise.js
    ↓
Promise implementation

test.js
    ↓
Compare custom Promise with native Promise

3. Promise States

The first thing the implementation needs is Promise state management.

A Promise has three states:

              Pending
             /       \
            /         \
      Fulfilled      Rejected

A Promise starts as:

this.state = "pending";

Then it can transition to:

pending → fulfilled

or:

pending → rejected

Once settled, the Promise cannot change its state again.

For example:

resolve("Success");
reject("Failed");

The first settlement wins.

4. Creating the Custom Promise Class

The basic structure is:

class MyPromise {

    constructor(executor) {

        this.state = "pending";
        this.value = undefined;
        this.reason = undefined;

    }

}

We store three important pieces of information:

this.state
this.value
this.reason

For example, after:

resolve("Hello");

the Promise contains:

state = fulfilled
value = "Hello"

After:

reject("Error");

it contains:

state = rejected
reason = "Error"

5. Implementing `resolve()` and `reject()`

The executor function receives:

(resolve, reject)

So we implement these functions ourselves.

const resolve = (value) => {
    fulfill(value);
};

const reject = (reason) => {
    rejectInternal(reason);
};

The fulfillment function:

const fulfill = (value) => {

    if (this.state !== "pending") {
        return;
    }

    this.state = "fulfilled";
    this.value = value;

};

The rejection function:

const rejectInternal = (reason) => {

    if (this.state !== "pending") {
        return;
    }

    this.state = "rejected";
    this.reason = reason;

};

The check:

if (this.state !== "pending") {
    return;
}

ensures that a Promise settles only once.

6. Storing `.then()` Callbacks

Consider:

const promise = new MyPromise((resolve) => {

    setTimeout(() => {
        resolve("Done");
    }, 2000);

});

promise.then(value => {
    console.log(value);
});

The Promise is initially pending.

The .then() callback needs to wait until the Promise is fulfilled.

Therefore, we store callbacks in arrays:

this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];

When .then() is called while the Promise is pending:

Pending

onFulfilledCallbacks
        ↓
   [callback]

When resolve() is eventually called, the stored callback can be executed.

7. Making `.then()` Asynchronous

Native Promise callbacks don't execute immediately.

For example:

const promise = MyPromise.resolve("Hello");

console.log("A");

promise.then(() => {
    console.log("B");
});

console.log("C");

The expected output is:

A
C
B

Therefore, the implementation uses:

queueMicrotask(callback);

Instead of executing the callback immediately, it schedules it as a microtask.

This makes the custom Promise behave more like a native Promise.

8. Implementing `.then()`

The most important method is .then().

Its basic structure is:

then(onFulfilled, onRejected) {

    const child = new MyPromise((resolve, reject) => {

        // handle parent Promise

    });

    return child;
}

The important part is:

return child;

Why?

Because every .then() creates a new Promise.

For example:

promise
    .then(...)
    .then(...)
    .then(...);

Conceptually:

Promise A
    ↓
  .then()
    ↓
Promise B
    ↓
  .then()
    ↓
Promise C

This is what makes Promise chaining possible.

9. Handling Fulfilled Promises

When the parent Promise is fulfilled:

const handleFulfilled = () => {

    try {

        const result = onFulfilled(parent.value);

        resolve(result);

    } catch (error) {

        reject(error);

    }
};

The resolved value is passed to the callback:

onFulfilled(parent.value)

For example:

MyPromise.resolve(10)
    .then(value => {
        return value * 2;
    });

The callback receives:

value = 10

It returns:

The child Promise is then resolved with 20.

10. Handling Rejected Promises

If the parent Promise is rejected:

const handleRejected = () => {

    try {

        if (typeof onRejected !== "function") {

            reject(parent.reason);
            return;

        }

        const result = onRejected(parent.reason);

        resolve(result);

    } catch (error) {

        reject(error);

    }
};

This allows:

MyPromise.reject("Network error")
    .catch(error => {
        console.log(error);
    });

to handle the rejection.

11. Promise Chaining

Promise chaining depends on .then() returning a new Promise.

Consider:

MyPromise.resolve(10)

    .then(value => {

        return value * 2;

    })

    .then(value => {

        return value + 5;

    })

    .then(value => {

        console.log(value);

    });

The flow is:

The important rule is:

The value returned from one .then() becomes the input to the next .then().

Internally:

const result = onFulfilled(parent.value);

resolve(result);

The returned value resolves the child Promise.

12. Handling Returned Promises

Consider a more complicated example:

MyPromise.resolve(10)

    .then(value => {

        return new MyPromise(resolve => {

            setTimeout(() => {
                resolve(value * 2);
            }, 1000);

        });

    })

    .then(value => {

        console.log(value);

    });

The first .then() returns another Promise.

Therefore, our custom Promise must understand when a resolved value is itself a Promise or Promise-like object.

This is called Promise resolution or thenable assimilation.

13. Thenables

A thenable is an object containing a .then() method.

Example:

const thenable = {

    then(resolve) {
        resolve("Hello");
    }

};

Our Promise needs to recognize this:

if (
    value !== null &&
    (typeof value === "object" ||
     typeof value === "function")
) {

Then we check:

const then = value.then;

If it is a function, we call it and adopt its result.

This allows:

MyPromise.resolve(thenable)
    .then(value => {
        console.log(value);
    });

to produce:

Hello

14. Self-Resolution Protection

A Promise should not resolve with itself.

For example:

let promise;

promise = new MyPromise(resolve => {

    resolve(promise);

});

This would create a circular situation.

Therefore, the implementation checks:

if (value === this) {

    rejectInternal(
        new TypeError("Promise cannot resolve itself")
    );

    return;
}

This prevents infinite resolution.

15. Protecting Against Multiple Resolution

A thenable could theoretically call both callbacks:

const badThenable = {

    then(resolve, reject) {

        resolve("First");

        reject("Second");

        resolve("Third");

    }

};

A Promise must settle only once.

So we use:

let called = false;

Then:

if (called) {
    return;
}

called = true;

The result becomes:

First → accepted
Second → ignored
Third → ignored

This follows the Promise settlement rule.

16. Error Propagation

Errors inside .then() must reject the next Promise.

Example:

MyPromise.resolve(10)

    .then(() => {

        throw new Error("Something went wrong");

    })

    .then(() => {

        console.log("This will not execute");

    })

    .catch(error => {

        console.log(error.message);

    });

Output:

Something went wrong

Internally, .then() uses try...catch:

try {

    const result = onFulfilled(parent.value);

    resolve(result);

} catch (error) {

    reject(error);

}

So the flow becomes:

throw Error
     ↓
catch(error)
     ↓
reject(error)
     ↓
next .then() skipped
     ↓
.catch()

This is called error propagation.

17. Implementing `.catch()`

.catch() can be implemented using .then():

catch(onRejected) {

    return this.then(undefined, onRejected);

}

This works because .then() already accepts two callbacks:

then(onFulfilled, onRejected)

Therefore:

promise.catch(handler);

is essentially:

promise.then(undefined, handler);

18. Implementing `.finally()`

.finally() should run regardless of whether the Promise succeeds or fails.

The implementation:

finally(onFinally) {

    return this.then(

        (value) => {

            return MyPromise.resolve(onFinally())
                .then(() => value);

        },

        (reason) => {

            return MyPromise.resolve(onFinally())
                .then(() => {
                    throw reason;
                });

        }

    );
}

The important behavior is:

Success
   ↓
finally()
   ↓
original value continues


Failure
   ↓
finally()
   ↓
original error continues

For example:

MyPromise.resolve("Success")
    .finally(() => {
        console.log("Cleanup");
    })
    .then(value => {
        console.log(value);
    });

Output:

Cleanup
Success

19. Static `resolve()` and `reject()`

To make the custom class easier to use, I also implemented:

MyPromise.resolve()
MyPromise.reject()

`resolve()`

static resolve(value) {

    if (value instanceof MyPromise) {
        return value;
    }

    return new MyPromise((resolve) => {
        resolve(value);
    });
}

Usage:

MyPromise.resolve("Hello");

`reject()`

static reject(reason) {

    return new MyPromise((resolve, reject) => {
        reject(reason);
    });
}

Usage:

MyPromise.reject("Failed");

20. Testing Against Native Promise

Implementing a custom Promise isn't enough. We need to verify its behavior.

I created a test suite that executes the same scenarios using:

MyPromise

and:

Promise

Then their results are compared.

For example:

MyPromise.resolve(10)
    .then(value => value * 2);

is compared with:

Promise.resolve(10)
    .then(value => value * 2);

Both should produce:

21. Basic Resolve Test

compare(
    "Basic resolve",

    MyPromise.resolve("Hello"),

    Promise.resolve("Hello")
);

Expected:

✅ Basic resolve

22. Rejection Test

compare(
    "Basic rejection",

    MyPromise.reject("Error")
        .catch(error => error),

    Promise.reject("Error")
        .catch(error => error)
);

Both should produce:

Error

23. Chaining Test

compare(
    "then chaining",

    MyPromise.resolve(10)
        .then(value => value * 2)
        .then(value => value + 5),

    Promise.resolve(10)
        .then(value => value * 2)
        .then(value => value + 5)
);

Expected:

24. Error Propagation Test

compare(
    "Error propagation",

    MyPromise.resolve(10)
        .then(() => {
            throw new Error("Boom");
        })
        .catch(error => error.message),

    Promise.resolve(10)
        .then(() => {
            throw new Error("Boom");
        })
        .catch(error => error.message)
);

Both should produce:

Boom

25. Thenable Test

compare(
    "Thenable resolution",

    MyPromise.resolve({
        then(resolve) {
            resolve("Thenable");
        }
    }),

    Promise.resolve({
        then(resolve) {
            resolve("Thenable");
        }
    })
);

Expected:

Thenable

26. Async Behavior Test

Native Promise .then() callbacks execute asynchronously.

Therefore, the custom implementation should behave the same way.

const order = [];

MyPromise.resolve("Done")
    .then(() => {
        order.push("then");
    });

order.push("sync");

The expected order is:

sync
then

not:

then
sync

This verifies that queueMicrotask() is being used correctly.

27. Final Test Results

After running:

node test.js

the test suite should report results similar to:

✅ Basic resolve
✅ Basic rejection
✅ then chaining
✅ Error propagation
✅ finally
✅ Returned Promise
✅ Thenable resolution

This shows that the custom implementation behaves similarly to native Promises for the scenarios covered by the test suite.

28. What I Learned From This Implementation

Implementing a Promise from scratch helped me understand that a Promise is more than just an object containing a value.

The implementation needs to manage:

Promise State
     ↓
Callbacks
     ↓
Resolution
     ↓
Chaining
     ↓
Error Propagation
     ↓
Asynchronous Execution

The most important concepts I learned were:

Promise state management

pending → fulfilled
pending → rejected

Resolution

resolve(value)

doesn't simply assign a value. It may need to handle another Promise or thenable.

Chaining

.then()
   ↓
new Promise
   ↓
.then()

Error propagation

throw
 ↓
reject
 ↓
.catch()

Asynchronous execution

.then()
 ↓
Microtask Queue
 ↓
Callback execution

Conclusion

Building a custom Promise from scratch is a useful exercise for understanding asynchronous JavaScript at a deeper level.

The final implementation supports the core Promise behavior required for this project:

              MyPromise
                  |
        ┌─────────┼─────────┐
        ↓         ↓         ↓
     Pending   Fulfilled  Rejected
        |         |          |
        |       .then()    .catch()
        |         |
        |      chaining
        |         |
        └─────────┼─────────┘
                  ↓
              .finally()

The biggest takeaway is that Promise chaining works because each .then() creates and returns a new Promise, while the resolution procedure determines whether that new Promise should fulfill with a normal value or adopt the state of another Promise/thenable.

Comparing the implementation with native Promise also provides a practical way to verify whether the custom implementation behaves correctly.

This project transformed Promises from something I simply used into something I could understand and implement at a fundamental level.

About Promises in JS

Sai Swaroop Bijinapalli — Mon, 10 Aug 2026 10:38:55 +0000

Perfect. Here is a ready-to-publish beginner-friendly blog that starts from Promises and gradually covers all the concepts you studied.

Asynchronous JavaScript: Understanding Promises, Chaining, Error Handling, and Separation of Concerns

JavaScript is often described as a single-threaded programming language. This means JavaScript executes one piece of code at a time. But modern applications constantly perform operations that take time, such as API requests, database operations, file handling, and timers.

If JavaScript waited for every operation to finish before continuing, applications would become slow and unresponsive.

This is where asynchronous JavaScript comes into the picture.

One of the most important tools for handling asynchronous operations is the Promise.

In this blog, we will understand Promises from the basics and gradually explore:

What a Promise is
resolve() and reject()
Promise states
.then()
.catch()
.finally()
Promise chaining
Error propagation
Callback Hell
Separation of concerns
Async orchestration vs business logic

1. What Is a Promise?

A Promise is an object that represents the eventual result of an asynchronous operation.

The result may be:

Successful
Failed
Still in progress

For example, imagine ordering food online.

Initially:

Order placed
     ↓
   Waiting

Eventually, one of two things happens:

Order placed
     ↓
   Waiting
    /    \
   /      \
Delivered  Cancelled

A Promise works similarly.

              Promise
                 |
              Pending
             /       \
            /         \
     Fulfilled       Rejected

A Promise doesn't immediately give you the final result. Instead, it gives you a way to handle the result when it becomes available.

2. Creating a Promise

A Promise is created using the Promise constructor.

const promise = new Promise((resolve, reject) => {

    // asynchronous operation

});

The Promise constructor receives a function with two parameters:

(resolve, reject) => {

}

These two functions are provided by JavaScript.

resolve() → tells the Promise that the operation succeeded.
reject() → tells the Promise that the operation failed.

3. Why Do We Use `resolve()`?

resolve() is used when an asynchronous operation completes successfully.

const promise = new Promise((resolve, reject) => {

    resolve("Operation successful");

});

When resolve() is called:

Pending
   ↓
Fulfilled

The value passed to resolve() becomes the result of the Promise.

Here:

resolve("Operation successful");

means:

"The operation was successful, and this is the result."

4. Why Do We Use `reject()`?

reject() is used when the asynchronous operation fails.

const promise = new Promise((resolve, reject) => {

    reject("Operation failed");

});

The Promise changes from:

Pending
   ↓
Rejected

The value passed to reject() represents the reason for the failure.

5. Promise States

A Promise has three states.

Pending

The operation is still in progress.

const promise = new Promise((resolve, reject) => {

    // still running

});

State:

Pending

Fulfilled

The operation completed successfully.

const promise = new Promise((resolve, reject) => {

    resolve("Success");

});

State transition:

Pending → Fulfilled

Rejected

The operation failed.

const promise = new Promise((resolve, reject) => {

    reject("Failed");

});

State transition:

Pending → Rejected

A Promise can settle only once.

For example:

const promise = new Promise((resolve, reject) => {

    resolve("Success");
    reject("Failed");

});

The first settlement wins.

The Promise becomes fulfilled with:

Success

The later reject() has no effect.

6. Using `.then()`

Once a Promise is fulfilled, we can use .then() to handle the successful result.

const promise = new Promise((resolve, reject) => {

    resolve("Login successful");

});

promise.then((result) => {

    console.log(result);

});

Output:

Login successful

The important connection is:

resolve("Login successful");

passes the value to:

.then((result) => {
    console.log(result);
});

So:

resolve("Login successful")
              ↓
       result = "Login successful"
              ↓
            .then()

7. Promise with `setTimeout()`

Let's make the operation asynchronous.

const promise = new Promise((resolve, reject) => {

    setTimeout(() => {

        resolve("Data received");

    }, 2000);

});

promise.then((data) => {

    console.log(data);

});

What happens?

Step 1

The Promise starts in the pending state.

Pending

Step 2

setTimeout() starts a two-second timer.

The Promise is still pending.

Step 3

.then() waits for the Promise to become fulfilled.

Step 4

After two seconds:

resolve("Data received");

runs.

The state changes:

Pending → Fulfilled

Step 5

The .then() callback executes.

Output:

Data received

This is why we often see resolve() inside a setTimeout() when learning Promises.

setTimeout() provides the delay, while resolve() tells the Promise:

"The asynchronous operation has now completed successfully."

8. Using `.catch()`

.catch() is used to handle a rejected Promise.

const promise = new Promise((resolve, reject) => {

    reject("Login failed");

});

promise.catch((error) => {

    console.log(error);

});

Output:

Login failed

The flow is:

reject()
   ↓
Rejected
   ↓
.catch()

A common pattern is:

promise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

Here:

.then() handles success.
.catch() handles failure.

9. Using `.finally()`

Sometimes we need some code to run regardless of whether the Promise succeeds or fails.

That's where .finally() is useful.

Promise.resolve("Success")

    .then((result) => {

        console.log(result);

    })

    .finally(() => {

        console.log("Operation finished");

    });

Output:

Success
Operation finished

If the Promise is rejected:

Promise.reject("Failed")

    .catch((error) => {

        console.log(error);

    })

    .finally(() => {

        console.log("Operation finished");

    });

Output:

Failed
Operation finished

A common use case is a loading indicator:

showLoading();

fetchData()

    .then((data) => {
        console.log(data);
    })

    .catch((error) => {
        console.log(error);
    })

    .finally(() => {
        hideLoading();
    });

Whether the request succeeds or fails, the loading indicator should disappear.

10. Promise Chaining

One of the biggest advantages of Promises is chaining.

Suppose we need to perform these operations:

Get User
   ↓
Get Profile
   ↓
Get Posts
   ↓
Display Posts

With Promises:

getUser()

    .then((user) => {

        return getProfile(user.id);

    })

    .then((profile) => {

        return getPosts(profile.id);

    })

    .then((posts) => {

        console.log(posts);

    })

    .catch((error) => {

        console.log(error);

    });

This is called Promise chaining.

11. How Does Promise Chaining Work?

Consider this example:

Promise.resolve(10)

    .then((value) => {

        console.log(value);

        return value * 2;

    })

    .then((value) => {

        console.log(value);

        return value + 5;

    })

    .then((value) => {

        console.log(value);

    });

Output:

10
20
25

Why?

The first Promise contains:

The first .then() receives:

value = 10

It returns:

return value * 2;

which produces:

The next .then() receives 20.

It returns:

The final .then() receives 25.

Therefore:

The important rule is:

The value returned from one .then() becomes the value received by the next .then().

12. Callback Hell

Before Promises became widely used, asynchronous operations were commonly handled using callbacks.

Suppose we need:

Login
 ↓
Get User
 ↓
Get Posts
 ↓
Get Comments

Using callbacks:

loginUser(function(user) {

    getUser(user.id, function(userData) {

        getPosts(userData.id, function(posts) {

            getComments(posts[0].id, function(comments) {

                console.log(comments);

            });

        });

    });

});

Notice how the functions become deeply nested.

This is commonly called Callback Hell.

The structure starts looking like:

loginUser
   └── getUser
        └── getPosts
             └── getComments

As the application grows, this can become difficult to:

Read
Debug
Maintain
Handle errors in

Promises provide a flatter structure:

loginUser()

    .then(getUser)
    .then(getPosts)
    .then(getComments)

    .then((comments) => {
        console.log(comments);
    })

    .catch((error) => {
        console.log(error);
    });

13. Error Propagation

Another important Promise feature is error propagation.

Consider:

Promise.resolve(10)

    .then((value) => {

        console.log(value);

        throw new Error("Something went wrong");

    })

    .then(() => {

        console.log("This will not execute");

    })

    .catch((error) => {

        console.log(error.message);

    });

Output:

10
Something went wrong

What happened?

The first .then() executed:

console.log(value);

So we get:

Then an error was thrown:

throw new Error("Something went wrong");

The Promise chain now becomes rejected.

The next .then() is skipped:

.then(() => {
    console.log("This will not execute");
})

The error moves to .catch():

.catch((error) => {
    console.log(error.message);
});

So the flow is:

.then()
   ↓
Error occurs
   ↓
Promise becomes rejected
   ↓
Skip remaining .then()
   ↓
.catch()

This movement of an error through the Promise chain is called error propagation.

14. Errors Can Happen Anywhere in the Chain

Promise.resolve("Start")

    .then((value) => {

        console.log(value);

        return "Step 1";

    })

    .then((value) => {

        console.log(value);

        throw new Error("Step 2 failed");

    })

    .then((value) => {

        console.log("Step 3");

    })

    .catch((error) => {

        console.log("Error:", error.message);

    });

Output:

Start
Step 1
Error: Step 2 failed

Step 3 isn't executed because the previous .then() produced an error.

The error automatically propagates to .catch().

15. Separation of Concerns

As applications become larger, another important concept becomes necessary:

Separation of Concerns.

The basic idea is:

Each function should have a clear responsibility.

When working with asynchronous JavaScript, it is useful to separate:

Async orchestration
Business logic

16. What Is Async Orchestration?

Async orchestration is about controlling when and in what order asynchronous operations happen.

For example:

Get User
   ↓
Get Orders
   ↓
Calculate Total
   ↓
Return Result

The orchestration controls this sequence.

Example:

async function getUserTotal() {

    const user = await getUser();

    const orders = await getOrders(user.id);

    const total = calculateTotal(orders);

    return total;
}

Here:

const user = await getUser();

and:

const orders = await getOrders(user.id);

are part of async orchestration.

They determine the order of asynchronous operations.

17. What Is Business Logic?

Business logic contains the actual rules of the application.

For example:

function calculateTotal(orders) {

    let total = 0;

    for (const order of orders) {

        if (order.status === "completed") {
            total += order.price;
        }

    }

    if (total > 10000) {
        total = total * 0.9;
    }

    return total;
}

This function doesn't care about:

Promises
APIs
fetch()
setTimeout()
async/await

It only knows:

"Given a list of orders, calculate the total according to the application's rules."

That's business logic.

18. Separating Async Orchestration and Business Logic

Instead of mixing everything:

function getUserTotal() {

    return fetch("/user")
        .then(response => response.json())
        .then(user => {

            return fetch("/orders/" + user.id);

        })
        .then(response => response.json())
        .then(orders => {

            let total = 0;

            for (const order of orders) {

                if (order.status === "completed") {
                    total += order.price;
                }

            }

            return total;

        });
}

We can separate the responsibilities.

Data retrieval

function getUser() {

    return fetch("/user")
        .then(response => response.json());

}

Data retrieval

function getOrders(userId) {

    return fetch("/orders/" + userId)
        .then(response => response.json());

}

Business logic

function calculateTotal(orders) {

    let total = 0;

    for (const order of orders) {

        if (order.status === "completed") {
            total += order.price;
        }

    }

    if (total > 10000) {
        total *= 0.9;
    }

    return total;
}

Async orchestration

async function getUserTotal() {

    const user = await getUser();

    const orders = await getOrders(user.id);

    return calculateTotal(orders);

}

Now each function has a clear responsibility.

19. Why Is This Separation Useful?

Easier Testing

We can test the business logic independently.

const orders = [
    { status: "completed", price: 5000 },
    { status: "completed", price: 7000 },
    { status: "cancelled", price: 3000 }
];

console.log(calculateTotal(orders));

No API request is required.

Easier Maintenance

Suppose the discount changes from 10% to 20%.

You only modify:

if (total > 10000) {
    total *= 0.8;
}

The API/orchestration code doesn't need to change.

Better Reusability

The calculateTotal() function can be used by:

Customer website
Admin dashboard
Reports
Mobile application

because it doesn't depend on a particular API or UI.

20. Async Orchestration vs Business Logic

A simple way to remember the difference is:

Async Orchestration asks:

When should this operation happen?

Example:

const user = await getUser();
const orders = await getOrders(user.id);
const total = calculateTotal(orders);

It controls the sequence.

Business Logic asks:

What should we do with the data?

Example:

function calculateTotal(orders) {

    // application rules

}

It contains the rules.

21. Complete Flow

Putting everything together:

                USER REQUEST
                     |
                     ↓
            Async Orchestration
                     |
                     ↓
                getUser()
                     |
                     ↓
              getOrders()
                     |
                     ↓
              Business Logic
                     |
                     ↓
            calculateTotal()
                     |
                     ↓
                  Result

The responsibilities are separated.

22. Promises: The Complete Picture

All the concepts we discussed are connected:

                       Promise
                          |
                       Pending
                      /       \
                     /         \
              resolve()       reject()
                  ↓               ↓
             Fulfilled         Rejected
                  |               |
                  ↓               ↓
               .then()         .catch()
                  |
            return value
                  |
                  ↓
             next .then()
                  |
               error
                  |
                  ↓
               .catch()
                  |
                  ↓
             .finally()

And Promise chaining helps avoid deeply nested Callback Hell.

23. Quick Summary

Concept	Meaning
Promise	Represents the future result of an asynchronous operation
Pending	Operation is still in progress
Fulfilled	Operation completed successfully
Rejected	Operation failed
`resolve()`	Marks the Promise as fulfilled
`reject()`	Marks the Promise as rejected
`.then()`	Handles successful results
`.catch()`	Handles errors/rejections
`.finally()`	Runs regardless of success or failure
Promise chaining	Passes results from one `.then()` to the next
Error propagation	Errors move through the chain until handled by `.catch()`
Callback Hell	Deeply nested asynchronous callbacks
Async orchestration	Controls the order of asynchronous operations
Business logic	Contains the actual rules of the application

Conclusion

Promises provide a structured way to work with asynchronous operations in JavaScript.

Instead of deeply nested callbacks, we can use Promise chains:

getUser()
    .then(getOrders)
    .then(calculateTotal)
    .catch(handleError)
    .finally(cleanup);

The most important concepts to remember are:

resolve()  → Success → Fulfilled → .then()

reject()   → Failure → Rejected → .catch()

return     → Next .then()

throw      → Error → .catch()

finally    → Runs regardless of outcome

And as applications grow, Separation of Concerns becomes equally important:

Async orchestration → controls the sequence

Business logic → contains the application rules

JS Functional Programming Concepts

Sai Swaroop Bijinapalli — Tue, 04 Aug 2026 05:01:53 +0000

For your Week-04 Task-2, your mentor expects you to understand the Functional Programming concepts first and then implement the utility library (curry(), compose(), pipe(), deepFreeze()). Below are the concepts with clear definitions and examples.

Week-04 Task-2: Functional Programming Concepts

1. Functional Programming (FP)

Definition

Functional Programming is a programming paradigm where programs are built using functions. It focuses on pure functions, immutable data, avoiding side effects, and using functions as values.

Example

function add(a, b) {
    return a + b;
}

console.log(add(10, 20)); // 30

Here, the program is built around functions.

2. Pure Function

Definition

A pure function always returns the same output for the same input and does not modify external data or produce side effects.

Example

function multiply(a, b) {
    return a * b;
}

console.log(multiply(2, 5)); // 10
console.log(multiply(2, 5)); // 10

The output is always the same.

Not a Pure Function

let count = 0;

function increment() {
    count++;
    return count;
}

Output:

1
2
3

The output changes because it depends on external state.

3. Immutability

Definition

Immutability means data should not be modified after it is created. Instead of changing existing data, create a new copy with the changes.

Mutable Example

let user = {
    name: "Sai"
};

user.name = "Rahul";

console.log(user);

Output

{ name: "Rahul" }

The original object was changed.

Immutable Example

let user = {
    name: "Sai"
};

let updatedUser = {
    ...user,
    name: "Rahul"
};

console.log(user);
console.log(updatedUser);

Output

{ name: "Sai" }

{ name: "Rahul" }

The original object is unchanged.

4. Higher-Order Function (HOF)

Definition

A Higher-Order Function is a function that takes another function as an argument or returns another function.

Example

function greet(name) {
    return "Hello " + name;
}

function process(fn, value) {
    console.log(fn(value));
}

process(greet, "Sai");

Output

Hello Sai

process() receives another function (greet) as an argument.

Built-in Higher-Order Functions

map()
filter()
reduce()
forEach()

5. map()

Definition

map() creates a new array by applying a function to every element of the original array.

Example

const numbers = [1, 2, 3, 4];

const squares = numbers.map(num => num * num);

console.log(squares);

Output

[1, 4, 9, 16]

The original array is not changed.

6. filter()

Definition

filter() creates a new array containing only the elements that satisfy a condition.

Example

const numbers = [1, 2, 3, 4, 5, 6];

const even = numbers.filter(num => num % 2 === 0);

console.log(even);

Output

[2, 4, 6]

7. reduce()

Definition

reduce() reduces an array into a single value by repeatedly combining elements.

Example

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum);

Output

Explanation:

8. Currying

Definition

Currying is the process of converting a function that takes multiple arguments into a sequence of functions that each take one argument.

Normal Function

function add(a, b, c) {
    return a + b + c;
}

console.log(add(10, 20, 30));

Output

Curried Function

function add(a) {
    return function (b) {
        return function (c) {
            return a + b + c;
        };
    };
}

console.log(add(10)(20)(30));

Output

9. Composition

Definition

Function composition combines multiple functions into a single function, where the output of one function becomes the input of the next.

Example

function double(x) {
    return x * 2;
}

function square(x) {
    return x * x;
}

console.log(square(double(5)));

Output

10. compose()

Definition

compose() executes functions from right to left.

Example

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const square = x => x * x;

console.log(compose(square, double)(5));

Execution

double(5)

↓

10

↓

square(10)

↓

100

11. pipe()

Definition

pipe() executes functions from left to right.

Example

const pipe = (f, g) => x => g(f(x));

const double = x => x * 2;
const square = x => x * x;

console.log(pipe(double, square)(5));

Execution

double(5)

↓

10

↓

square(10)

↓

100

Difference Between compose() and pipe()

compose()	pipe()
Right → Left	Left → Right
`compose(square, double)(5)`	`pipe(double, square)(5)`
`square(double(5))`	`square(double(5))`

Both produce the same result if the functions are arranged appropriately, but the direction of execution is different.

12. Referential Transparency

Definition

An expression is referentially transparent if it can be replaced by its value without changing the program's behavior.

Example

function add(a, b) {
    return a + b;
}

console.log(add(2, 3));

You can replace:

add(2, 3)

with:

and the program behaves the same.

13. Side Effects

Definition

A side effect is any operation that changes something outside the function, such as modifying a variable, updating the DOM, making an API call, writing to a file, or printing to the console.

Example

let total = 0;

function add(value) {
    total += value;
}

The function changes external state (total), so it has a side effect.

14. Side-Effect Isolation

Definition

Side-effect isolation means keeping impure operations separate from pure business logic.

Example

function calculateTotal(price, tax) {
    return price + tax;
}

const total = calculateTotal(100, 18);
console.log(total);

calculateTotal() is pure.
console.log() is the side effect.

Keeping them separate makes the code easier to test and maintain.

15. deepFreeze()

Definition

deepFreeze() recursively freezes an object and all of its nested objects, making them immutable.

Example

const user = {
    name: "Sai",
    address: {
        city: "Bangalore"
    }
};

deepFreeze(user);

// These changes will fail (or throw in strict mode)
user.name = "Rahul";
user.address.city = "Hyderabad";

The object remains unchanged.

Summary

Concept	One-Line Definition
Functional Programming	Programming using functions, pure logic, and immutable data.
Pure Function	Same input → Same output, no side effects.
Immutability	Never modify existing data; create new data instead.
Higher-Order Function	Takes or returns another function.
`map()`	Transforms every element into a new array.
`filter()`	Returns only elements matching a condition.
`reduce()`	Combines an array into a single value.
Currying	Converts a multi-argument function into a chain of single-argument functions.
Composition	Combines multiple functions together.
`compose()`	Executes functions from right to left.
`pipe()`	Executes functions from left to right.
Referential Transparency	Replace an expression with its value without changing behavior.
Side Effect	Any change outside the function.
Side-Effect Isolation	Keep pure logic separate from side effects.
`deepFreeze()`	Recursively freezes an object to make it immutable.

About Prototype-Chain

Sai Swaroop Bijinapalli — Thu, 30 Jul 2026 10:18:42 +0000

Object-Oriented JavaScript (OOP): A Complete Guide with Examples

Introduction

Object-Oriented Programming (OOP) is one of the most popular programming paradigms used to organize code into objects. An object contains data (properties) and behavior (methods).

JavaScript is a prototype-based object-oriented language. Unlike Java or C++, which use class-based inheritance, JavaScript uses prototypes to inherit properties and methods. However, since ES6, JavaScript introduced the class syntax, making OOP easier to read and write.

Learning OOP in JavaScript helps you write code that is:

Reusable
Modular
Easy to maintain
Easy to extend
Easier to understand in large applications

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is a programming style where we represent real-world entities as objects.

An object contains:

Properties (State) → Information about the object
Methods (Behavior) → Actions the object can perform

For example, consider a Car.

Car

Properties
-----------
Brand
Color
Speed

Methods
-----------
Start()
Stop()
Accelerate()
Brake()

In JavaScript, we can represent it like this:

```javascript id="lmn421"
const car = {
brand: "Tesla",
color: "Black",
speed: 0,

start() {
    console.log("Car Started");
},

accelerate() {
    this.speed += 20;
    console.log(this.speed);
}

};

car.start();
car.accelerate();




Output



```id="n2sk7h"
Car Started
20

Here:

brand, color, and speed are properties.
start() and accelerate() are methods.

Why Do We Need OOP?

Imagine creating 100 students.

Without OOP:

```javascript id="5t0nqk"
const student1 = {
name: "Sai",
age: 20
};

const student2 = {
name: "Ram",
age: 21
};

const student3 = {
name: "John",
age: 22
};




You would repeat the same structure many times.

Instead, OOP allows you to create a blueprint.

---

# Constructor Function

Before ES6 classes, JavaScript used constructor functions.



```javascript id="z73mbe"
function Student(name, age) {
    this.name = name;
    this.age = age;
}

const s1 = new Student("Sai", 20);
const s2 = new Student("Ram", 21);

console.log(s1);
console.log(s2);

Output

Student { name: "Sai", age: 20 }

Student { name: "Ram", age: 21 }

The constructor acts as a blueprint for creating multiple objects.

ES6 Classes

JavaScript introduced classes in ES6.

```javascript id="9k2m8c"
class Student {

constructor(name, age) {
    this.name = name;
    this.age = age;
}

study() {
    console.log(this.name + " is studying");
}

}

const s1 = new Student("Sai", 20);

s1.study();




Output



```id="gl6x5y"
Sai is studying

Although this looks like Java or C++, classes internally use JavaScript's prototype system.

Four Pillars of OOP

Object-Oriented Programming is based on four major principles:

Object-Oriented Programming

        │

 ┌──────┼────────┐
 │      │        │
 ▼      ▼        ▼
Encapsulation
Inheritance
Polymorphism
Abstraction

Let's understand each one.

1. Encapsulation

What is Encapsulation?

Encapsulation means keeping data and the methods that operate on that data together inside one object, while also controlling access to that data.

Think of a bank account.

Bank Account

Balance

Deposit()

Withdraw()

GetBalance()

Users should not directly change the balance.

Instead, they should use methods like deposit() or withdraw().

Example Using Private Fields

```javascript id="9wv9d8"
class BankAccount {

#balance = 0;

deposit(amount) {
    this.#balance += amount;
}

withdraw(amount) {
    this.#balance -= amount;
}

getBalance() {
    return this.#balance;
}

}

const account = new BankAccount();

account.deposit(1000);
account.withdraw(200);

console.log(account.getBalance());




Output



```id="z3pygk"
800

Trying this:

```javascript id="dn3x1x"
console.log(account.#balance);




Results in an error because `#balance` is private.

Benefits:

* Protects data
* Prevents accidental modification
* Improves security

---

# 2. Inheritance

## What is Inheritance?

Inheritance allows one class to acquire the properties and methods of another class.

Real-life example:



```id="elz6vy"
Animal

eat()

sleep()

      ▲

      │

Dog

bark()

The Dog class automatically gets the methods of Animal.

Example

```javascript id="l5v0qo"
class Animal {

eat() {
    console.log("Eating");
}

}

class Dog extends Animal {

bark() {
    console.log("Barking");
}

}

const dog = new Dog();

dog.eat();
dog.bark();




Output



```id="v7h7ew"
Eating

Barking

Inheritance avoids code duplication.

Using super()

The super keyword calls the parent class constructor.

```javascript id="klyp92"
class Animal {

constructor(name) {
    this.name = name;
}

}

class Dog extends Animal {

constructor(name, breed) {
    super(name);
    this.breed = breed;
}

}

const dog = new Dog("Tom", "Labrador");

console.log(dog);




Output



```id="tht91x"
Dog {

name: "Tom",

breed: "Labrador"

}

3. Polymorphism

What is Polymorphism?

Polymorphism means one interface, many forms.

Different objects can implement the same method differently.

Example

```javascript id="e8iqcx"
class Animal {

speak() {
    console.log("Animal Sound");
}

}

class Dog extends Animal {

speak() {
    console.log("Bark");
}

}

class Cat extends Animal {

speak() {
    console.log("Meow");
}

}

const dog = new Dog();
const cat = new Cat();

dog.speak();
cat.speak();




Output



```id="t9hvo8"
Bark

Meow

Both classes have a speak() method, but each behaves differently.

This is method overriding, one of the most common forms of polymorphism.

4. Abstraction

What is Abstraction?

Abstraction means showing only essential features while hiding internal implementation details.

Example:

When driving a car, you use the steering wheel, accelerator, and brake. You don't need to know how the engine or transmission works internally.

Example

```javascript id="b9u74f"
class CoffeeMachine {

makeCoffee() {
    this.#boilWater();
    console.log("Coffee Ready");
}

#boilWater() {
    console.log("Boiling Water...");
}

}

const machine = new CoffeeMachine();

machine.makeCoffee();




Output



```id="yb3poh"
Boiling Water...

Coffee Ready

Users only call makeCoffee(). The internal boiling process is hidden.

Prototype-Based OOP

Even though JavaScript has classes, everything is still based on prototypes.

```javascript id="fxz6eh"
class Person {

constructor(name) {
    this.name = name;
}

greet() {
    console.log("Hello");
}

}




Internally, JavaScript creates:



```javascript id="sx6uyj"
function Person(name) {
    this.name = name;
}

Person.prototype.greet = function () {
    console.log("Hello");
};

This is why JavaScript is called a prototype-based language.

Object Relationships

Student Object

name

age

study()

        │

        ▼

Student.prototype

study()

        │

        ▼

Object.prototype

toString()

hasOwnProperty()

valueOf()

        │

        ▼

null

Class Example

```javascript id="z93vrl"
class Employee {

constructor(name, salary) {
    this.name = name;
    this.salary = salary;
}

display() {
    console.log(this.name, this.salary);
}

}

const emp1 = new Employee("Sai", 50000);
const emp2 = new Employee("Ram", 70000);

emp1.display();
emp2.display();




Output



```id="qg64t9"
Sai 50000

Ram 70000

Advantages of OOP

Promotes code reusability through inheritance.
Improves maintainability by organizing related data and behavior.
Enhances security with encapsulation.
Simplifies large projects by dividing functionality into objects.
Makes applications easier to extend and scale.

OOP vs Procedural Programming

Procedural Programming	Object-Oriented Programming
Focuses on functions	Focuses on objects
Data and functions are separate	Data and methods are grouped together
Less reusable	Highly reusable
Difficult to maintain in large projects	Easier to maintain and scale
No inheritance	Supports inheritance

Interview Questions

What is OOP?

Object-Oriented Programming is a programming paradigm that organizes code into objects containing properties and methods.

What are the four pillars of OOP?

Encapsulation
Inheritance
Polymorphism
Abstraction

Is JavaScript object-oriented?

Yes. JavaScript is an object-oriented language that uses prototype-based inheritance. ES6 introduced class syntax, but it still works on top of prototypes.

What is the difference between a class and an object?

A class is a blueprint for creating objects.

An object is an instance of a class.

What is inheritance?

Inheritance allows one class to acquire the properties and methods of another class, reducing code duplication.

What is encapsulation?

Encapsulation groups data and methods together while controlling access to internal data, often using private fields.

What is polymorphism?

Polymorphism allows the same method name to have different implementations in different classes.

What is abstraction?

Abstraction hides internal implementation details and exposes only the necessary functionality.

Conclusion

Object-Oriented Programming is a powerful approach for building scalable and maintainable applications. JavaScript supports OOP through its prototype system and provides a cleaner class syntax to make development easier.

Understanding objects, classes, prototypes, and the four OOP pillars—Encapsulation, Inheritance, Polymorphism, and Abstraction—will help you write cleaner code, build reusable components, and confidently tackle real-world JavaScript projects. While the syntax may resemble other object-oriented languages, remember that JavaScript's true foundation is prototype-based inheritance, making it both flexible and unique.

4 Pillars in JS

Sai Swaroop Bijinapalli — Thu, 30 Jul 2026 09:53:31 +0000

Object-Oriented JavaScript (OOP): A Complete Guide with Examples

Introduction

Object-Oriented Programming (OOP) is one of the most popular programming paradigms used to organize code into objects. An object contains data (properties) and behavior (methods).

Learning OOP in JavaScript helps you write code that is:

Reusable
Modular
Easy to maintain
Easy to extend
Easier to understand in large applications

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is a programming style where we represent real-world entities as objects.

An object contains:

Properties (State) → Information about the object
Methods (Behavior) → Actions the object can perform

For example, consider a Car.

Car

Properties
-----------
Brand
Color
Speed

Methods
-----------
Start()
Stop()
Accelerate()
Brake()

In JavaScript, we can represent it like this:

```javascript id="lmn421"
const car = {
brand: "Tesla",
color: "Black",
speed: 0,

start() {
    console.log("Car Started");
},

accelerate() {
    this.speed += 20;
    console.log(this.speed);
}

};

car.start();
car.accelerate();




Output



```id="n2sk7h"
Car Started
20

Here:

brand, color, and speed are properties.
start() and accelerate() are methods.

Why Do We Need OOP?

Imagine creating 100 students.

Without OOP:

```javascript id="5t0nqk"
const student1 = {
name: "Sai",
age: 20
};

const student2 = {
name: "Ram",
age: 21
};

const student3 = {
name: "John",
age: 22
};




You would repeat the same structure many times.

Instead, OOP allows you to create a blueprint.

---

# Constructor Function

Before ES6 classes, JavaScript used constructor functions.



```javascript id="z73mbe"
function Student(name, age) {
    this.name = name;
    this.age = age;
}

const s1 = new Student("Sai", 20);
const s2 = new Student("Ram", 21);

console.log(s1);
console.log(s2);

Output

Student { name: "Sai", age: 20 }

Student { name: "Ram", age: 21 }

The constructor acts as a blueprint for creating multiple objects.

ES6 Classes

JavaScript introduced classes in ES6.

```javascript id="9k2m8c"
class Student {

constructor(name, age) {
    this.name = name;
    this.age = age;
}

study() {
    console.log(this.name + " is studying");
}

}

const s1 = new Student("Sai", 20);

s1.study();




Output



```id="gl6x5y"
Sai is studying

Although this looks like Java or C++, classes internally use JavaScript's prototype system.

Four Pillars of OOP

Object-Oriented Programming is based on four major principles:

Object-Oriented Programming

        │

 ┌──────┼────────┐
 │      │        │
 ▼      ▼        ▼
Encapsulation
Inheritance
Polymorphism
Abstraction

Let's understand each one.

1. Encapsulation

What is Encapsulation?

Encapsulation means keeping data and the methods that operate on that data together inside one object, while also controlling access to that data.

Think of a bank account.

Bank Account

Balance

Deposit()

Withdraw()

GetBalance()

Users should not directly change the balance.

Instead, they should use methods like deposit() or withdraw().

Example Using Private Fields

```javascript id="9wv9d8"
class BankAccount {

#balance = 0;

deposit(amount) {
    this.#balance += amount;
}

withdraw(amount) {
    this.#balance -= amount;
}

getBalance() {
    return this.#balance;
}

}

const account = new BankAccount();

account.deposit(1000);
account.withdraw(200);

console.log(account.getBalance());




Output



```id="z3pygk"
800

Trying this:

```javascript id="dn3x1x"
console.log(account.#balance);




Results in an error because `#balance` is private.

Benefits:

* Protects data
* Prevents accidental modification
* Improves security

---

# 2. Inheritance

## What is Inheritance?

Inheritance allows one class to acquire the properties and methods of another class.

Real-life example:



```id="elz6vy"
Animal

eat()

sleep()

      ▲

      │

Dog

bark()

The Dog class automatically gets the methods of Animal.

Example

```javascript id="l5v0qo"
class Animal {

eat() {
    console.log("Eating");
}

}

class Dog extends Animal {

bark() {
    console.log("Barking");
}

}

const dog = new Dog();

dog.eat();
dog.bark();




Output



```id="v7h7ew"
Eating

Barking

Inheritance avoids code duplication.

Using super()

The super keyword calls the parent class constructor.

```javascript id="klyp92"
class Animal {

constructor(name) {
    this.name = name;
}

}

class Dog extends Animal {

constructor(name, breed) {
    super(name);
    this.breed = breed;
}

}

const dog = new Dog("Tom", "Labrador");

console.log(dog);




Output



```id="tht91x"
Dog {

name: "Tom",

breed: "Labrador"

}

3. Polymorphism

What is Polymorphism?

Polymorphism means one interface, many forms.

Different objects can implement the same method differently.

Example

```javascript id="e8iqcx"
class Animal {

speak() {
    console.log("Animal Sound");
}

}

class Dog extends Animal {

speak() {
    console.log("Bark");
}

}

class Cat extends Animal {

speak() {
    console.log("Meow");
}

}

const dog = new Dog();
const cat = new Cat();

dog.speak();
cat.speak();




Output



```id="t9hvo8"
Bark

Meow

Both classes have a speak() method, but each behaves differently.

This is method overriding, one of the most common forms of polymorphism.

4. Abstraction

What is Abstraction?

Abstraction means showing only essential features while hiding internal implementation details.

Example:

When driving a car, you use the steering wheel, accelerator, and brake. You don't need to know how the engine or transmission works internally.

Example

```javascript id="b9u74f"
class CoffeeMachine {

makeCoffee() {
    this.#boilWater();
    console.log("Coffee Ready");
}

#boilWater() {
    console.log("Boiling Water...");
}

}

const machine = new CoffeeMachine();

machine.makeCoffee();




Output



```id="yb3poh"
Boiling Water...

Coffee Ready

Users only call makeCoffee(). The internal boiling process is hidden.

Prototype-Based OOP

Even though JavaScript has classes, everything is still based on prototypes.

```javascript id="fxz6eh"
class Person {

constructor(name) {
    this.name = name;
}

greet() {
    console.log("Hello");
}

}




Internally, JavaScript creates:



```javascript id="sx6uyj"
function Person(name) {
    this.name = name;
}

Person.prototype.greet = function () {
    console.log("Hello");
};

This is why JavaScript is called a prototype-based language.

Object Relationships

Student Object

name

age

study()

        │

        ▼

Student.prototype

study()

        │

        ▼

Object.prototype

toString()

hasOwnProperty()

valueOf()

        │

        ▼

null

Class Example

```javascript id="z93vrl"
class Employee {

constructor(name, salary) {
    this.name = name;
    this.salary = salary;
}

display() {
    console.log(this.name, this.salary);
}

}

const emp1 = new Employee("Sai", 50000);
const emp2 = new Employee("Ram", 70000);

emp1.display();
emp2.display();




Output



```id="qg64t9"
Sai 50000

Ram 70000

Advantages of OOP

Promotes code reusability through inheritance.
Improves maintainability by organizing related data and behavior.
Enhances security with encapsulation.
Simplifies large projects by dividing functionality into objects.
Makes applications easier to extend and scale.

OOP vs Procedural Programming

Procedural Programming	Object-Oriented Programming
Focuses on functions	Focuses on objects
Data and functions are separate	Data and methods are grouped together
Less reusable	Highly reusable
Difficult to maintain in large projects	Easier to maintain and scale
No inheritance	Supports inheritance

Interview Questions

What is OOP?

Object-Oriented Programming is a programming paradigm that organizes code into objects containing properties and methods.

What are the four pillars of OOP?

Encapsulation
Inheritance
Polymorphism
Abstraction

Is JavaScript object-oriented?

Yes. JavaScript is an object-oriented language that uses prototype-based inheritance. ES6 introduced class syntax, but it still works on top of prototypes.

What is the difference between a class and an object?

A class is a blueprint for creating objects.

An object is an instance of a class.

What is inheritance?

Inheritance allows one class to acquire the properties and methods of another class, reducing code duplication.

What is encapsulation?

Encapsulation groups data and methods together while controlling access to internal data, often using private fields.

What is polymorphism?

Polymorphism allows the same method name to have different implementations in different classes.

What is abstraction?

Abstraction hides internal implementation details and exposes only the necessary functionality.

Conclusion

Prototypes in JS

Sai Swaroop Bijinapalli — Thu, 30 Jul 2026 09:49:25 +0000

JavaScript Prototypes Explained: A Complete Beginner's Guide

Introduction

If you've been learning JavaScript, you've probably heard the term prototype many times. At first, it can seem confusing because JavaScript doesn't use traditional class-based inheritance like Java or C++. Instead, JavaScript uses prototype-based inheritance.

Understanding prototypes is one of the biggest milestones in becoming a strong JavaScript developer. Once you understand how prototypes work, concepts like inheritance, constructor functions, classes, new, and object methods become much easier.

In this blog, we'll learn prototypes from scratch with simple explanations, diagrams, and practical examples.

What is a Prototype?

A prototype is simply another object from which an object inherits properties and methods.

Every JavaScript object has a hidden internal property called [[Prototype]]. In most browsers, you can access it using:

__proto__

Whenever JavaScript cannot find a property or method inside an object, it automatically searches in its prototype.

This lookup process is called the Prototype Chain.

Think of it Like Real Life

Imagine a student asking questions.

Student
    ↓
Teacher
    ↓
Principal

If the student doesn't know the answer, they ask the teacher.

If the teacher doesn't know, they ask the principal.

JavaScript behaves in the same way.

If an object doesn't contain a property, JavaScript checks its prototype. If it's still not found, JavaScript continues checking higher prototypes until it reaches null.

Your First Prototype Example

const person = {
    name: "Sai"
};

console.log(person.name);

Output

Sai

JavaScript finds name directly inside the object.

But now look at this:

console.log(person.toString());

We never created a toString() method.

Why does it work?

Because JavaScript searches inside Object.prototype, where toString() already exists.

The lookup happens like this:

person
   ↓
Object.prototype
   ↓
null

Every Object Has a Prototype

Let's inspect it.

const person = {
    name: "Sai"
};

console.log(person.__proto__);

Output

Object.prototype

We can even verify it.

console.log(person.__proto__ === Object.prototype);

Output

true

This proves that every ordinary object inherits from Object.prototype.

Object.prototype

Object.prototype is the root object for almost every JavaScript object.

It already contains useful methods such as:

toString()
hasOwnProperty()
valueOf()
isPrototypeOf()
propertyIsEnumerable()

Example:

const obj = {};

console.log(obj.hasOwnProperty("name"));

Output

false

Even though we never created hasOwnProperty(), it is inherited from Object.prototype.

Understanding the Prototype Chain

Consider two objects.

const animal = {
    eats: true
};

const dog = {
    barks: true
};

dog.__proto__ = animal;

console.log(dog.eats);

Output

true

How did JavaScript find eats?

Search process:

dog
│
└── eats? ❌

animal
│
└── eats? ✅

Since JavaScript finds the property in the prototype, it returns true.

Visualizing the Prototype Chain

dog
{
    barks: true
}

        ↓

animal
{
    eats: true
}

        ↓

Object.prototype

        ↓

null

Whenever a property is requested, JavaScript searches from top to bottom until it finds it.

Using Object.create()

Instead of manually changing __proto__, modern JavaScript recommends using Object.create().

const animal = {
    eats: true
};

const dog = Object.create(animal);

dog.barks = true;

console.log(dog.eats);

Output

true

Prototype relationship

dog
   ↓
animal
   ↓
Object.prototype

Why Prototypes Save Memory

Suppose we create two users.

Without prototypes:

const user1 = {
    name: "Sai",

    greet() {
        console.log("Hello");
    }
};

const user2 = {
    name: "Ram",

    greet() {
        console.log("Hello");
    }
};

Each object stores its own copy of greet().

This wastes memory.

Instead, create one shared object.

const userMethods = {
    greet() {
        console.log("Hello");
    }
};

const user1 = Object.create(userMethods);
user1.name = "Sai";

const user2 = Object.create(userMethods);
user2.name = "Ram";

Now both objects share the same function.

user1
   ↓
userMethods
   ↑
user2

Only one copy of greet() exists in memory.

Constructor Functions and Prototypes

Before ES6 classes, JavaScript commonly used constructor functions.

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

Methods are added to the prototype.

Person.prototype.greet = function () {
    console.log("Hello " + this.name);
};

Creating objects:

const p1 = new Person("Sai");
const p2 = new Person("Ram");

p1.greet();
p2.greet();

Output

Hello Sai
Hello Ram

Notice that both objects use the same greet() method.

What Happens When You Use `new`?

When you write:

const person = new Person("Sai");

JavaScript performs four steps:

Step 1

Creates a new empty object.

{}

Step 2

Connects it to Person.prototype.

new object
     ↓
Person.prototype

Step 3

Calls the constructor.

Person.call(newObject, "Sai");

Inside the constructor:

this.name = "Sai";

becomes

newObject.name = "Sai";

Step 4

Returns the new object.

ES6 Classes Still Use Prototypes

Modern JavaScript introduced classes.

class Person {

    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log("Hello " + this.name);
    }

}

Creating an object:

const person = new Person("Sai");

person.greet();

Output

Hello Sai

Although the syntax looks different, JavaScript internally stores greet() inside Person.prototype.

Classes are simply syntactic sugar over prototypes.

Property Shadowing

A child object can override properties from its prototype.

const animal = {
    legs: 4
};

const dog = Object.create(animal);

console.log(dog.legs);

Output

Override it.

dog.legs = 3;

console.log(dog.legs);

Output

Now JavaScript finds legs directly inside dog, so it doesn't continue searching.

Checking Where a Property Exists

const animal = {
    eats: true
};

const dog = Object.create(animal);

dog.name = "Tom";

console.log(dog.hasOwnProperty("name"));

Output

true

Now check another property.

console.log(dog.hasOwnProperty("eats"));

Output

false

The property exists through inheritance, not inside dog.

Complete Prototype Chain Example

const livingThing = {
    alive: true
};

const animal = Object.create(livingThing);
animal.eats = true;

const dog = Object.create(animal);
dog.barks = true;

console.log(dog.alive);
console.log(dog.eats);
console.log(dog.barks);

Output

true
true
true

Search order:

dog
   ↓
animal
   ↓
livingThing
   ↓
Object.prototype
   ↓
null

Why Are Prototypes Important?

Prototypes provide several advantages:

Enable inheritance between objects.
Allow methods to be shared instead of duplicated.
Reduce memory consumption.
Improve application performance.
Form the foundation of JavaScript's object-oriented programming model.

Without prototypes, every object would need its own copy of every method.

Interview Questions

What is a prototype?

A prototype is an object from which another object inherits properties and methods.

What is the prototype chain?

The sequence of objects JavaScript searches when a property isn't found on the current object.

Why use `Object.create()`?

It creates a new object with a specified prototype and is the recommended alternative to modifying __proto__.

What is `Object.prototype`?

It is the root prototype for most JavaScript objects and contains built-in methods like toString() and hasOwnProperty().

Are ES6 classes different from prototypes?

No. Classes are simply cleaner syntax built on top of JavaScript's prototype system.

What does the `new` keyword do?

Creates a new object.
Links it to the constructor's prototype.
Executes the constructor with this pointing to the new object.
Returns the newly created object.

Key Takeaways

Every JavaScript object has a hidden prototype ([[Prototype]]).
JavaScript follows the prototype chain when searching for properties.
Most objects inherit from Object.prototype.
Object.create() is the preferred way to establish prototype inheritance.
Constructor functions share methods using .prototype.
ES6 classes are built on top of the prototype system.
Prototypes make JavaScript memory-efficient by allowing objects to share methods instead of creating duplicate copies.

Conclusion

Prototypes are one of JavaScript's most powerful features. While they may seem challenging initially, understanding them unlocks many advanced concepts such as constructor functions, inheritance, classes, and the new keyword.

The next time you call methods like toString() or hasOwnProperty(), remember that those methods aren't stored directly in your object—they come from the prototype chain.

Prototype&Object-oriented Js

Sai Swaroop Bijinapalli — Thu, 30 Jul 2026 06:32:27 +0000

Prototypes & Object-Oriented JavaScript: A Complete Beginner's Guide

JavaScript is one of the most popular programming languages for web development. One of its most powerful features is its support for Object-Oriented Programming (OOP). Unlike languages such as Java or C++, JavaScript uses a prototype-based inheritance model. In ES6, JavaScript introduced classes, making OOP easier to understand while still using prototypes internally.

In this blog, we'll explore Prototypes, Prototype Chain, Object.create(), Classes, Inheritance, Static Members, Getters & Setters, and Encapsulation with simple examples.

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is a programming style where we organize code using objects.

An object contains:

Properties (Data)
Methods (Functions)

Example

const student = {
    name: "Sai",
    age: 21,

    study() {
        console.log("Studying JavaScript...");
    }
};

Here,

name and age are properties
study() is a method

Memory representation:

student
│
├── name → "Sai"
├── age → 21
└── study() → Function

Objects help us group related data and behavior together.

The Problem Without Prototypes

Imagine creating multiple student objects.

const student1 = {
    name: "Sai",
    study() {
        console.log("Studying...");
    }
};

const student2 = {
    name: "Rahul",
    study() {
        console.log("Studying...");
    }
};

Both objects contain their own copy of the study() function.

If you create 1000 students, JavaScript creates 1000 identical functions.

student1
│
└── study()

student2
│
└── study()

student3
│
└── study()

This wastes memory.

JavaScript solves this using Prototypes.

What is a Prototype?

A prototype is an object that allows other objects to inherit its properties and methods.

Instead of copying methods into every object, JavaScript stores them once in the prototype.

Example

const person = {

    greet() {
        console.log("Hello!");
    }

};

const student = Object.create(person);

student.name = "Sai";

student.greet();

Output

Hello!

Memory

student
│
├── name → Sai
│
▼
Prototype

person
│
└── greet()

Notice that greet() exists only once.

What is the Prototype Chain?

Whenever JavaScript cannot find a property inside an object, it searches the object's prototype.

This search continues until the property is found or until JavaScript reaches null.

Example

const person = {

    greet() {
        console.log("Hello");
    }

};

const student = Object.create(person);

student.greet();

Search process:

student

↓

person

↓

Object.prototype

↓

null

This searching mechanism is called the Prototype Chain.

Understanding Object.create()

Object.create() creates a new object using another object as its prototype.

Syntax

Object.create(prototypeObject)

Example

const animal = {

    eat() {
        console.log("Eating...");
    }

};

const dog = Object.create(animal);

dog.eat();

Output

Eating...

Memory

dog

↓

animal

↓

eat()

This promotes code reuse.

Constructor Functions

Before ES6 classes, JavaScript developers used constructor functions.

Example

function Student(name, age) {

    this.name = name;
    this.age = age;

}

const s1 = new Student("Sai", 21);
const s2 = new Student("Rahul", 20);

Methods were attached using the prototype.

Student.prototype.study = function () {
    console.log("Studying...");
};

Both objects now share one copy of study().

Classes in JavaScript

ES6 introduced the class keyword.

A class is simply syntactic sugar over JavaScript's prototype system.

Example

class Student {

    constructor(name, age) {

        this.name = name;
        this.age = age;

    }

    study() {

        console.log("Studying...");

    }

}

Creating an object

const s1 = new Student("Sai", 21);

Internally JavaScript still creates prototype-based objects.

Understanding the Constructor

The constructor initializes object properties.

Example

class Student {

    constructor(name) {

        this.name = name;

    }

}

const s = new Student("Sai");

Whenever new Student() is executed, the constructor runs automatically.

Inheritance

Inheritance allows one class to acquire properties and methods from another class.

JavaScript uses the extends keyword.

Example

class Animal {

    eat() {
        console.log("Eating...");
    }

}

class Dog extends Animal {

}

const d = new Dog();

d.eat();

Output

Eating...

Memory

Dog

↓

Animal

↓

eat()

Dog inherits the eat() method from Animal.

The super Keyword

When a child class defines its own constructor, it must call the parent constructor using super().

Example

class Animal {

    constructor(name) {

        this.name = name;

    }

}

class Dog extends Animal {

    constructor(name) {

        super(name);

    }

}

Without super(), JavaScript throws an error because the parent object has not been initialized.

Static Members

Static methods belong to the class itself rather than its objects.

Example

class Calculator {

    static add(a, b) {

        return a + b;

    }

}

console.log(Calculator.add(10, 20));

Output

Notice we call the method using the class name.

Calculator.add()

✔ Correct

new Calculator().add()

✖ Wrong

Static methods are useful for utility functions.

Getters and Setters

Getters allow us to read data like a property while executing a function.

Example

class Student {

    constructor(name) {

        this._name = name;

    }

    get name() {

        return this._name;

    }

}

const s = new Student("Sai");

console.log(s.name);

Output

Sai

Setter example

class Student {

    constructor(name) {

        this._name = name;

    }

    set name(value) {

        this._name = value;

    }

}

const s = new Student("Sai");

s.name = "Rahul";

console.log(s.name);

Output

Rahul

Setters are commonly used for validation.

Encapsulation

Encapsulation means hiding internal data and exposing only controlled methods to access or modify it.

A real-life example is an ATM.

You cannot directly change your account balance.

Instead, you use operations such as:

Deposit
Withdraw
Check Balance

Encapsulation Using Closures

Before private fields existed, JavaScript used closures.

function Bank() {

    let balance = 1000;

    return {

        deposit(amount) {

            balance += amount;

        },

        getBalance() {

            return balance;

        }

    };

}

const account = Bank();

account.deposit(500);

console.log(account.getBalance());

Output

Trying to access

console.log(account.balance);

Output

undefined

The variable balance remains private.

Private Fields (#)

Modern JavaScript introduced private class fields using #.

Example

class Bank {

    #balance = 1000;

    deposit(amount) {

        this.#balance += amount;

    }

    getBalance() {

        return this.#balance;

    }

}

const account = new Bank();

console.log(account.getBalance());

Output

Trying to access

console.log(account.#balance);

produces a syntax error because private fields are accessible only inside the class.

Prototype vs Class

Prototype	Class
Core inheritance mechanism	Cleaner ES6 syntax
Uses prototype objects	Uses `class` keyword
More verbose	Easier to read
Supports inheritance	Internally uses prototypes

Closures vs Private Fields

Closures	Private Fields
Function-based	Class-based
Uses lexical scope	Uses `#` syntax
Older approach	Modern approach
Good for factory functions	Best for classes

Key Takeaways

JavaScript objects store data and behavior together.
Prototypes allow multiple objects to share methods efficiently.
The Prototype Chain is how JavaScript searches for missing properties.
Object.create() creates objects that inherit from other objects.
Classes provide a cleaner syntax while still using prototypes internally.
Inheritance allows child classes to reuse parent functionality.
super() calls the parent constructor.
Static methods belong to the class, not its instances.
Getters and setters provide controlled access to object properties.
Encapsulation protects internal data using closures or private fields (#).

Conclusion

Understanding prototypes is the foundation of mastering JavaScript's object-oriented features. While ES6 classes make the language easier to read and write, it's important to remember that classes are simply a cleaner syntax built on top of JavaScript's prototype system. Once you understand prototypes, concepts like inheritance, encapsulation, static methods, getters, and setters become much easier to grasp.

JS Eventloop & Concurrency Model

Sai Swaroop Bijinapalli — Fri, 24 Jul 2026 05:24:04 +0000

🚀 JavaScript Event Loop & Concurrency Model: A Beginner's Guide

"JavaScript is single-threaded, yet it can handle timers, API requests, user interactions, and asynchronous tasks without freezing the application. How is that possible? The answer lies in the Event Loop and JavaScript's Concurrency Model."

When I first started learning JavaScript, one question always confused me:

If JavaScript can execute only one task at a time, how does it perform multiple tasks like API calls, timers, and user interactions simultaneously?

The answer is JavaScript's Event Loop and Concurrency Model.

In this article, we'll understand how JavaScript manages asynchronous operations behind the scenes using simple explanations, diagrams, and practical examples.

📚 What You'll Learn

What is JavaScript's Concurrency Model?
Why JavaScript is Single-Threaded
Call Stack
Web APIs / Node APIs
Callback Queue (Macrotask Queue)
Microtask Queue
Event Loop
setTimeout() vs Promises
Cooperative Concurrency
Concurrency vs Parallelism

Let's begin!

🧵 JavaScript is Single-Threaded

JavaScript executes code using a single thread, meaning it can perform only one operation at a time.

Imagine a chef working alone in a kitchen.

If the chef starts cooking one dish, they cannot cook another dish until the first one is finished.

Similarly, JavaScript executes one statement at a time.

Example:

console.log("Task 1");
console.log("Task 2");
console.log("Task 3");

Output

Task 1
Task 2
Task 3

Everything runs sequentially.

🤔 Then How Does JavaScript Handle Multiple Tasks?

Modern applications need to:

Fetch data from servers
Wait for timers
Read files
Handle button clicks
Play videos

If JavaScript waited for every operation to finish before continuing, web pages would freeze.

Instead, JavaScript uses a Concurrency Model.

⚙️ What is the Concurrency Model?

The Concurrency Model allows JavaScript to manage multiple tasks efficiently without executing them simultaneously on the main thread.

JavaScript delegates time-consuming operations to the browser (Web APIs) or Node.js (Node APIs). While those operations run outside the JavaScript engine, the main thread continues executing other code.

When the asynchronous task finishes, its callback is queued and executed later by the Event Loop.

🧱 Call Stack

What is the Call Stack?

The Call Stack is a data structure that keeps track of function execution.

It follows the LIFO (Last In, First Out) principle.

Whenever a function is called:

It is pushed onto the stack.
When it finishes, it is popped off.

Example

function first() {
    console.log("First");
}

function second() {
    first();
    console.log("Second");
}

second();

Output

First
Second

Execution

Call Stack

↓

second()

↓

first()

↓

console.log()

↓

first() removed

↓

console.log()

↓

second() removed

🌐 Web APIs / Node APIs

JavaScript itself cannot perform operations like timers or network requests.

These features are provided by the environment.

Browser Web APIs

setTimeout()
setInterval()
fetch()
DOM Events
localStorage
Geolocation

Node.js APIs

File System (fs)
HTTP Server
Streams
Timers
Process APIs

These APIs perform asynchronous work while JavaScript continues executing other code.

Example

console.log("Start");

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

console.log("End");

Output

Start
End
Timer Completed

Notice that JavaScript doesn't wait for two seconds.

📥 Callback Queue (Macrotask Queue)

Once an asynchronous operation completes, its callback is placed inside the Callback Queue (also called the Macrotask Queue).

Examples of Macrotasks

setTimeout()
setInterval()
DOM Events
setImmediate() (Node.js)

Example

console.log("Start");

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

console.log("End");

Output

Start
End
Timeout

Even though the timer delay is 0 milliseconds, the callback executes only after the Call Stack becomes empty.

⚡ Microtask Queue

The Microtask Queue stores higher-priority asynchronous tasks.

Examples include:

Promise.then()
Promise.catch()
Promise.finally()
queueMicrotask()

Microtasks always execute before macrotasks.

Example

console.log("Start");

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

console.log("End");

Output

Start
End
Promise

🔄 Event Loop

What is the Event Loop?

The Event Loop is a scheduler.

Its job is to continuously monitor the Call Stack.

Whenever the Call Stack becomes empty, it checks:

Microtask Queue
Callback Queue

The Event Loop first executes all microtasks.

Only after the Microtask Queue is empty does it execute one macrotask.

Event Loop Workflow

JavaScript Code
        │
        ▼
   Call Stack
        │
        ▼
Async Operation
        │
        ▼
Web APIs / Node APIs
        │
        ▼
 ┌──────────────────┐
 │ Microtask Queue  │
 │ Promise.then()   │
 │ queueMicrotask() │
 └──────────────────┘
 ┌──────────────────┐
 │ Callback Queue   │
 │ setTimeout()     │
 │ DOM Events       │
 └──────────────────┘
        │
        ▼
    Event Loop
        │
        ▼
    Call Stack

🆚 setTimeout() vs Promises

One of the most common interview questions is the execution order of setTimeout() and Promises.

Example

console.log("Start");

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

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

console.log("End");

Output

Start
End
Promise
setTimeout

Why Does Promise Execute First?

Let's understand the execution step by step.

Step 1

console.log("Start");

Output

Start

Step 2

setTimeout(...)

The timer is registered with the Web API.

Step 3

Promise.resolve().then(...)

The callback is placed inside the Microtask Queue.

Step 4

console.log("End");

Output

End

Step 5

The Call Stack becomes empty.

The Event Loop checks the Microtask Queue first.

Output

Promise

Step 6

After all microtasks finish, the Event Loop executes the Callback Queue.

Output

setTimeout

🤝 Cooperative Concurrency

JavaScript uses cooperative concurrency.

This means:

Only one piece of JavaScript code executes at a time.
Tasks voluntarily yield control after they finish.
No task interrupts another task.

Example

console.log("Task 1");

setTimeout(() => {
    console.log("Task 2");
}, 0);

console.log("Task 3");

Output

Task 1
Task 3
Task 2

⚡ Concurrency vs Parallelism

Many beginners think these terms mean the same thing, but they are different.

Concurrency

Managing multiple tasks by switching between them efficiently.

Example:

A chef preparing multiple dishes by moving between them.

Parallelism

Executing multiple tasks at the exact same time using multiple workers or CPU cores.

Example:

Three chefs cooking three different dishes simultaneously.

JavaScript and Parallelism

JavaScript's main thread is not parallel.

However, true parallelism can be achieved using:

Web Workers (Browser)
Worker Threads (Node.js)

These create separate threads for CPU-intensive work.

📊 Microtask Queue vs Callback Queue

Feature	Microtask Queue	Callback Queue
Priority	Higher	Lower
Examples	Promise.then(), catch(), finally(), queueMicrotask()	setTimeout(), setInterval(), DOM Events
Execution	Runs immediately after Call Stack is empty	Runs after all Microtasks finish

📝 Key Takeaways

JavaScript is single-threaded.
The Call Stack executes synchronous code.
Web APIs and Node APIs handle asynchronous operations.
Completed asynchronous callbacks are placed into queues.
Microtask Queue has higher priority than the Callback Queue.
The Event Loop continuously checks the Call Stack and schedules tasks.
Promises always execute before setTimeout() callbacks because microtasks are processed first.
JavaScript achieves concurrency through the Event Loop, while true parallelism requires Web Workers or Worker Threads.

🎯 Conclusion

Understanding the Event Loop and JavaScript's Concurrency Model is essential for writing efficient asynchronous code. Concepts like the Call Stack, Web APIs, task queues, and the Event Loop explain why JavaScript can remain responsive even while handling timers, network requests, and user interactions.

Once you understand these fundamentals, topics like async/await, API calls, and modern frameworks such as React and Node.js become much easier to learn because they all build on the same asynchronous execution model.

From Variables to Closures

Sai Swaroop Bijinapalli — Wed, 22 Jul 2026 06:03:05 +0000

🚀 JavaScript Fundamentals (Week-03): Understanding the Concepts That Every Developer Should Know

"Writing JavaScript code is one thing, but understanding what happens behind the scenes is what makes you a better developer."

When I first started learning JavaScript, I knew how to declare variables and write functions. However, I often found myself asking questions like:

Why are there three ways to declare variables?
What exactly is hoisting?
How does JavaScript execute my code?
Why can an inner function access variables from its parent function?
What does the this keyword actually refer to?
Why do developers keep talking about writing clean code?

This week, I focused on understanding these core JavaScript concepts instead of simply memorizing syntax.

In this article, I'll explain each concept in a beginner-friendly way with examples and practical explanations.

📚 Topics Covered

Variables (var, let, const)
Hoisting
Lexical Scope
Execution Context
Call Stack
Closures
this Binding
DRY Principle
KISS Principle

Let's start from the beginning.

📦 Variables in JavaScript

What is a Variable?

A variable is a named container used to store data in memory.

Instead of writing the same value repeatedly, we store it inside a variable and reuse it whenever required.

For example,

let name = "Sai";

console.log(name);

Output

Sai

Here,

let → Variable declaration keyword
name → Variable name
"Sai" → Stored value

Why Do We Need Variables?

Imagine writing this:

console.log("Sai");
console.log("Sai");
console.log("Sai");

If the value changes, every occurrence must be updated.

Using variables,

let name = "Sai";

console.log(name);
console.log(name);
console.log(name);

Now changing one line updates every usage.

Variables improve:

Readability
Reusability
Maintainability

Types of Variables

JavaScript provides three ways to declare variables.

var
let
const

Although all three create variables, they behave differently.

var

var was introduced in the first version of JavaScript.

Characteristics:

Function Scoped
Can be redeclared
Can be reassigned
Hoisted

Example

var city = "Hyderabad";

var city = "Bangalore";

console.log(city);

Output

Bangalore

Because var allows redeclaration, it can accidentally overwrite existing values.

let

let was introduced in ES6.

Characteristics

Block Scoped
Cannot be redeclared
Can be reassigned

Example

let age = 20;

age = 21;

console.log(age);

Output

const

const is used when the variable should not be reassigned.

Characteristics

Block Scoped
Cannot be redeclared
Cannot be reassigned

const PI = 3.14;

console.log(PI);

Output

3.14

📈 Hoisting

What is Hoisting?

Hoisting is JavaScript's behavior of processing declarations before executing the code.

This doesn't mean the code physically moves. Instead, during the memory creation phase, JavaScript prepares variables and functions before execution begins.

Example

console.log(language);

var language = "JavaScript";

Output

undefined

Internally JavaScript treats it like this:

var language;

console.log(language);

language = "JavaScript";

Variables declared using let and const are also hoisted, but they remain inside the Temporal Dead Zone (TDZ) until they are initialized.

🌍 Lexical Scope

Scope determines where a variable can be accessed.

Lexical Scope means an inner function can access variables declared in its outer function because of where it is written.

Example

function outer(){

    let message="Hello";

    function inner(){

        console.log(message);

    }

    inner();

}

outer();

Output

Hello

JavaScript first searches inside inner(). If the variable isn't found, it looks in the outer function.

This searching process is called the Scope Chain.

⚙️ Execution Context

Before JavaScript executes any code, it creates an Execution Context.

Think of it as JavaScript's workspace.

It stores:

Variables
Functions
Scope
Value of this

Every Execution Context has two phases.

Memory Creation Phase

During this phase,

Variables are allocated memory.
var variables are initialized with undefined.
Function declarations are stored.

Execution Phase

During this phase,

Variables receive values.
Statements execute one by one.
Function calls create new execution contexts.

📚 Call Stack

The Call Stack keeps track of function execution.

It follows the Last In, First Out (LIFO) principle.

Example

function first(){

    second();

}

function second(){

    console.log("Inside Second");

}

first();

Output

Inside Second

Execution Flow

first()

↓

second()

↓

console.log()

↓

Return

↓

Return

🔒 Closures

One of JavaScript's most powerful features is the Closure.

A Closure is created when an inner function remembers variables from its outer function even after the outer function has finished execution.

Example

function counter(){

    let count = 0;

    return function(){

        count++;

        console.log(count);

    }

}

const increment = counter();

increment();

increment();

increment();

Output

1
2
3

Closures are commonly used for:

Counters
Data Privacy
Event Handlers
Module Pattern

🎯 Understanding `this`

The this keyword refers to the object that calls a function.

Its value depends on how the function is called.

Implicit Binding

const user = {

    name:"Sai",

    greet(){

        console.log(this.name);

    }

}

user.greet();

Output

Sai

Explicit Binding

JavaScript provides call(), apply(), and bind() to explicitly decide what this should refer to.

function greet(){

    console.log(this.name);

}

const user={

    name:"Sai"

};

greet.call(user);

Output

Sai

new Binding

function Student(name){

    this.name=name;

}

const s1=new Student("Sai");

console.log(s1.name);

Output

Sai

Arrow Function

Arrow functions don't have their own this.

Instead, they inherit it from their surrounding scope.

✨ DRY Principle

DRY stands for

Don't Repeat Yourself

Instead of repeating code,

console.log("Welcome Sai");

console.log("Welcome Rahul");

write

function greet(name){

    console.log(`Welcome ${name}`);

}

greet("Sai");

greet("Rahul");

Benefits

Reusable code
Easy maintenance
Less duplication

💡 KISS Principle

KISS stands for

Keep It Simple, Stupid

Simple code is easier to understand than complicated code.

Instead of

function isEven(num){

    if(num%2===0){

        return true;

    }

    else{

        return false;

    }

}

write

function isEven(num){

    return num%2===0;

}

Simple code is:

Easy to debug
Easy to maintain
Easy to understand

🎯 Key Takeaways

After completing this week's learning, I understood that:

Variables store data.
Hoisting happens during memory creation.
Lexical Scope decides where variables are accessible.
Execution Context provides the environment for code execution.
The Call Stack manages function execution.
Closures preserve variables after a function finishes.
The value of this depends on how a function is called.
Following DRY and KISS helps write clean and maintainable code.

📝 Conclusion

Learning JavaScript isn't just about writing code—it's about understanding how the language works behind the scenes. Concepts like execution context, scope, closures, and this binding explain why our code behaves the way it does. By combining these fundamentals with clean coding principles like DRY and KISS, we can write code that is not only correct but also easy to read, maintain, and extend.

DEV Community: Sai Swaroop Bijinapalli

JavaScript Design Patterns: Singleton and Factory Explained with Real Examples

JavaScript Design Patterns: Singleton and Factory Explained with Real Examples

What Is a Design Pattern?

Why Do We Need Design Patterns?

Singleton in Simple Terms

Understanding the Singleton Step by Step

Singleton and Shared State

Simple Factory Function

Notification Factory Example

Understanding the Factory Flow

Factory

Design Principle

Real-World Example

Singleton

Observer

↓

Week-06 Day 1: CommonJS vs ESM and Modules in JavaScript

JavaScript Modules: CommonJS vs ESM and Why Modules Matter

What is a Module?

Why Do We Need Modules?

1. Code Organization

2. Reusability

3. Avoiding Global Variables

4. Maintainability

CommonJS

Creating a CommonJS Module

ESM — ECMAScript Modules

Creating an ESM Module

Named Exports

Default Export

CommonJS vs ESM

CommonJS

ESM

Comparison

Why This Matters in Node.js

Modules and Separation of Responsibility

Connection to Design Patterns

Modules answer:

Design patterns answer:

A Simple Real-World Example

Key Takeaways

Asynchronous JavaScript II: Promise Combinators & Concurrency Control

Week-05 Task 02 — Asynchronous JavaScript II

1. First: What is asynchronous JavaScript?

2. Why do we use Promises?

3. async/await

async

Remember

4. await

What happens?

Important

5. Why use async/await?

6. Error handling with try/catch

Flow

Mentor answer

7. Promise Combinators

8. Promise.all()

Important

9. What happens when one fails?

Fail-fast

When should you use it?

10. Promise.allSettled()

Fail-soft

When should you use it?

11. Promise.race()

Important

12. Promise.any()

13. race() vs any()

Promise.race()

Promise.any()

14. All four combinators together

15. Generators

16. What does yield do?

17. Iterators

18. for...of

19. Async Iterators

20. for...of vs for await...of

Normal iterator

Async iterator

3. `async/await`

`async`

4. `await`

6. Error handling with `try/catch`

8. `Promise.all()`

10. `Promise.allSettled()`

11. `Promise.race()`

12. `Promise.any()`

13. `race()` vs `any()`

`Promise.race()`

`Promise.any()`

16. What does `yield` do?

18. `for...of`

20. `for...of` vs `for await...of`

5. Implementing `resolve()` and `reject()`

6. Storing `.then()` Callbacks

7. Making `.then()` Asynchronous

8. Implementing `.then()`

17. Implementing `.catch()`

18. Implementing `.finally()`

19. Static `resolve()` and `reject()`

`resolve()`

`reject()`

3. Why Do We Use `resolve()`?

4. Why Do We Use `reject()`?

6. Using `.then()`

7. Promise with `setTimeout()`

8. Using `.catch()`

9. Using `.finally()`