DEV Community: Mohana Kumar

Stop Using Callbacks! Learn JavaScript Promises Today

Mohana Kumar — Mon, 30 Mar 2026 03:32:49 +0000

Introduction

Handling asynchronous operations is one of the most important parts of JavaScript. Before promises, developers relied heavily on callbacks, which often led to messy and hard-to-read code.

That’s where Promises come in.

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation.

What is a Promise?

A Promise is like a guarantee that something will happen in the future.

Real-Life Analogy:

Imagine you ordered food online

Pending → Food is being prepared
Fulfilled → Food delivered
Rejected → Order canceled

Promise States

A Promise has three states:

Pending → Initial state
Fulfilled → Operation successful
Rejected → Operation failed

Creating a Promise

You can create a Promise using the Promise constructor.

```javascript id="y9m9y5"
const myPromise = new Promise((resolve, reject) => {
let success = true;

if (success) {
resolve("Operation successful!");
} else {
reject("Operation failed!");
}
});




---

##  Consuming a Promise

You handle promises using `.then()` and `.catch()`.



```javascript id="b7y6cf"
myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

Promise Chaining

Promises allow chaining multiple async operations cleanly.

```javascript id="u5q7w2"
new Promise((resolve) => {
resolve(2);
})
.then((num) => {
return num * 2;
})
.then((num) => {
return num * 3;
})
.then((num) => {
console.log(num); // 12
});




---

##  Handling Errors

Errors can be handled using `.catch()`.



```javascript id="8j9k2x"
new Promise((resolve, reject) => {
  reject("Something went wrong!");
})
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

Promise vs Callback

Feature	Callback	Promise
Readability	Hard (callback hell)	Clean & structured
Error Handling	Difficult	Easy with `.catch()`
Chaining	Not easy	Easy

Why Use Promises?

✔ Avoid callback hell
✔ Better readability
✔ Easier error handling
✔ Cleaner async code

When to Use Promises

API calls
Database operations
File handling
Timers

Conclusion

Promises simplify asynchronous programming in JavaScript
They replace messy callbacks with clean, readable code

Confused About Sync vs Async JavaScript? Read This!

Mohana Kumar — Fri, 27 Mar 2026 17:16:03 +0000

Introduction

JavaScript is one of the most popular programming languages used for building web applications. One of the most important concepts every developer must understand is how JavaScript executes code — specifically, the difference between synchronous and asynchronous behavior.

Understanding this will help you write faster, more efficient, and non-blocking applications.

What is Synchronous JavaScript?

Synchronous JavaScript means that code is executed line by line, in order. Each task must complete before the next one begins.

Key Idea:

One task at a time — blocking execution.

Example:

console.log("First");
console.log("Second");
console.log("Third");

Output:

First
Second
Third

Advantages:

Simple and easy to understand
Predictable execution order

Disadvantages:

Blocks execution
Can make applications slow if tasks take time

What is Asynchronous JavaScript?

Asynchronous JavaScript allows tasks to run in the background, without blocking the main thread. This means other code can continue executing while waiting for a task to complete.

Key Idea:

Non-blocking execution — multiple tasks handled efficiently.

Example:

console.log("First");

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

console.log("Third");

Output:

First
Third
Second

Advantages:

Faster and more efficient
Improves user experience
Prevents UI freezing

Disadvantages:

Slightly harder to understand
Requires handling callbacks or promises

Synchronous vs Asynchronous — Key Differences

Feature	Synchronous	Asynchronous
Execution	One after another	Runs in background
Blocking	Yes	No
Performance	Slower for heavy tasks	Faster & efficient
Complexity	Simple	Slightly complex
Use Cases	Simple logic	APIs, timers, I/O tasks

Real-Life Analogy

Synchronous:

Cooking one dish at a time — you wait until it’s done before starting the next.

Asynchronous:

Ordering food and doing other work while waiting for delivery.

When to Use What?

Use Synchronous:

Simple calculations
Sequential operations
Small scripts

Use Asynchronous:

API calls
File handling
Database operations
Timers and delays
Network requests

Conclusion

JavaScript is synchronous by default
Asynchronous programming makes it powerful and efficient
Mastering async concepts is essential for modern web development

JavaScript Closures Made Easy: Understand in 10 Minutes

Mohana Kumar — Fri, 27 Mar 2026 03:55:53 +0000

Closures are one of the most powerful (and sometimes confusing) concepts in JavaScript. Once you understand them, a lot of advanced JavaScript patterns start to make sense.

Let’s break it down in a simple way.

What is a Closure?

A closure is created when a function remembers the variables from its outer (parent) scope even after that outer function has finished executing.

In simple terms:
A closure lets a function access variables from outside its scope, even later.

Basic Example

function outerFunction() {
  let message = "Hello, Bonda!";

  function innerFunction() {
    console.log(message);
  }

  return innerFunction;
}

const myFunction = outerFunction();
myFunction(); // Output: Hello, Bonda!

What’s happening here?

outerFunction runs and creates a variable message
It returns innerFunction
Even after outerFunction finishes, innerFunction still remembers message

That memory is called a closure

Why Closures Work

Closures work because of lexical scope in JavaScript.

Functions remember where they were created
Not where they are executed

Real-World Example: Counter

function createCounter() {
  let count = 0;

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

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Explanation:

count is private (can’t access it directly)
The inner function still remembers and updates it
This is commonly used for data privacy

Closures for Data Privacy

function bankAccount() {
  let balance = 1000;

  return {
    deposit(amount) {
      balance += amount;
      return balance;
    },
    getBalance() {
      return balance;
    }
  };
}

const account = bankAccount();

console.log(account.getBalance()); // 1000
account.deposit(500);
console.log(account.getBalance()); // 1500

Here, balance is protected and can only be accessed via methods.

Common Mistake with Closures

for (var i = 1; i <= 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

Output:

4
4
4

Why?

var is function-scoped
All functions share the same i

Fix using `let`:

for (let i = 1; i <= 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

Output:

1
2
3

Why Closures Are Useful

Closures are used in:

Data hiding / encapsulation
Creating private variables
Function factories
Event handlers
Callbacks and async code

Key Takeaways

A closure is a function that remembers its outer variables
It allows data persistence
It helps in writing clean and modular code
It enables private variables

Final Thought

Closures might feel tricky at first, but once you get them, they unlock a lot of JavaScript power.

🔴🔵 Color Toggle Using Button in HTML, CSS, and JavaScript

Mohana Kumar — Wed, 25 Mar 2026 14:46:41 +0000

Introduction

This program shows how to change the color of a heading (<h1>) between red and blue when a button is clicked using JavaScript.

Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .red {
      color: red;
    }

    .blue {
      color: blue;
    }
  </style>
</head>
<body>

<h1 id="title" class="red">Hello</h1>

<button onclick="toggleColor()">Change Color</button>

<script>
  function toggleColor() {
    const el = document.getElementById("title");
    el.classList.toggle("red");
    el.classList.toggle("blue");
  }
</script>

</body>
</html>

How It Works

1. HTML

<h1> displays the text Hello
It starts with class red
A button is used to trigger the color change

2. CSS

.red → sets text color to red
.blue → sets text color to blue

3. JavaScript

getElementById("title") selects the <h1>
classList.toggle() switches classes:
- removes current color
- adds the other color

Output Behavior

Initially → 🔴 Red
Click button → 🔵 Blue
Click again → 🔴 Red

Conclusion

This is a simple example of:

DOM manipulation
Event handling
Using CSS classes with JavaScript

It helps beginners understand how web pages become interactive.

Understanding the DOM: The Backbone of Interactive Web Development

Mohana Kumar — Wed, 25 Mar 2026 14:40:56 +0000

What is DOM?

The Document Object Model (DOM) is a programming interface used in web development that represents a web page as a structured tree of objects. When a browser loads an HTML or XML document, it automatically converts it into the DOM.

In simple terms, the DOM allows programming languages like JavaScript to access, modify, and manipulate the content, structure, and styles of a webpage dynamically.

Instead of treating a webpage as static text, the DOM turns it into a live, interactive model where each element (like headings, paragraphs, images, and buttons) becomes an object that can be controlled.

How the DOM Works

When a webpage is loaded:

The browser reads the HTML file
It creates a tree-like structure (DOM tree)
Each HTML element becomes a “node” (object)
JavaScript can then interact with these nodes

For example, a simple HTML structure:

<body>
  <h1>Hello</h1>
  <p>Welcome!</p>
</body>

Becomes a DOM tree where:

body is the parent node
h1 and p are child nodes

Purpose of the DOM

1. Dynamic Content Updates

The DOM allows developers to change webpage content without reloading the page.

Example:

document.querySelector("h1").textContent = "Hello World!";

This makes websites interactive and responsive.

2. Handling User Interactions

The DOM enables programs to respond to user actions like clicks, typing, and scrolling.

Example:

button.addEventListener("click", function() {
  alert("Button clicked!");
});

3. Modifying Styles in Real-Time

Developers can change CSS styles dynamically using the DOM.

Example:

document.body.style.backgroundColor = "lightblue";

4. Navigating the Document Structure

The DOM allows traversal between elements such as parent, child, and sibling nodes.

This helps in locating and modifying specific parts of a webpage efficiently.

5. Creating and Deleting Elements

The DOM allows adding or removing elements dynamically.

Example:

const newPara = document.createElement("p");
newPara.textContent = "New paragraph added!";
document.body.appendChild(newPara);

6. Foundation for Modern Web Development

The DOM is essential for building modern, interactive web applications. Many frameworks and libraries rely heavily on DOM manipulation to update user interfaces efficiently.

Advantages of Using DOM

Makes web pages interactive
Enables real-time updates
Improves user experience
Allows structured access to webpage elements
Supports event-driven programming

Conclusion

The Document Object Model (DOM) is a core concept in web development that transforms static web pages into dynamic, interactive applications. It acts as a bridge between HTML and programming languages, enabling developers to control and manipulate web content efficiently.

Understanding the DOM is essential for anyone learning web development, as it forms the foundation for creating modern, responsive, and user-friendly websites.

Understanding var, let, and const in JavaScript: A Complete Beginner-Friendly Guide

Mohana Kumar — Fri, 13 Feb 2026 17:45:30 +0000

Introduction to var in JavaScript

In JavaScript, var is used to declare variables. It was the original way to create variables before let and const were introduced in ES6 (2015).
Although still supported, var behaves differently from let and const. Understanding how it works is important, especially when reading older JavaScript code.

Historical Background of var

Before ES6, var was the only keyword available for declaring variables in JavaScript. Developers relied entirely on it to store and manage data in their programs. With the release of ES6, let and const were introduced to fix several limitations of var.

Function Scope Behavior

One of the most important characteristics of var is that it is function-scoped, not block-scoped. This means a variable declared with var inside a block (such as an if statement or loop) is still accessible outside that block, as long as it is within the same function.

Example:

if (true) {
    var message = "Hello";
}

console.log(message); // "Hello"

Hoisting in var

Variables declared with var are hoisted. This means their declarations are moved to the top of their scope before code execution. However, only the declaration is hoisted — not the value. The variable is initialized with undefined.

Example:

console.log(name); // undefined
var name = "John";

Redeclaration and Reassignment

Another difference is that var allows both redeclaration and reassignment within the same scope.

var count = 5;
var count = 10; // Allowed

This flexibility can sometimes create unexpected bugs in larger applications.

Introduction to let in JavaScript

In JavaScript, let is used to declare variables. It was introduced in ES6 (2015) as an improved alternative to var.

Unlike var, let follows block scope rules and helps prevent common mistakes in variable handling.

Historical Background of let

Before ES6, developers only had var for declaring variables. However, var had issues such as lack of block scope and unexpected hoisting behavior. To solve these problems, ES6 introduced let and const to provide safer and more predictable variable declarations.

Block Scope Behavior

One of the most important characteristics of let is that it is block-scoped. This means a variable declared with let inside a block (such as an if statement or loop) is only accessible within that block.
Example:

if (true) {
    let message = "Hello";
}

console.log(message); // Error

Here, message cannot be accessed outside the if block.

Hoisting in let

Variables declared with let are hoisted, but they are not initialized. They exist in something called the Temporal Dead Zone (TDZ) from the start of the block until the declaration line.
Example:

console.log(name); // Error
let name = "John";

Unlike var, let does not initialize the variable with undefined.

Redeclaration and Reassignment

let allows reassignment but does not allow redeclaration within the same scope.

let count = 5;
count = 10; // Allowed

let count = 20; // Error

This prevents accidental overwriting of variables.

Introduction to const in JavaScript

In JavaScript, const is used to declare variables whose values should not be reassigned. It was also introduced in ES6 (2015).

const provides a way to create constant references, making code more predictable and secure.

Historical Background of const

Before ES6, JavaScript did not have a proper way to declare constant variables. Developers often relied on naming conventions (such as uppercase variable names). ES6 introduced const to officially support constant declarations.

Block Scope Behavior

Like let, const is block-scoped. A variable declared with const is only accessible within the block where it is defined.
Example:

if (true) {
    const message = "Hello";
}

console.log(message); // Error

Hoisting in const

Variables declared with const are hoisted but not initialized. They also follow the Temporal Dead Zone rule.
Example:

console.log(pi); // Error
const pi = 3.14;

Redeclaration and Reassignment

const does not allow redeclaration or reassignment.
Example:

const count = 5;
count = 10; // Error

const count = 20; // Error

Importance of Understanding var,let,const

var
Even though modern JavaScript development mainly uses let and const, understanding var is essential. Many existing projects and older codebases still use it. Knowing how it behaves helps developers read, debug, and maintain legacy code effectively.

let
let is widely used in modern JavaScript development. It is preferred when the value of a variable needs to change during program execution. Understanding let helps developers write cleaner and more maintainable code.

const
In modern JavaScript development, const is often used by default. Developers use const whenever the variable reference should not change. This helps make programs safer and easier to understand.

what is HTML tags and usage and basic HTML tags

Mohana Kumar — Mon, 05 Jan 2026 17:53:30 +0000

WHAT IS HTML TAGS?

An HTML tag tells the browser how to display or handle content.

Basic tag structure

<tagname> opening tag
</tagname> closing tag

USAGE OF TAGS?

HTML tags are used to create, structure, and format content on a web page. Each tag has a specific purpose.

Basic html tags

<HTML>
Usage: Defines the beginning and end of an HTML document.
<head>
Usage: Contains meta information like title, styles, and scripts.
<title>
Usage: Sets the title of the webpage.
<body>
Usage: Holds all visible content of the webpage.
<h1>
Usage: Used for headings.

WHAT IS HTML?WHAT IS MARKUP LANGUAGE?

Mohana Kumar — Fri, 02 Jan 2026 16:16:35 +0000

FOUNDER OF HTML
The founder of HTML is Tim Berners-Lee.
YEAR:1991

WHAT IS HTML?

HTML stands for Hype Text Markup Language.
It is the standard language used to create web pages.
HTML tells a web browser what content to show and how it is structured, like headings, paragraphs, images, links, and buttons.

What HTML does?

Creates headings and text
Adds images and videos
Makes links to other pages
Builds forms and buttons

WHAT IS MARKUP LANGUAGE?

A markup language is a system of tags used to structure, format, and describe content in a document.

Common markup languages:
HTML
XML
Markdown.

DEV Community: Mohana Kumar

Stop Using Callbacks! Learn JavaScript Promises Today

Introduction

What is a Promise?

Real-Life Analogy:

Promise States

Creating a Promise

Promise Chaining

Promise vs Callback

Why Use Promises?

When to Use Promises

Conclusion

Confused About Sync vs Async JavaScript? Read This!

Introduction

What is Synchronous JavaScript?

Key Idea:

Example:

Output:

Advantages:

Disadvantages:

What is Asynchronous JavaScript?

Key Idea:

Example:

Output:

Advantages:

Disadvantages:

Synchronous vs Asynchronous — Key Differences

Real-Life Analogy

Synchronous:

Asynchronous:

When to Use What?

Use Synchronous:

Use Asynchronous:

Conclusion

JavaScript Closures Made Easy: Understand in 10 Minutes

What is a Closure?

Basic Example

What’s happening here?

Why Closures Work

Real-World Example: Counter

Explanation:

Closures for Data Privacy

Common Mistake with Closures

Output:

Why?

Fix using let:

Output:

Why Closures Are Useful

Key Takeaways

Final Thought

🔴🔵 Color Toggle Using Button in HTML, CSS, and JavaScript

Introduction

Code

How It Works

1. HTML

2. CSS

3. JavaScript

Output Behavior

Conclusion

Understanding the DOM: The Backbone of Interactive Web Development

What is DOM?

How the DOM Works

Purpose of the DOM

1. Dynamic Content Updates

2. Handling User Interactions

3. Modifying Styles in Real-Time

4. Navigating the Document Structure

5. Creating and Deleting Elements

6. Foundation for Modern Web Development

Advantages of Using DOM

Conclusion

Understanding var, let, and const in JavaScript: A Complete Beginner-Friendly Guide

Introduction to var in JavaScript

Introduction to let in JavaScript

Introduction to const in JavaScript

Importance of Understanding var,let,const

what is HTML tags and usage and basic HTML tags

WHAT IS HTML?WHAT IS MARKUP LANGUAGE?

Fix using `let`: