DEV Community: Abimanyu P

Promises In JS

Abimanyu P — Tue, 08 Sep 2026 15:38:03 +0000

Promises in JavaScript

When JavaScript performs an operation that takes some time, such as fetching data from a server, it does not want to wait and block the rest of the program. Instead, JavaScript can handle the operation asynchronously.

A Promise is an object that represents the eventual result of an asynchronous operation. In simple words, a Promise means "I don't have the result right now, but I will give you the result later."

Creating a Promise

We can create a Promise using the built-in Promise constructor:

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

    const age = 10;

    setTimeout(() => {

        if (age >= 18) {
            resolve("You are eligible to vote");
        }

        else {
            reject("You are not eligible to vote");
        }

    }, 3000);

});

Here, Promise is a built-in JavaScript constructor, and new Promise() creates a new Promise object.

The function passed to new Promise() is called the executor function:

(resolve, reject) => {
    // code
}

resolve and reject are parameters of this executor function. The Promise constructor provides functions as arguments for these parameters.

We call resolve() when the operation is successful and reject() when the operation fails.

resolve("You are eligible to vote");

means the operation was successful.

reject("You are not eligible to vote");

means the operation failed.

Promise States

A Promise has three possible states:

State	Meaning
Pending	The operation is still in progress
Fulfilled	The operation completed successfully
Rejected	The operation failed

In our example, when the Promise is created, it is initially pending.

After 3 seconds, the age is checked. Since the age is 10, the condition is false and reject() is called.

So the Promise changes from:

Pending
   ↓
Rejected

If the age were 18 or above, resolve() would be called instead:

Pending
   ↓
Fulfilled

Handling a Promise

After creating the Promise, we can use .then() to handle a successful result and .catch() to handle an error.

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

    const age = 10;

    setTimeout(() => {

        if (age >= 18) {
            resolve("You are eligible to vote");
        }

        else {
            reject("You are not eligible to vote");
        }

    }, 3000);

})

.then((message) => {

    console.log(message);

})

.catch((error) => {

    console.log(error);

});

When resolve() is called, the value passed to it is received by .then():

resolve("You are eligible to vote");

The value "You are eligible to vote" becomes the argument passed to the .then() callback.

In:

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

message is a parameter. It receives the value provided by the fulfilled Promise.

So the flow is:

resolve("You are eligible to vote")
              ↓
           .then()
              ↓
message = "You are eligible to vote"
              ↓
       console.log(message)

Similarly, when reject() is called:

reject("You are not eligible to vote");

the value is passed to .catch():

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

Here, error is a parameter that receives the rejected value.

The flow is:

reject("You are not eligible to vote")
              ↓
          .catch()
              ↓
error = "You are not eligible to vote"
              ↓
       console.log(error)

Why Promises Are Useful

Promises are especially useful for handling asynchronous operations. For example, an application might need to:

Get a user
Get the user's orders
Get the details of an order
Make a payment

When many asynchronous operations depend on each other, using callbacks can result in deeply nested code called callback hell.

Promises allow us to chain these operations using .then():

getUser()
    .then(user => getOrders(user))
    .then(orders => getOrderDetails(orders[0]))
    .then(order => makePayment(order))
    .catch(error => {
        console.log(error);
    });

Each .then() receives the result from the previous Promise and can return another Promise for the next operation.

This allows asynchronous operations to be written as a chain instead of deeply nested callbacks.

Conclusion

A Promise represents the eventual result of an asynchronous operation. It starts in a pending state and eventually becomes either fulfilled or rejected.

The important things to remember are:

Promise is a built-in constructor.
new Promise() creates a Promise object.
The function passed to new Promise() is called the executor function.
resolve and reject are parameters that receive functions from the Promise constructor.
resolve() is used when the operation succeeds.
reject() is used when the operation fails.
.then() handles a fulfilled Promise.
.catch() handles a rejected Promise.
Promises can be chained to make asynchronous code easier to manage.

The basic idea is:

        Promise
           ↓
       Pending
        ↙     ↘
   resolve   reject
      ↓         ↓
 Fulfilled   Rejected
      ↓         ↓
   .then()   .catch()

CallBack In JS

Abimanyu P — Mon, 07 Sep 2026 15:55:45 +0000

Callback in JavaScript

A callback is a function that is passed as an argument to another function. The receiving function can then call that function when it needs to. In simple words, a callback allows us to say, "Here is a function; call it when you are ready."

What is a Callback?

JavaScript allows us to pass functions as values. This means a function can be stored in a variable, passed as an argument, or returned from another function. When we pass a function to another function and that function later calls it, the passed function is called a callback function.

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

function execute(callback) {
    callback()
}

execute(greet)

Here, greet is passed to execute() as an argument. Inside execute(), the callback() parameter refers to the greet function, so calling callback() executes greet().

greet()
   ↓
passed to
   ↓
execute(greet)
   ↓
callback()
   ↓
greet() executes

Why Do We Need Callbacks?

Callbacks are useful when we want one function to perform some work and then execute another function at a particular point. They are especially important when working with asynchronous operations, where we may want something to happen after an operation finishes.

For example, setTimeout() accepts a callback:

setTimeout(function () {
    console.log("2 seconds passed")
}, 2000)

Here, the function passed to setTimeout() is the callback. JavaScript calls this function after the timer finishes.

Passing a Function vs Calling a Function

When passing a callback, we usually pass the function without parentheses.

execute(greet)

This means:

"Pass the greet function to execute."

But:

execute(greet())

means:

"Call greet now and pass its returned value to execute."

So these two are not the same.

What is Callback Hell in JavaScript?

In JavaScript, a callback is a function that is passed to another function and executed later. Callbacks are commonly used when working with asynchronous operations such as fetching data, reading files, or waiting for a task to complete.

The problem starts when we have many asynchronous operations that depend on each other. We may put one callback inside another callback, and then another callback inside that. This creates a deeply nested structure called Callback Hell.

Example of Callback Hell

Imagine we need to perform these tasks one after another:

Get user data
Get the user's orders
Get the details of the first order
Make a payment

Using callbacks, the code might look like this:

getUser(function(user) {
    getOrders(user, function(orders) {
        getOrderDetails(orders[0], function(order) {
            makePayment(order, function(result) {
                console.log("Payment completed")
            })
        })
    })
})

Here, each operation depends on the previous operation. Because of this, each callback is placed inside another callback.

As the number of asynchronous operations increases, the code becomes more deeply nested. This makes the code harder to read, understand, debug, and maintain.

This deeply nested callback structure is what we commonly call Callback Hell.

Closure in javascript

Abimanyu P — Mon, 07 Sep 2026 15:36:51 +0000

Closures in JavaScript

Closures are one of the most important concepts in JavaScript. They can look confusing at first because they involve functions, lexical scope, and lexical environments together. But once we understand how these concepts are connected, closures become much easier to understand.

A simple definition of closure is:

A closure is a function that remembers and can access variables from its surrounding lexical environment even after the outer function has finished executing.

The word "remembers" here doesn't mean that JavaScript literally copies the variables into the function. Instead, the function maintains a connection to the lexical environment in which it was created.

Let's understand it with an example

Consider the following code:

function outer() {
    let name = "Abimanyu"

    function inner() {
        console.log(name)
    }

    return inner
}

let myFunction = outer()

myFunction()

When outer() is called, JavaScript creates a lexical environment for it. That environment contains the variable name:

Outer Lexical Environment
    name → "Abimanyu"

The inner() function is created inside outer(), so it has access to that surrounding environment. When outer() returns inner, the function is stored in myFunction.

Now outer() has finished executing, but myFunction still refers to inner().

myFunction
    ↓
  inner()
    ↓
Outer Lexical Environment
    ↓
name → "Abimanyu"

When we call:

myFunction()

inner() needs the value of name. Since name is not inside its own environment, JavaScript looks through its surrounding environment and finds name in the environment created by outer().

This is the important part of a closure: the function retains access to the environment where it was created, even though the outer function has already finished executing.

Why doesn't `name` disappear?

This is where closures are often misunderstood.

You might think that once outer() finishes, everything created inside it should disappear. But inner() still has a reference to the environment containing name. Since that environment is still reachable through the function, JavaScript cannot simply remove it.

So conceptually, after outer() has finished, we can still think of the relationship like this:

myFunction
    ↓
inner()
    ↓
remembered lexical environment
    ↓
name → "Abimanyu"

The function and its connection to the surrounding environment together form the idea of a closure.

The word "closure" therefore describes the behavior where a function closes over the variables available in its surrounding lexical scope and continues to access them later.

Closure is connected to lexical scope

To understand closures properly, it is useful to remember what lexical scope means.

Lexical scope means that the scope of a function is determined by where the function is written in the code, not where the function is called.

For example, inner() was written inside outer(), so its surrounding lexical scope includes outer().

function outer() {
    let message = "Hello"

    function inner() {
        console.log(message)
    }

    return inner
}

Because of where inner() is written, it can access message.

This relationship exists before we even call the function. The function's position in the source code determines its lexical surroundings.

Closures can maintain state

One of the most useful things about closures is that they allow a function to maintain state between calls.

function createCounter() {
    let count = 0

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

let counter = createCounter()

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

Here, createCounter() finishes executing after returning the function. However, the returned function still has access to count.

Each time counter() is called, it accesses the same count variable and changes its value.

So the value isn't recreated from scratch on every call. The closure keeps the connection to the environment where count was created.

This ability to preserve state is one reason closures are so useful in JavaScript.

Closures can also provide data privacy

Closures can be used to keep certain variables inaccessible directly from outside code.

For example:

function createAccount() {
    let balance = 1000

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

        getBalance() {
            return balance
        }
    }
}

let account = createAccount()

account.deposit(500)

console.log(account.getBalance()) // 1500

Here, balance cannot be accessed directly through account.balance. However, deposit() and getBalance() can access it because both functions were created inside the environment containing balance.

The closure therefore allows those functions to work with the private state without exposing the variable directly.

Lexical Scope

Abimanyu P — Sun, 06 Sep 2026 07:21:14 +0000

What is Lexical Scope?

Lexical scope is the rule that determines where a variable can be accessed based on where the code is written.

The word lexical basically means that JavaScript determines the scope by looking at the structure of the code. It does not matter where a function is called from; what matters is where that function was defined.

For example:

let name = "John";

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

greet();

Here, name is declared outside the greet() function. Since greet() is written in the global scope, it can access name from that outer scope.
This relationship is decided by the way the code is written. This is what we mean by lexical scope.

Nested Scopes

Scopes can exist inside other scopes. This is called nested scope.

For example:

function outer() {
  let name = "John";

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

  inner();
}

outer();

Here, inner() is written inside outer(). Because of this, inner() can access variables that belong to outer().
We can visualize the scopes like this:

Global Scope
    │
    └── outer() Scope
            │
            └── inner() Scope

The inner scope can access variables from its outer scope, but the outer scope cannot access variables that exist only inside the inner scope.

For example:

function outer() {
  function inner() {
    let age = 25;
  }

  console.log(age); // ReferenceError
}

age belongs to inner()'s scope. Therefore, outer() cannot directly access it.
This idea also applies to blocks. A block created with { } can have its own scope when using let and const.
This is called block scope, and it is also part of JavaScript's lexical scoping system.

Lexical Scope and Lexical Environment

Lexical scope and lexical environment are closely related, but they are not the same thing.
Lexical scope describes the rules of accessibility. It tells us which variables a particular piece of code is allowed to access based on where that code is written.

A lexical environment, on the other hand, is the internal structure JavaScript uses to keep track of variables and functions in a scope and their relationship with outer environments.

So, a simple way to remember the difference is:

Lexical scope is about where variables can be accessed, while a lexical environment is the internal structure that keeps track of those variables and their connection to outer scopes.

Understanding lexical scope is important because it forms the foundation for understanding closures, where a function can continue to access variables from its surrounding scope even after the outer function has finished executing.

Lexical Environment in JavaScript

Abimanyu P — Sat, 05 Sep 2026 17:41:10 +0000

Lexical Environment in JavaScript:

A Lexical Environment in JavaScript is a place where JavaScript keeps track of the variables and functions available in a particular scope. It also keeps a reference to the outer scope, so JavaScript can find variables that are not available in the current scope.

In simple words, you can think of a lexical environment as a storage area for variables and functions along with a link to the outer scope.

When is a Lexical Environment created?

A lexical environment is created for a scope. For example, when a function is called, JavaScript creates a new lexical environment for that function. This environment contains its parameters and local variables.

Consider this example:

function outer() {
  var x = 10;

  function inner() {
    console.log(x);
  }

  inner();
}

outer();

Here, outer() has its own lexical environment, which contains x.
The inner() function has its own lexical environment, but it can also access the lexical environment of outer() because inner() was written inside outer().
So, inner() can find x even though x is not declared inside inner().

How does JavaScript find a variable?

When JavaScript sees a variable name, it first looks in the current lexical environment.
If it doesn't find the variable there, it looks in the outer lexical environment.
It continues moving outward until it finds the variable or reaches the global scope.

For example:

var name = "John";

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

greet();

When JavaScript tries to find name inside greet(), it first checks greet()'s environment.
name is not there, so JavaScript looks in the outer environment. It finds name in the global environment.
If JavaScript cannot find the variable anywhere, it throws a ReferenceError.

The lookup works roughly like this:

greet() environment
       ↓
outer environment
       ↓
global environment

DOM In JavaScript

Abimanyu P — Thu, 03 Sep 2026 16:05:04 +0000

DOM in JavaScript

When we create a webpage using HTML, the browser needs a way to understand and manage all the elements on that page. For this, the browser creates a structure called the DOM.

DOM stands for Document Object Model. It represents an HTML document as a tree of objects, where elements like <html>, <body>, <h1>, <p>, and <button> become nodes that JavaScript can access and modify.

What is the DOM?

Consider this HTML:

<!DOCTYPE html>
<html>
<body>
    <h1>Hello</h1>
    <p>This is a paragraph.</p>
</body>
</html>

The browser represents it approximately like this:

Document
│
└── html
    │
    └── body
        ├── h1
        │   └── "Hello"
        │
        └── p
            └── "This is a paragraph."

This tree-like representation is called the DOM tree.

JavaScript can interact with this tree to select elements, change their content, modify their styles, create new elements, remove elements, and respond to user actions.

The basic process is:

HTML
 ↓
Browser
 ↓
DOM
 ↓
JavaScript modifies DOM
 ↓
Webpage gets updated

The `document` Object

The main way JavaScript interacts with the DOM is through the document object.

console.log(document);

The document object represents the current HTML document and provides many methods for finding and manipulating elements.

For example:

let heading = document.getElementById("title");

Here, JavaScript uses the document object to find an element from the DOM.

Selecting Elements

Before modifying an element, we usually need to select it.

`getElementById()`

It selects an element using its id.

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

let heading = document.getElementById("title");

The heading variable now refers to the <h1> element.

`querySelector()`

querySelector() selects the first element that matches a CSS selector.

let heading = document.querySelector("h1");

It can also be used with classes and IDs:

let box = document.querySelector(".box");

let title = document.querySelector("#title");

`querySelectorAll()`

querySelectorAll() selects all elements matching a CSS selector.

<p>Hello</p>
<p>World</p>
<p>JavaScript</p>

let paragraphs = document.querySelectorAll("p");

Now paragraphs contains all three <p> elements.

You can access individual elements using their index:

console.log(paragraphs[0]);
console.log(paragraphs[1]);

Changing Content

After selecting an element, JavaScript can change its content.

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

let heading = document.getElementById("title");

heading.textContent = "Hello JavaScript";

The heading on the webpage changes from Hello to Hello JavaScript.

`textContent` and `innerHTML`

textContent treats the assigned value as plain text.

heading.textContent = "<b>Hello</b>";

The browser displays:

<b>Hello</b>

It does not create a bold element.

innerHTML interprets the value as HTML:

heading.innerHTML = "<b>Hello</b>";

Now the <b> element is created inside the heading.

For plain text, textContent is generally the safer and simpler choice.

Changing CSS

JavaScript can also modify an element's inline styles.

heading.style.color = "red";
heading.style.fontSize = "40px";

This changes the heading's color and font size.

For larger styling changes, it is often better to use CSS classes:

heading.classList.add("active");

This allows CSS to control the actual styling while JavaScript controls which class is applied.

Changing Attributes

HTML elements can have attributes such as src, href, id, and class.

JavaScript can read and modify these attributes.

For example:

<img id="photo" src="old.jpg">

We can change the image source:

let image = document.getElementById("photo");

image.setAttribute("src", "new.jpg");

We can also read the value:

console.log(image.getAttribute("src"));

Creating Elements

The DOM isn't only used to modify existing elements. JavaScript can also create completely new elements.

let paragraph = document.createElement("p");

paragraph.textContent = "This paragraph was created using JavaScript.";

The paragraph has been created, but it is not yet attached to the webpage.

We can add it to the page using appendChild():

document.body.appendChild(paragraph);

Now the new paragraph appears inside the <body>.

Removing Elements

JavaScript can also remove elements from the DOM.

let paragraph = document.querySelector("p");

paragraph.remove();

The selected paragraph is removed from the webpage.

DOM and Events

Another important use of the DOM is handling user actions.

For example, we can listen for a button click:

<button id="btn">Click Me</button>

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

button.addEventListener("click", function () {
    console.log("Button clicked");
});

addEventListener() tells JavaScript to listen for a particular event.

In this example, when the button is clicked, the function runs.

We can also use the event to modify the webpage:

button.addEventListener("click", function () {
    document.body.style.backgroundColor = "lightblue";
});

Now clicking the button changes the background color of the page.

JS Functions & Its Hoisting Rules

Abimanyu P — Wed, 02 Sep 2026 16:23:39 +0000

JavaScript Hoisting and Types of Functions

Functions are one of the most important parts of JavaScript. They allow us to group a block of code into a reusable unit that can be executed whenever it is needed.

JavaScript provides different ways to create functions. Some common types are function declarations, function expressions, arrow functions, and IIFEs. Although all of them are functions, they behave differently in some situations, especially when hoisting is involved.

What is Hoisting in JavaScript?

Hoisting is the behavior of JavaScript where certain declarations are processed before the code is executed line by line.

For example:

console.log(name);

var name = "Abimanyu";

The output is:

undefined

This happens because the var declaration is processed before execution. Conceptually, it is similar to:

var name;

console.log(name);

name = "Abimanyu";

The important thing to notice is that only the declaration is processed early. The assignment happens at its original position.

Hoisting does not mean JavaScript physically moves the code to the top. It describes what happens during the creation phase of the execution context before the code starts executing.

The same idea applies to functions, but the behavior depends on how the function is defined.

What is a Function?

A function is a reusable block of code that performs a particular task.

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

greet();

Here, greet() is a function. Once defined, it can be called whenever required.

JavaScript allows us to create functions in different ways. The way we define a function also affects how hoisting works.

1. Function Declaration

A function declaration is the traditional way of defining a function.

greet();

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

This works even though greet() is called before the function declaration.

The output is:

Hello

This happens because function declarations are fully hoisted. During the creation phase, JavaScript makes the entire function available, including its function body.

So, conceptually, JavaScript already has access to:

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

before it starts executing the code.

Hoisting rule

Function declarations are fully hoisted, so they can normally be called before their declaration.

This is one of the biggest differences between a function declaration and the other function types discussed below.

2. Function Expression

A function expression is a function assigned to a variable.

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

Here, greet is not a function declaration. It is a variable that stores a function.

This distinction is important for hoisting.

For example:

greet();

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

This results in a:

ReferenceError

The reason is that const declarations are hoisted, but they remain in the Temporal Dead Zone (TDZ) until execution reaches their declaration.

The function expression itself is also not available before that point.

If var is used instead:

greet();

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

the result is:

TypeError: greet is not a function

This time, var greet is initialized with undefined during hoisting. The function is assigned to greet only when execution reaches the assignment.

Hoisting rule

A function expression is not hoisted as a callable function. Its behavior depends on the variable used to store it.

var   → undefined before assignment
let   → TDZ
const → TDZ

3. Arrow Function

An arrow function provides a shorter syntax for creating functions.

const add = (a, b) => {
    return a + b;
};

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

Output:

Arrow functions are also commonly stored inside variables. Because of this, they do not receive the same function hoisting behavior as a function declaration.

For example, if an arrow function is stored in a const variable and accessed before its declaration, JavaScript produces a ReferenceError.

add(10, 20);

const add = (a, b) => {
    return a + b;
};

The reason is not that arrow functions have some completely separate hoisting rule. The important point is that add is a const variable containing a function.

Therefore, the variable's rules apply:

const arrow function → TDZ → ReferenceError
let arrow function   → TDZ → ReferenceError
var arrow function   → undefined → TypeError

Hoisting rule

Arrow functions themselves are not hoisted as callable functions. Their behavior depends on the variable declaration used to store them.

This is why:

function greet() {}

and:

const greet = () => {};

should not be treated as identical when discussing hoisting.

4. IIFE

IIFE stands for Immediately Invoked Function Expression.

It is a function expression that is executed immediately after it is created.

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

Output:

Hello

Normally, a function is defined first and called separately:

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

greet();

With an IIFE, the function is executed immediately as part of the expression.

The final () invokes the function:

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

IIFEs were commonly used to create a separate scope for variables and prevent them from interfering with other parts of a program.

Hoisting rule

An IIFE is a function expression, not a function declaration. Therefore, it does not receive the full hoisting behavior of a function declaration.

It executes when JavaScript reaches the expression:

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

There is normally no separate function name that you can call before the IIFE.

The key idea is:

IIFE → function expression → executes when the expression is reached.

Conclusion:

The most important distinction is between a function declaration and a function stored in a variable.

// Function declaration
function greet() {}

The function itself is hoisted.

Whereas:

// Function expression
const greet = function() {};

and:

// Arrow function
const greet = () => {};

store the function in a variable, so the variable's declaration rules determine what happens before the declaration is reached.

Arrays in JavaScript

Abimanyu P — Tue, 01 Sep 2026 16:56:57 +0000

Arrays and its methods in JavaScript

An array in JavaScript is a data structure used to store multiple values in a single variable. we can store different data types and even can store a functions and objects in an array. It is useful when we have a collection of related data that needs to be stored and accessed together.

let fruits = ["Apple", "Banana", "Mango", "Orange"];

In this example, fruits is an array containing four values. Every element in an array has an index, and indexing starts from 0. Therefore, Apple is at index 0, Banana is at index 1, and so on.

console.log(fruits[0]); // Apple
console.log(fruits[2]); // Mango

We can also change an element by accessing its index.

fruits[1] = "Grapes";

console.log(fruits);
// ["Apple", "Grapes", "Mango", "Orange"]

The length property is used to find the number of elements in an array.

console.log(fruits.length);
// 4

`forEach()`

forEach() is used to execute a function once for every element in an array. It is useful when we want to perform an action on each element without creating a new array.

let numbers = [10, 20, 30];

numbers.forEach(function(number) {
    console.log(number);
});

The function passed to forEach() runs three times because the array contains three elements. During each execution, number contains the current element.

10
20
30

We can also get the index of the current element by adding a second parameter to the function.

numbers.forEach(function(number, index) {
    console.log(index, number);
});

Output:

0 10
1 20
2 30

The first parameter represents the current value and the second parameter represents its index.

`map()`

map() is used when we want to transform every element of an array and create a new array from the results.

For example, suppose we have an array of numbers and want to double every number.

let numbers = [10, 20, 30];

let doubled = numbers.map(function(number) {
    return number * 2;
});

console.log(doubled);
// [20, 40, 60]

The function is executed for every element. For 10, it returns 20; for 20, it returns 40; and for 30, it returns 60. Those returned values are collected into a new array.

The original array is not changed:

console.log(numbers);
// [10, 20, 30]

This is the main idea behind map():

Original array → transform each element → new array

`filter()`

filter() is used to create a new array containing only the elements that satisfy a particular condition.

For example, suppose we want to get only the numbers greater than 20.

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(function(number) {
    return number > 20;
});

console.log(result);
// [25, 30]

The function is executed for every element. If the condition returns true, that element is added to the new array. If it returns false, the element is ignored.

For example, 10 > 20 is false, so 10 is not included. 25 > 20 is true, so 25 is included.

Like map(), filter() creates a new array and does not modify the original array.

`find()`

find() is used to find the first element that satisfies a condition.

let numbers = [10, 15, 20, 25, 30];

let result = numbers.find(function(number) {
    return number > 20;
});

console.log(result);
// 25

Here, JavaScript checks the elements one by one. 10 and 15 do not satisfy the condition, and 20 is also not greater than 20. When it reaches 25, the condition becomes true, so find() returns 25 and stops searching.

Even though 30 also satisfies the condition, it is not returned because find() returns only the first matching element.

If no element matches the condition, find() returns undefined.

`push()` and `pop()`

push() and pop() are commonly used when adding or removing elements from the end of an array.

push() adds one or more elements to the end.

let fruits = ["Apple", "Banana"];

fruits.push("Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

Here, "Mango" is added after "Banana". push() modifies the original array.

pop() does the opposite. It removes the last element.

let removedFruit = fruits.pop();

console.log(removedFruit);
// Mango

console.log(fruits);
// ["Apple", "Banana"]

An important point is that pop() returns the element that it removed. This can be useful when we need to store or use the removed value.

push() → adds to the end
pop()  → removes from the end

Similarly, unshift() adds an element at the beginning and shift() removes the first element.


fruits.unshift("Orange");
// ["Orange", "Apple", "Banana"]

fruits.shift();
// ["Apple", "Banana"]

`slice()`

slice() is used to get a portion of an array. It returns a new array and does not modify the original array.

let fruits = ["Apple", "Banana", "Mango", "Orange"];

let result = fruits.slice(1, 3);

console.log(result);
// ["Banana", "Mango"]

console.log(fruits);
// ["Apple", "Banana", "Mango", "Orange"]

The first argument is the starting index, while the second argument is the ending index. The starting index is included, but the ending index is not.

So slice(1, 3) takes the elements at indexes 1 and 2.

Index:  0        1         2         3
       Apple    Banana    Mango     Orange
                 ↑---------↑
                 1         3

This is why the result contains "Banana" and "Mango" but not "Orange".

`splice()`

splice() is used to add, remove, or replace elements in an array. Unlike slice(), it modifies the original array.

For example, we can remove elements using splice().

let fruits = ["Apple", "Banana", "Mango", "Orange"];

fruits.splice(1, 2);

console.log(fruits);
// ["Apple", "Orange"]

The first argument, 1, tells JavaScript where to start. The second argument, 2, tells it how many elements to remove.

Therefore, starting from index 1, JavaScript removes two elements: "Banana" and "Mango".

We can also use splice() to add elements.

let fruits = ["Apple", "Banana", "Orange"];

fruits.splice(2, 0, "Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango", "Orange"]

Here, 2 is the starting position, 0 means that no elements should be removed, and "Mango" is the element we want to add.

The important difference between slice() and splice() is:

slice()  → gets/copies a portion without changing the original
splice() → adds/removes elements and changes the original

`reduce()`

reduce() is used when we want to process all the elements of an array and produce one final value.

For example, we can use it to calculate the total of numbers.

let numbers = [10, 20, 30, 40];

let total = numbers.reduce(function(sum, number) {
    return sum + number;
}, 0);

console.log(total);
// 100

Here, sum stores the accumulated result, while number represents the current element. The 0 at the end is the initial value of sum.

The calculation happens like this:

0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
60 + 40 = 100

Finally, reduce() returns 100.

So while map() generally produces a new array and filter() produces a smaller array, reduce() is commonly used when we want to combine the elements into a single result.

Important Array Methods

Method	Purpose
`forEach()`	Performs an action for each element
`map()`	Transforms elements and creates a new array
`filter()`	Creates a new array with matching elements
`find()`	Returns the first matching element
`push()`	Adds elements to the end
`pop()`	Removes the last element
`slice()`	Copies a portion of an array
`splice()`	Adds or removes elements
`reduce()`	Combines elements into a single result

How To Develop Logic

Abimanyu P — Mon, 31 Aug 2026 18:39:19 +0000

How to Develop Logic for Loop Problems in JavaScript

When solving loop problems in JavaScript, the difficult part is usually not writing the for loop itself. The difficult part is understanding the problem and converting it into a set of rules that the loop can follow. Instead of trying to remember different solutions, it is better to understand what is repeating, what is changing, and how those changes can be represented using variables.

A good example is a right-aligned triangle pattern:

    *
   **
  ***
 ****
*****

Before writing the code, we can break the pattern into rows. There are 5 rows, so the outer loop needs to run 5 times. The next step is to look at what each row contains. The first row has 4 spaces and 1 star, the second has 3 spaces and 2 stars, and this continues until the last row has 0 spaces and 5 stars.

Row    Spaces    Stars
1      4         1
2      3         2
3      2         3
4      1         4
5      0         5

Now the pattern becomes easier to understand. The number of stars is increasing with the row number, so it can be represented using i. The number of spaces is decreasing, which can be represented using n - i. Once these relationships are identified, the code becomes much easier to write.

let n = 5;

for (let i = 1; i <= n; i++) {
    let row = "";

    for (let j = 1; j <= n - i; j++) {
        row += " ";
    }

    for (let j = 1; j <= i; j++) {
        row += "*";
    }

    console.log(row);
}

The important thing here is that we did not start by thinking about the code. We first analyzed the output and found the relationship between rows, spaces, and stars. This same approach can be used for other loop problems as well.

When solving a pattern problem, the first thing to identify is the number of rows. This usually determines the outer loop. After that, examine what is present inside each row. If the row contains stars, numbers, spaces, or a combination of them, determine how their quantity changes from one row to another.
For example :
if the number of stars is 1, 2, 3, 4, 5, it can usually be related to the row variable i. If it is 5, 4, 3, 2, 1, it can often be represented using something like n - i + 1.

Dry running is another important part of developing loop logic. Suppose n = 5 and i = 3.For the right-aligned triangle, the number of spaces is n - i, which gives 2, and the number of stars is i, which gives 3. Therefore, the third row should contain two spaces followed by three stars. Doing this manually for a few iterations helps verify the logic before running the program.

It is also important not to look at the solution immediately when getting stuck. Instead, break the problem into smaller parts. Ask what is repeating, how many times it repeats, what changes during each repetition, and whether the change can be represented using i or j. This process is more useful than memorizing a particular pattern solution because the same thinking can be applied to new problems.

The main goal of practicing loops is not to memorize how to solve a particular problem. The goal is to develop the habit of breaking a problem into smaller repeating operations and finding the relationship between them. Whenever you see a loop problem, try to ask yourself: What is repeating? How many times does it repeat? What changes? What stays the same? Can I express that change using my loop variables? Do I need another loop? Can I verify the logic with a small dry run? Once these questions become natural, solving loop problems becomes much easier.

Loops in JavaScript

Abimanyu P — Fri, 28 Aug 2026 18:38:02 +0000

Loops in JavaScript

Loops in JavaScript are used when we need to execute the same block of code multiple times. Instead of writing the same statements repeatedly, we can use a loop to repeat the execution based on a condition or a collection of values. JavaScript provides different types of loops, and each one is useful in different situations.

The for loop is one of the most commonly used loops in JavaScript. It is generally used when we know how many times we want to execute a block of code. It contains three parts: initialization, condition, and increment or decrement.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Here, let i = 1 initializes the variable, i <= 5 is the condition that determines whether the loop should continue, and i++ increments the value after each iteration.

The while loop executes a block of code as long as the given condition is true. Unlike the for loop, the initialization and increment can be written separately.

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

The condition is checked before every iteration. If the condition is false from the beginning, the code inside the while loop will not execute even once.

The do...while loop is similar to the while loop, but there is one important difference. In a do...while loop, the code inside the loop executes first and the condition is checked afterward. Therefore, the code inside the loop will execute at least once, even if the condition is initially false.

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 5);

JavaScript also provides for...of, which is mainly used to iterate over the values of iterable objects such as arrays and strings. For example, if we have an array of fruits, for...of allows us to directly access each fruit.

let fruits = ["Apple", "Banana", "Mango"];

for (let fruit of fruits) {
    console.log(fruit);
}

In this case, the variable fruit contains "Apple", "Banana", and "Mango" during different iterations.

The for...in loop is mainly used to iterate over the properties or keys of an object. For example:

let user = {
    name: "John",
    age: 25,
    city: "Chennai"
};

for (let key in user) {
    console.log(key);
}

This prints the property names such as name, age, and city. If we want to access the corresponding values, we can use bracket notation with the key.

for (let key in user) {
    console.log(user[key]);
}

One important difference to remember is between for...in and for...of. for...in is used to iterate over keys or property names, while for...of is used to iterate over values. For example, when used with an array, for...in gives the indexes, whereas for...of gives the actual elements.

let fruits = ["Apple", "Banana", "Mango"];

for (let index in fruits) {
    console.log(index);
}

for (let fruit of fruits) {
    console.log(fruit);
}

So, the main loop types in JavaScript are for, while, do...while, for...of, and for...in. The choice of loop depends on what we are trying to achieve. A for loop is useful when the number of iterations is known, while is useful when repetition depends mainly on a condition, do...while is useful when the code must execute at least once, for...of is useful for iterating over values, and for...in is mainly useful for iterating over object properties.

If Else Statements

Abimanyu P — Wed, 26 Aug 2026 17:58:16 +0000

If Else Statements in JavaScript

In JavaScript, if, else if, and else statements are used to control the flow of a program based on conditions. They allow us to execute different blocks of code depending on whether a condition is true or false.

The basic if statement checks a condition and executes the code inside it only when the condition is true.

let age = 20;

if (age >= 18) {
    console.log("You are an adult");
}

Here, age >= 18 is the condition. Since the value of age is 20, the condition is true, so the code inside the if block gets executed. If the condition is false, JavaScript simply skips that block.

When we want to execute another block of code when the condition is false, we can use else.

let age = 16;

if (age >= 18) {
    console.log("You can vote");
} else {
    console.log("You cannot vote");
}

If there are multiple conditions to check, we can use else if.

let marks = 75;

if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 75) {
    console.log("Grade B");
} else if (marks >= 50) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

JavaScript checks these conditions from top to bottom. Once it finds a condition that is true, it executes that block and skips the remaining conditions. In this example, marks >= 90 is false, but marks >= 75 is true, so "Grade B" is printed.

We can also put one if statement inside another if statement. This is called a nested if. A nested if is useful when one condition needs to be checked only after another condition has already been satisfied.

let age = 20;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log("You can drive");
    }
}

Here, the second if is inside the first if. JavaScript first checks whether age >= 18. Only if that condition is true will it check hasLicense. If the person is under 18, the inner condition is not checked.

We can also use else with a nested if.

let age = 20;
let hasLicense = false;

if (age >= 18) {
    if (hasLicense) {
        console.log("You can drive");
    } else {
        console.log("You need a driving license");
    }
} else {
    console.log("You are too young to drive");
}

In this example, the first condition checks the person's age. If the person is at least 18, another condition checks whether they have a license. This creates a decision inside another decision.

Sometimes nested if statements can be replaced with logical operators. For example:

let userLoggedIn = true;
let isAdmin = true;

if (userLoggedIn) {
    if (isAdmin) {
        console.log("Show admin panel");
    }
}

The same logic can be written using the && operator:

if (userLoggedIn && isAdmin) {
    console.log("Show admin panel");
}

Both approaches can work, but nested if statements are useful when the second decision depends on the result of the first condition or when each level needs its own logic.

JavaScript also allows conditions to work with values that are not explicitly true or false. JavaScript evaluates values as truthy or falsy when they are used as conditions.

let username = "Abimanyu";

if (username) {
    console.log("Username exists");
}

A non-empty string is truthy, so the if block executes. On the other hand, an empty string is falsy.

let username = "";

if (username) {
    console.log("Username exists");
} else {
    console.log("Username is empty");
}

So, if, else if, and else are mainly used when we need to make decisions in our JavaScript code. A nested if takes this one step further by allowing one condition to be checked inside another condition. These statements are fundamental for controlling how a program behaves based on different situations.

DOM In JavaScript

Abimanyu P — Tue, 25 Aug 2026 13:34:42 +0000

What is DOM in JavaScript?

DOM stands for Document Object Model. It is a programming interface provided by the browser that represents an HTML document as a tree of objects. JavaScript uses the DOM to access and modify the elements of a web page.

For example, if we have an HTML element like:

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

JavaScript can access this element through the DOM:

const title = document.getElementById("title");

Here, getElementById() returns an object that represents the <h1> element. It is not simply returning the text "Hello". The returned object contains properties and methods related to that HTML element.

Because it returns an object, we can access its properties using the dot (.) operator:

console.log(title.textContent);
console.log(title.id);
console.log(title.tagName);

We can also modify the element:

title.textContent = "Hello World";
title.style.color = "red";

We can even call methods on the returned object:

title.remove();

We can also directly access a property from the returned object without storing it in a variable:

document.getElementById("title").textContent = "Hello World";

Here, getElementById("title") first returns the <h1> element object, and then .textContent accesses a property of that returned object.

The DOM also provides many other methods for finding and modifying elements, such as querySelector(), createElement(), appendChild(), and addEventListener().

In simple terms, HTML defines the structure of the page, the DOM represents that structure as objects, and JavaScript uses those objects to interact with and modify the page. The DOM itself is not part of the JavaScript language; it is a browser-provided API that JavaScript can use.

DEV Community: Abimanyu P

Promises In JS

Promises in JavaScript

Creating a Promise

Promise States

Handling a Promise

Why Promises Are Useful

Conclusion

CallBack In JS

Callback in JavaScript

What is a Callback?

Why Do We Need Callbacks?

Passing a Function vs Calling a Function

What is Callback Hell in JavaScript?

Example of Callback Hell

Closure in javascript

Closures in JavaScript

Let's understand it with an example

Why doesn't name disappear?

Closure is connected to lexical scope

Closures can maintain state

Closures can also provide data privacy

Lexical Scope

What is Lexical Scope?

Nested Scopes

Lexical Scope and Lexical Environment

Lexical Environment in JavaScript

Lexical Environment in JavaScript:

When is a Lexical Environment created?

How does JavaScript find a variable?

DOM In JavaScript

DOM in JavaScript

What is the DOM?

The document Object

Selecting Elements

getElementById()

querySelector()

querySelectorAll()

Changing Content

textContent and innerHTML

Changing CSS

Changing Attributes

Creating Elements

Removing Elements

DOM and Events

JS Functions & Its Hoisting Rules

JavaScript Hoisting and Types of Functions

What is Hoisting in JavaScript?

What is a Function?

1. Function Declaration

Hoisting rule

2. Function Expression

Hoisting rule

3. Arrow Function

Hoisting rule

4. IIFE

Hoisting rule

Conclusion:

Arrays in JavaScript

Arrays and its methods in JavaScript

forEach()

map()

filter()

find()

push() and pop()

slice()

splice()

reduce()

Important Array Methods

How To Develop Logic

How to Develop Logic for Loop Problems in JavaScript

Loops in JavaScript

Loops in JavaScript

If Else Statements

If Else Statements in JavaScript

DOM In JavaScript

What is DOM in JavaScript?

Why doesn't `name` disappear?

The `document` Object

`getElementById()`

`querySelector()`

`querySelectorAll()`

`textContent` and `innerHTML`

`forEach()`

`map()`

`filter()`

`find()`

`push()` and `pop()`

`slice()`

`splice()`

`reduce()`