DEV Community: HARSHITH GADDAM

My JavaScript Learning Journey: Call Back Hell & Promises

HARSHITH GADDAM — Tue, 04 Aug 2026 11:54:33 +0000

Today I learned one of the most important concepts in JavaScript—asynchronous programming with Promises. Initially, Promises seemed confusing, but after understanding how they work internally, the concept became much clearer.

1. What is Callback Hell?

A callback is a function passed to another function that executes after an asynchronous operation completes.

When multiple asynchronous operations depend on each other, callbacks become deeply nested.

getUser(userId, function(user) {
    getOrders(user.id, function(orders) {
        getOrderDetails(orders[0].id, function(details) {
            processOrder(details, function(result) {
                console.log(result);
            });
        });
    });
});

This deeply nested structure is called Callback Hell or the Pyramid of Doom.

Problems with Callback Hell

Difficult to read
Hard to debug
Difficult to maintain
Error handling becomes complicated

To solve these problems, JavaScript introduced Promises.

2. What is a Promise?

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

It promises that it will either:

Complete successfully
Fail with an error

A Promise starts in the Pending state and eventually becomes either Fulfilled or Rejected.

3. Promise States

Every Promise has three possible states.

Pending

The asynchronous operation is still running.

Fulfilled

The operation completed successfully.

Rejected

The operation failed.

A Promise can change its state only once.

Pending
   |
   | resolve()
   ▼
Fulfilled

OR

Pending
   |
   | reject()
   ▼
Rejected

4. Creating a Promise

A Promise is created using the Promise constructor.

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

});

One important thing I learned today is that I do not create resolve and reject myself.

JavaScript automatically provides these two functions to the Promise executor.

Conceptually, it works like this:

new Promise((resolve, reject) => {

});

Here,

resolve() is used when the operation succeeds.
reject() is used when the operation fails.

5. Using resolve() and reject()

Example:

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

    const marks = 80;

    if (marks >= 35)
        resolve("Pass");
    else
        reject("Fail");

});

If the condition is true, the Promise becomes Fulfilled.

Otherwise, it becomes Rejected.

6. Handling Promises

then()

.then() executes only when the Promise is fulfilled.

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

catch()

.catch() executes only when the Promise is rejected.

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

finally()

.finally() executes whether the Promise succeeds or fails.

It is useful for cleanup operations like hiding loading indicators or closing connections.

promise.finally(() => {
    console.log("Finished");
});

7. Promise Chaining

Every .then(), .catch(), and .finally() returns another Promise.

This allows us to chain multiple asynchronous operations.

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

Output:

Each .then() receives the value returned by the previous .then().

8. Error Propagation

One of the most interesting concepts I learned today is Error Propagation.

If an error occurs inside any .then() callback, JavaScript automatically skips all remaining .then() callbacks and jumps directly to the nearest .catch().

Promise.resolve(10)
    .then(value => {
        throw new Error("Something went wrong");
    })
    .then(() => {
        console.log("This will never execute");
    })
    .catch(error => {
        console.log(error.message);
    });

Output:

Something went wrong

This makes error handling much simpler because a single .catch() can handle errors from multiple Promise operations.

9. Practical Promise Example

function login(username, password) {

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

        setTimeout(() => {

            if (username === "harshith" && password === "1234") {
                resolve("Login Successful");
            } else {
                reject("Invalid Username or Password");
            }

        }, 2000);

    });

}

login("harshith", "1234")
    .then(message => console.log(message))
    .catch(error => console.log(error));

This example helped me understand when to call resolve() and reject() based on a condition.

10. Key Takeaways

Callback Hell makes asynchronous code difficult to read and maintain.
Promises solve Callback Hell by making asynchronous code cleaner.
Every Promise has three states: Pending, Fulfilled, and Rejected.
JavaScript automatically provides the resolve() and reject() functions when creating a Promise.
resolve() changes a Promise to Fulfilled.
reject() changes a Promise to Rejected.
.then() handles successful results.
.catch() handles errors and rejected Promises.
.finally() executes regardless of success or failure.
Promise chaining makes complex asynchronous operations easier to manage.
Errors automatically propagate through the Promise chain until they are handled by the nearest .catch().

Conclusion

Today's learning helped me understand how JavaScript manages asynchronous operations using Promises.I learned why callback hell occurs, how Promises improve code readability, how Promise states work, how resolve() and reject() are provided by JavaScript, and how .then(), .catch(), .finally(), Promise chaining, and error propagation make asynchronous programming much cleaner and easier to maintain.

Understanding these concepts has also given me a much stronger foundation for learning async/await, since it is built on top of Promises.

My JavaScript Learning Journey:Object-Oriented Programming (OOP) in JavaScript

HARSHITH GADDAM — Mon, 27 Jul 2026 17:08:59 +0000

JavaScript supports Object-Oriented Programming (OOP) through objects, prototypes, and classes. ES6 introduced a cleaner class syntax, making OOP easier to understand and write. In this blog, I'll explain the four pillars of OOP and some useful class features in JavaScript.

1. Inheritance

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

Example:

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

class Dog extends Animal {}

const dog = new Dog();

dog.eat();

Since Dog extends Animal, it inherits the eat() method.

This helps us avoid writing the same code again.

2. Polymorphism

Polymorphism means one method can behave differently depending on the object that calls it.

In JavaScript, this is usually achieved by overriding a parent class method in a child class.

Example

class Animal {
speak() {
console.log("Animal makes a sound");
}
}

class Dog extends Animal {
speak() {
console.log("Dog barks");
}
}

class Cat extends Animal {
speak() {
console.log("Cat meows");
}
}

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

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

Output:

Dog barks
Cat meows

Here, all classes have the same speak() method, but each class provides its own implementation. This is called polymorphism.

3. Abstraction

Abstraction means showing only the necessary functionality and hiding the internal implementation.

For example, when we start a car, we only press the start button. We don't need to know how the engine, fuel system, and battery work internally.

JavaScript allows us to achieve abstraction using classes and private methods or private fields.

Example

class Car {
start() {
this.#checkFuel();
console.log("Car Started");
}

#checkFuel() {
    console.log("Checking Fuel...");
}

}

const car = new Car();

car.start();

Output:

Checking Fuel...
Car Started

The user only calls start(). The internal method #checkFuel() remains hidden from outside the class. This makes the code easier to use and protects the internal implementation.

4. Static Members

Normally, we create an object before calling a method.

const obj = new Person();

But some methods belong to the class itself, not to its objects.

These are called static methods.

Example:

class MathUtil {
static add(a, b) {
return a + b;
}
}

console.log(MathUtil.add(5, 3));

Notice that we didn't create an object.

5. Getters and Setters

Getters and setters allow us to control how properties are read and updated.

Example:

class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}

set name(value) {
    if (value.length >= 3) {
        this._name = value;
    }
}

}

This helps us validate data before updating it.

6. Encapsulation Using Closures

Encapsulation means bundling data and methods into a single unit.And Closure means accessing the outer methods variables inside inner methods after outer function(method) has completed its execution.

Example:

function BankAccount() {
let balance = 1000;
return {
deposit(amount) {
balance += amount;
},

    getBalance() {
        return balance;
    }
};

}
const account = BankAccount();
account.deposit(500);
console.log(account.getBalance());
//console.log(account.balance); will throw an error

The variable balance cannot be accessed directly from outside the function.

In the above Example you can see balance,deposit(),getBalance() are bundled together.

7. Private Fields (`#field`)

Modern JavaScript provides another way to hide data using private fields.

Example:

class BankAccount {
#balance = 1000;
deposit(amount) {
this.#balance += amount;
}
getBalance() {
return this.#balance;
}
}
const account = new BankAccount();
account.deposit(500);
console.log(account.getBalance());
Trying to access:
account.#balance;

will cause an error because private fields can only be accessed inside the class.

Conclusion

Now I know that JavaScript's OOP system is built on prototypes, and classes simply make the syntax cleaner and easier to read. Understanding these concepts gives a strong foundation for writing better JavaScript code.

My JavaScript Learning Journey:Prototypes

HARSHITH GADDAM — Mon, 27 Jul 2026 12:17:05 +0000

JavaScript is different from many other programming languages when it comes to Object-Oriented Programming (OOP) because it is prototype-based. Instead of using classes as its foundation, JavaScript uses prototypes.

In this blog, I'll explain the topics I learned today.

1. What is a Prototype?

A prototype is a shared object that stores common methods and properties.

Instead of creating a separate copy of the same method for every object, JavaScript stores it once in the prototype, and all objects created from the same constructor or class share it.

Example

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

Person.prototype.greet = function () {
console.log(Hello, I'm ${this.name});
};

const p1 = new Person("Harshith");
const p2 = new Person("Rahul");

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

Here, both p1 and p2 use the same greet() method from Person.prototype.

This saves memory because JavaScript doesn't create multiple copies of the same function.

2. Prototype vs `proto`

This topic confused me at first, but here's the difference.

`prototype`

Exists on functions.
Used when creating new objects with the new keyword.
Stores shared methods.

Example:

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

Person.prototype.greet = function () {};
const p1 = new Person("Harshith");
p1 will have a property called "proto" there it stores the prototype of Person
p1.proto=Person.prototype;

`proto`

Exists on objects.
Points to the object's prototype.
JavaScript follows this link while searching for properties.

Example:

const person = new Person("Harshith");

console.log(person.proto === Person.prototype);

A simple way to remember:

prototype belongs to functions.
__proto__ belongs to objects.

3. Prototype Chain

When JavaScript cannot find a property inside an object, it searches its prototype.

If it is still not found, it continues searching through the next prototype until it reaches null.

Example:

const animal = {
eat() {
console.log("Eating");
}
};

const dog = Object.create(animal);

dog.eat();

JavaScript searches like this:

dog

↓

animal.prototype

↓

null

This searching process is called the Prototype Chain.

4. Object.create()

Object.create() creates a new object whose prototype is another object.

Example:

const animal = {
eat() {
console.log("Eating");
}
};

const dog = Object.create(animal);

dog.eat();

The dog object doesn't have its own eat() method.

It inherits it from animal.

5. Classes are Syntactic Sugar

Before ES6, constructor functions were used to create objects.

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

Now we can write:

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

greet() {
    console.log(this.name);
}

}

Both work almost the same internally.

A class is simply a cleaner and easier syntax built on top of JavaScript's prototype system.

conclusion

At first, JavaScript prototypes can feel confusing because there are terms like prototype, __proto__, constructor functions, and classes. But once I understood that objects inherit methods through prototypes, everything started making sense.

My JavaScript Learning Journey:Understanding the JavaScript Event Loop and Concurrency Model

HARSHITH GADDAM — Tue, 21 Jul 2026 13:31:11 +0000

Today, I learned one of the most important concepts in JavaScript: the Event Loop and the Concurrency Model.

JavaScript is Single-Threaded

JavaScript is a single-threaded language. This means it can execute only one piece of JavaScript code at a time.

For example:

console.log("A");
console.log("B");
console.log("C");

Output:

A
B
C

JavaScript executes these statements one after another.

What is the Call Stack?

The Call Stack is where JavaScript executes functions. Whenever a function is called, it is added to the stack. After the function finishes executing, it is removed from the stack.

Example:

function one() {
two();
}

function two() {
console.log("Hello");
}

one();

Execution order:

one()
↓
two()
↓
console.log()
↓
Stack becomes empty

The Call Stack follows the Last In, First Out (LIFO) principle.

What are Web APIs and Node APIs?

Some operations take time, such as:

Waiting for a timer
Making an API request
Reading a file
Listening for button clicks

JavaScript itself cannot perform these operations.

Instead, it asks the runtime to handle them.

In Browsers

The browser provides Web APIs such as:

setTimeout()
setInterval()
fetch()
addEventListener()
DOM APIs
localStorage

In Node.js

Node.js provides Node APIs such as:

fs.readFile()
fs.writeFile()
path
os
http

These APIs perform asynchronous work outside the JavaScript engine.

Callback (Macrotask) Queue

When an asynchronous operation like setTimeout() finishes, its callback does not execute immediately.

Instead, it is placed into the Callback Queue, also called the Macrotask Queue.

Example:

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

After one second Call back function added to Callback Queue.
It waits there until the Event Loop moves it to the Call Stack.

Microtask Queue

The Microtask Queue has a higher priority than the Callback Queue.

The following callbacks are added to the Microtask Queue:

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

Example:

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

The callback is placed in the Microtask Queue.

Event Loop

The Event Loop is responsible for checking whether the Call Stack is empty.

When the Call Stack becomes empty, it:

Executes all Microtasks
Executes one Callback (Macrotask)
Again checks call stack is empty or not and does 1&2.

It does not execute code itself. It simply moves callbacks from the queues to the Call Stack.

Why do Promises execute before setTimeout()?

Consider this example:

console.log("Start");

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

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

console.log("End");

Output:
Start
End
Promise
Timeout

Why?

Promise.then() goes to the Microtask Queue.
setTimeout() goes to the Callback (Macrotask) Queue.
The Event Loop always executes all Microtasks first before executing Macrotasks.

Does setTimeout() execute exactly on time?

A common misunderstanding is that:

setTimeout(callback, 1000);

means the callback will execute exactly after one second.

This is not true.

It means:

Execute the callback after at least one second.

If the Call Stack is busy with synchronous code, the callback has to wait.

Example:

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

// Imagine this loop takes 3 seconds
for (let i = 0; i < 1e10; i++) {}

console.log("Finished");

Output:
Finished
Done

Even though the timer finished after one second, the callback waited until the Call Stack became empty.

What is the JavaScript Concurrency Model?

JavaScript can execute only one line of code at a time, but it can still handle many asynchronous operations.

For example:

A timer can be counting.
A network request can be downloading.
The browser can listen for button clicks.

All these operations are handled by the browser or Node.js while JavaScript continues executing other code.

When these operations finish, their callbacks are added to the appropriate queue.

This ability to make multiple operations progress during the same period of time is called the Concurrency Model.

Cooperative Concurrency vs True Parallelism

These two terms are often confused.

Cooperative Concurrency

Only one JavaScript task runs at a time.

Tasks take turns executing.

Example:

One chef starts cooking rice, then makes tea while the rice cooks.

The chef is not doing both tasks at the exact same moment, but both tasks are progressing.

JavaScript works like this.

True Parallelism

Multiple tasks execute at the exact same time using different CPU cores or threads.

Example:

Chef 1 cooks rice.
Chef 2 makes tea.
Chef 3 cuts vegetables.

All three are working simultaneously.

Conclusion

Learning the Event Loop and the Concurrency Model helped me understand how JavaScript performs asynchronous operations without blocking the main thread. These concepts explain why Promise callbacks execute before setTimeout(), why timers are not always exact, and how browsers and Node.js work together with JavaScript to build responsive applications.

Understanding these fundamentals is essential for writing efficient JavaScript code.
Thank you for reading! If you're also learning JavaScript, I hope this summary helps you understand these concepts more clearly. Happy coding!

My JavaScript Learning Journey: Understanding How JavaScript Really Works

HARSHITH GADDAM — Tue, 21 Jul 2026 11:32:29 +0000

During this learning session, I focused on JavaScript's internal working, including Execution Context, Variables, Scope, Closures, Hoisting, this binding, Call Stack, and Clean Code Principles like DRY and KISS.

JavaScript Execution Context

The first topic I learned was Execution Context.

An Execution Context is the environment in which JavaScript executes code. Whenever JavaScript runs a script or calls a function, it creates an execution context.

Each execution context has two phases:

i)Memory Creation Phase
Before executing the code, JavaScript scans it and allocates memory.

During this phase:

var variables are initialized with undefined.
let and const are allocated memory but remain uninitialized (Temporal Dead Zone).
Function declarations are stored completely in memory.

Example:

console.log(a);
var a = 10;
Output:
undefined

Because var is initialized with undefined during the memory phase.

ii)Code Execution Phase

After memory allocation, JavaScript starts executing the code line by line.

Example:
var a = 10;
console.log(a);
Output:
10

Variables in JavaScript

I learned the differences between var, let, and const.

a)var
-Function scoped
-Can be redeclared
-Can be reassigned
-Hoisted with undefined

b)let
Block scoped
Cannot be redeclared in the same scope
Can be reassigned
Exists in the Temporal Dead Zone before initialization

c)const
Block scoped
Cannot be redeclared
Cannot be reassigned
Must be initialized during declaration

Lexical Scope

One important concept I learned is Lexical Scope.

Lexical Scope means a function can access variables from the scope where it was created.

Example:

let name = "Harshith";

function greet() {
console.log(name);
}

greet();

The function accesses name because it was created inside the same scope.

Closures

A Closure is created when a function remembers variables from its outer scope even after the outer function has finished executing.

Example:

function counter() {

let count = 0;

return function () {
    count++;
    console.log(count);
};

}

const increment = counter();

increment();
increment();
increment();

Output:
1
2
3

The variable count remains available because of the closure.

Closures are commonly used to create private variables and implement the module pattern.

Hoisting

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.

Example:

console.log(a);
var a = 10;

Output:
undefined

For let and const:

console.log(a);
let a = 10;

Output:
ReferenceError

because the variable is inside the Temporal Dead Zone until it is initialized.

Understanding this Binding

One of the most interesting topics I learned was how JavaScript decides the value of this.

a)Default Binding
function greet() {
console.log(this);
}

greet();

In non-strict mode, this refers to the global object.

b)Implicit Binding
const person = {
name: "Harshith",

greet() {
    console.log(this.name);
}

};

person.greet();

Here, this refers to person.

c)Explicit Binding

JavaScript allows us to manually set this using call(), apply(), and bind().

function greet(city) {
console.log(this.name, city);
}

const person = {
name: "Harshith"
};

greet.call(person, "Hyderabad");

d)new Binding

When a function is called using the new keyword, JavaScript creates a new object and binds this to it.

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

const p = new Person("Harsh");

Writing Better Code with DRY and KISS

Besides JavaScript internals, I also learned two important software engineering principles.

a)DRY (Don't Repeat Yourself)

Instead of repeating the same logic multiple times, create reusable functions.

This makes code easier to maintain.

b)KISS (Keep It Simple, Stupid)

Write simple, readable code instead of overly complex solutions.

Simple code is easier to understand, debug, and maintain.

Thank you for reading! If you're also learning JavaScript, I hope this summary helps you understand these core concepts more clearly. Happy coding!

DEV Community: HARSHITH GADDAM

My JavaScript Learning Journey: Call Back Hell & Promises

1. What is Callback Hell?

Problems with Callback Hell

2. What is a Promise?

3. Promise States

Pending

Fulfilled

Rejected

4. Creating a Promise

5. Using resolve() and reject()

6. Handling Promises

then()

catch()

finally()

7. Promise Chaining

8. Error Propagation

9. Practical Promise Example

10. Key Takeaways

Conclusion

My JavaScript Learning Journey:Object-Oriented Programming (OOP) in JavaScript

1. Inheritance

2. Polymorphism

Example

3. Abstraction

Example

4. Static Members

5. Getters and Setters

6. Encapsulation Using Closures

7. Private Fields (#field)

Conclusion

My JavaScript Learning Journey:Prototypes

1. What is a Prototype?

Example

2. Prototype vs __proto__

prototype

__proto__

3. Prototype Chain

4. Object.create()

5. Classes are Syntactic Sugar

conclusion

My JavaScript Learning Journey:Understanding the JavaScript Event Loop and Concurrency Model

JavaScript is Single-Threaded

What is the Call Stack?

What are Web APIs and Node APIs?

In Browsers

In Node.js

Callback (Macrotask) Queue

Microtask Queue

Event Loop

Why do Promises execute before setTimeout()?

Does setTimeout() execute exactly on time?

What is the JavaScript Concurrency Model?

Cooperative Concurrency vs True Parallelism

Cooperative Concurrency

True Parallelism

Conclusion

My JavaScript Learning Journey: Understanding How JavaScript Really Works

7. Private Fields (`#field`)

2. Prototype vs `proto`

`prototype`

`proto`