DEV Community: ABISHEK M

setTimeout() in JavaScript

ABISHEK M — Sat, 12 Sep 2026 16:33:28 +0000

setTimeout() is a built-in JavaScript function that is used to execute a function after a specified amount of time. It is commonly used when we want to delay some code from running immediately.

The basic syntax of setTimeout() is:

setTimeout(function, delay);

Here, function is the code that we want to execute later, and delay is the amount of time we want to wait. The delay is measured in milliseconds. For example, 1000 milliseconds is equal to 1 second.

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

In this example, "Hello" will be printed after approximately 3 seconds.

One important thing to understand is that setTimeout() does not stop or pause JavaScript while waiting.

For example:

console.log("Start");

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

console.log("End");

The output will be:

Start
End
Hello

First, "Start" is printed. Then setTimeout() schedules the function to run later. JavaScript continues with the next line, so "End" is printed. After approximately 2 seconds, "Hello" is executed.

We can also cancel a timeout using clearTimeout().

const timer = setTimeout(() => {
    console.log("Hello");
}, 5000);

clearTimeout(timer);

Here, the scheduled function is cancelled, so "Hello" will not be printed.

setTimeout() is useful in many real-world situations. For example, it can be used to show a notification after a few seconds, hide a message after some time, delay an action, or create simple animations.

In conclusion, setTimeout() is used to schedule a function to run later after a specified delay. It is an important concept for understanding asynchronous JavaScript.

JavaScript addEventListener()

ABISHEK M — Fri, 11 Sep 2026 16:50:54 +0000

addEventListener() is a method in JavaScript that is used to listen for an event on an HTML element.

An event is something that happens on a webpage. For example, a user can click a button, type something in an input box, move the mouse, or submit a form.

Using addEventListener(), we can tell JavaScript what to do when a particular event happens.

Syntax

element.addEventListener("event", function);

There are two main things we provide to addEventListener():

Event type – the event we want to listen for.
Function – the code that should run when the event happens.

Example

First, we create a button in HTML:

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

Then we use JavaScript:

const button = document.querySelector("#btn");

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

Here, document.querySelector("#btn") finds the button from the HTML and stores it in the button variable.

Then:

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

tells JavaScript to listen for a click on the button.

When the user clicks the button, the function runs and "Button clicked!" is printed in the console.

How It Works

The process is simple:

User clicks the button
        ↓
Click event happens
        ↓
Event listener detects the event
        ↓
Function runs
        ↓
"Button clicked!" is printed

JavaScript waits for the event. The function does not run immediately. It runs only when the specified event occurs.

Common Events

There are many events that we can listen for.

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

click runs when the user clicks.

input.addEventListener("input", function () {
    console.log("Typing...");
});

input runs when the value of an input changes while the user is typing.

document.addEventListener("keydown", function () {
    console.log("Key pressed");
});

keydown runs when a keyboard key is pressed.

Some commonly used events are:

click
dblclick
mouseover
mouseout
keydown
keyup
input
change
submit

Example: Changing Button Text

We can also change the webpage when an event happens.

HTML:

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

JavaScript:

const button = document.querySelector("#btn");

button.addEventListener("click", function () {
    button.textContent = "Clicked!";
});

Initially, the button says:

Click Me

After the user clicks it, JavaScript changes the text to:

Clicked!

This happens because the function inside addEventListener() runs after the click.

Why Use addEventListener()?

addEventListener() allows a webpage to become interactive.

Without JavaScript events, a webpage would mostly display information. With event listeners, we can make the webpage respond to the user's actions.

For example:

Clicking a button can open a menu.
Typing can update some text.
Submitting a form can validate the input.
Moving the mouse can change an element.
Pressing a keyboard key can trigger an action.

Conclusion

addEventListener() is an important part of JavaScript because it allows us to respond to events that happen on a webpage.

The basic idea is:

element.addEventListener("event", function () {
    // code to execute
});

In simple words:

addEventListener() means "listen for this event, and when it happens, run this function."

Closure in JavaScript

ABISHEK M — Wed, 09 Sep 2026 16:18:36 +0000

Introduction

Closure is an important concept in JavaScript. It happens when a function remembers and can access variables from the scope where it was created, even after the outer function has finished executing.

In simple words, a closure allows an inner function to remember and access variables from its outer scope.

What is Closure?

Consider this example:

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

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

  return inner;
}

const result = outer();

result();

The output is:

Abishek

Here, inner() is created inside outer(). The inner() function uses the name variable, which belongs to the outer() function.

When outer() is called, it returns the inner function.

const result = outer();

Now result contains the inner function.

We can call it using:

result();

Even though outer() has already finished executing, inner() can still access the name variable.

This happens because inner() retains access to the lexical environment where it was created. This combination of the function and its retained access to the surrounding variables is called a closure.

How Closure Works

A closure is formed when a function retains access to variables from its outer lexical scope, even when that function is used outside the original scope.

For example:

function outer() {
  let count = 0;

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

  return inner;
}

const counter = outer();

counter();
counter();
counter();

The output is:

1
2
3

Here, count starts with 0.

When counter() is called for the first time, count becomes 1.

When it is called again, count becomes 2.

The third call changes it to 3.

The value is not reset to 0 because the inner() function retains access to the same count variable through its closure.

Why is Closure Useful?

Closures are useful when we want to keep some data private and allow specific functions to access that data.

For example:

function createAccount() {
  let balance = 0;

  function deposit(amount) {
    balance = balance + amount;
  }

  function getBalance() {
    console.log(balance);
  }

  return {
    deposit,
    getBalance
  };
}

const account = createAccount();

account.deposit(100);
account.deposit(50);

account.getBalance();

Output:

Here, balance is inside createAccount(). It cannot be directly accessed from outside.

console.log(account.balance);

This gives:

undefined

But the deposit() and getBalance() functions can access balance because they retain access to the scope where balance was created.

This makes closures useful for creating private variables and maintaining state.

Simple Way to Remember Closure

Closure can be remembered with this simple idea:

Inner Function
      ↓
Retains Access To
      ↓
Outer Scope Variables

Even after the outer function finishes, the inner function can still access those variables.

Conclusion

Closure is a feature in JavaScript where a function retains access to the variables from the scope in which it was created. It allows an inner function to access variables from its outer scope even after the outer function has finished executing.

Closures are commonly used for maintaining state, creating private variables, and writing functions that remember previous values.

In simple words:

A closure is a function that remembers and can access variables from its outer scope.

Lexical Scope in JavaScript

ABISHEK M — Tue, 08 Sep 2026 18:02:45 +0000

Introduction

In JavaScript, scope means the area where a variable can be accessed. There are different types of scope in JavaScript. One important concept is Lexical Scope.

Lexical Scope means that the accessibility of a variable is decided by where the variable is declared in the code.

In simple words:

Where we declare a variable decides where we can use it.

Example of Lexical Scope

Let's see a simple example:

let name = "Abishek";

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

greet();

The output will be:

Abishek

Here, name is declared outside the greet() function. Since greet() is inside the outer scope, it can access the name variable.

This shows that an inner scope can access variables from its outer scope.

Inner and Outer Scope

Consider another example:

function outer() {
    let message = "Hello";

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

    inner();
}

outer();

Here, message is declared inside the outer() function. The inner() function is inside outer(), so it can access message.

But the opposite is not possible.

A variable declared inside a function cannot normally be accessed from outside that function.

So we can remember:

Inner Scope → Outer Scope ✅

Outer Scope → Inner Scope ❌

Lexical Scope and Scope Chain

Lexical Scope is also connected to the Scope Chain. When JavaScript needs a variable, it first checks the current scope. If it cannot find the variable, it checks the outer scope and continues searching until it finds the variable.

For example, an inner function can access its own variables and variables from its outer functions.

Conclusion

Lexical Scope is a simple but important concept in JavaScript. It tells us that the location where a variable is declared determines where it can be accessed.

Callback Function in JavaScript

ABISHEK M — Mon, 07 Sep 2026 17:06:19 +0000

A callback function is an important concept in JavaScript. It is commonly used when one function needs another function to be executed at a particular time.

The concept may sound difficult at first, but the basic idea is simple:

A callback is a function passed as an argument to another function.

Let's understand it step by step.

What is a Callback Function?

In JavaScript, functions can be passed as arguments to other functions.

When a function is passed to another function and the receiving function executes it, that function is called a callback function.

Example

function greet(name, callback) {
    console.log("Hello " + name);

    callback();
}

function sayBye() {
    console.log("Goodbye!");
}

greet("Abishek", sayBye);

Output

Hello Abishek
Goodbye!

Here, sayBye is passed to the greet() function.

greet("Abishek", sayBye);

Inside the greet() function, the callback is executed using:

callback();

This calls the sayBye() function.

Flow

greet()
   ↓
Print "Hello Abishek"
   ↓
callback()
   ↓
sayBye()
   ↓
Print "Goodbye!"

So, sayBye is called a callback function because it is passed to another function.

Why Do We Use Callback Functions?

Callbacks are mainly used when we want to tell a function what to do after or during an operation.

Consider this example:

function processTask(callback) {
    console.log("Task completed");

    callback();
}

function showMessage() {
    console.log("Task completed successfully!");
}

processTask(showMessage);

Output

Task completed
Task completed successfully!

Here, processTask() performs its work first.

After that, it calls the callback:

callback();

The benefit is that we can pass different functions depending on what we want to happen next.

For example:

function celebrate() {
    console.log("Let's celebrate!");
}

processTask(celebrate);

Now the output is:

Task completed
Let's celebrate!

The same processTask() function can perform different actions based on the callback we pass.

Therefore, callbacks make functions more flexible and reusable.

How Does a Callback Work?

A callback can be understood using three simple steps.

Step 1: Create a function

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

Step 2: Create another function that accepts a callback

function execute(callback) {
    callback();
}

Here, callback is a parameter that will receive a function.

Step 3: Pass the function

execute(sayHello);

Now sayHello is passed to execute().

Inside execute():

callback();

executes the sayHello() function.

Flow

sayHello()
    ↓
Passed to execute()
    ↓
Received as callback
    ↓
callback()
    ↓
sayHello() executes

Callback vs `callback()`

It is important to understand the difference between callback and callback().

`callback`

execute(sayHello);

Here, sayHello means:

"Pass this function."

`callback()`

callback();

Here, callback() means:

"Execute the function."

So:

callback
→ refers to the function

callback()
→ executes the function

This is why we usually write:

execute(sayHello);

instead of:

execute(sayHello());

Conclusion

A callback is a function passed to another function and called when needed. It helps make JavaScript code more flexible and reusable.

Parameters and Arguments in JavaScript

ABISHEK M — Sat, 05 Sep 2026 18:02:09 +0000

When working with JavaScript functions, you will often hear two terms: parameters and arguments.

They are closely related, but they have different meanings.

What is a Parameter?

A parameter is a variable that we define inside the function's parentheses when creating a function.

It acts as a placeholder for the value that the function will receive.

Example

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

Here, name is a parameter.

We haven't given name an actual value yet. It is simply waiting to receive a value.

function greet(name)
              ↑
          Parameter

What is an Argument?

An argument is the actual value that we pass to a function when calling it.

Example

greet("Abishek");

Here, "Abishek" is an argument.

The argument "Abishek" is passed to the parameter name.

greet("Abishek")
      ↑
    Argument

So, when the function runs:

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

greet("Abishek");

The value "Abishek" is assigned to the parameter name.

Output:

Hello Abishek

Parameter vs Argument

Parameter	Argument
Defined in the function definition	Passed during function call
Acts as a placeholder	Contains the actual value
Example: `name`	Example: `"Abishek"`
Receives the value	Gives the value

Simple Example

function add(a, b) {
    console.log(a + b);
}

add(10, 20);

Here:

a → Parameter
b → Parameter
10 → Argument
20 → Argument

The flow is:

        Function Definition

        function add(a, b)
                     ↑  ↑
               Parameters


        Function Call

        add(10, 20)
            ↑   ↑
         Arguments

The values are passed like this:

a ← 10
b ← 20

Therefore:

10 + 20 = 30

Output:

Example with Multiple Arguments

A function can have multiple parameters and arguments.

function introduce(name, age, city) {
    console.log(name);
    console.log(age);
    console.log(city);
}

introduce("Abishek", 22, "Chennai");

Parameters

name
age
city

Arguments

"Abishek"
22
"Chennai"

The values are matched based on their position:

name ← "Abishek"
age  ← 22
city ← "Chennai"

What Happens If We Don't Pass an Argument?

If a parameter doesn't receive a value, JavaScript gives it the value undefined.

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

greet();

Output:

undefined

Because we called the function without passing an argument.

Default Parameters

We can also provide a default value for a parameter.

function greet(name = "Guest") {
    console.log("Hello " + name);
}

greet();

Output:

Hello Guest

Here, if no argument is passed, "Guest" is used as the default value.

If we pass an argument:

greet("Abishek");

Output:

Hello Abishek

The passed argument replaces the default value.

Final Summary

Parameter
   ↓
Placeholder defined in function

Argument
   ↓
Actual value passed during function call

Scope Chain in JavaScript

ABISHEK M — Fri, 04 Sep 2026 18:31:01 +0000

1. What is Scope?

Scope means the area of a program where a variable can be accessed.

let name = "Abishek";

console.log(name);

Here, name can be accessed because it is available in that scope.

2. What is Scope Chain?

Scope Chain is the process JavaScript uses to find a variable.

When JavaScript needs a variable, it first searches in the current scope. If it is not found, it searches in the outer scope. It continues searching until it reaches the global scope.

Simple Flow

Current Scope
      ↓
Outer Scope
      ↓
Global Scope

3. Example of Scope Chain

let a = 10;

function outer() {
    let b = 20;

    function inner() {
        let c = 30;

        console.log(a);
        console.log(b);
        console.log(c);
    }

    inner();
}

outer();

There are three scopes:

Global Scope
     ↓
outer() Scope
     ↓
inner() Scope

Finding `c`

JavaScript searches:

inner scope → c found ✅

So:

Finding `b`

JavaScript searches:

inner scope → b not found ❌
       ↓
outer scope → b found ✅

So:

Finding `a`

JavaScript searches:

inner scope → a not found ❌
       ↓
outer scope → a not found ❌
       ↓
global scope → a found ✅

So:

4. What if the Variable is Not Found?

If JavaScript searches the entire scope chain and cannot find the variable, it gives a ReferenceError.

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

test();

JavaScript searches:

test scope  → x ❌
     ↓
global scope → x ❌

Since x is not found:

ReferenceError: x is not defined

5. Inner Scope Can Access Outer Scope

An inner function can access variables from its outer scope.

function outer() {
    let a = 10;

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

    inner();
}

outer();

Output:

Why?

Because JavaScript searches outward:

inner → outer → global

6. Outer Scope Cannot Access Inner Scope

An outer function cannot access variables declared inside an inner function.

function outer() {

    function inner() {
        let b = 20;
    }

    console.log(b); // Error
}

b belongs only to the inner scope.

The scope chain does not search inward.

outer → inner ❌

It only searches outward:

inner → outer → global

7. Important Rule

Scope Chain always searches:

Inside → Outside

Current Scope → Parent Scope → Global Scope

It does not search:

Outside → Inside

The inner scope can access outer variables, but the outer scope cannot access inner variables.

JavaScript Functions & Its Hoisting Rules

ABISHEK M — Wed, 02 Sep 2026 18:29:15 +0000

JavaScript Functions and Hoisting

Functions are one of the most important concepts in JavaScript.

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

JavaScript provides different ways to create functions, such as:

Function Declaration
Function Expression
Arrow Function
IIFE

These functions can behave differently when hoisting is involved.

What is Hoisting in JavaScript?

Hoisting is the behavior where JavaScript processes declarations before executing the code.

For example:

console.log(name);

var name = "Abishek";

Output:

undefined

This happens because the var declaration is processed before execution.

We can think of it like this:

var name;

console.log(name);

name = "Abishek";

Notice that only the declaration is processed early. The value "Abishek" is assigned later.

Hoisting does not physically move the code to the top.

The same concept also applies to functions, but the behavior depends on how the function is created.

What is a Function?

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

Example:

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

greet();

Output:

Hello

Here:

function greet() → function declaration
greet() → function call

We can call the function whenever we need it.

1. Function Declaration

A function declaration is the normal way of creating a function.

greet();

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

Output:

Hello

Why does this work?

Because function declarations are fully hoisted.

JavaScript makes the function available before executing the code.

Hoisting Rule

Function declarations can normally be called before their declaration.

Example:

greet();

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

✅ Works.

2. Function Expression

A function expression is a function stored inside a variable.

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

greet();

Here:

const greet

is a variable, and the variable stores a function.

Now look at this:

greet();

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

Output:

ReferenceError

Why?

Because const is in the Temporal Dead Zone (TDZ) until its declaration is reached.

If we use var:

greet();

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

Output:

TypeError: greet is not a function

Why?

Because var greet gets the value undefined before the function is assigned.

Simple Hoisting Rule

var   → undefined → TypeError when called
let   → TDZ → ReferenceError
const → TDZ → ReferenceError

Function expressions are not hoisted as callable functions.

3. Arrow Function

An arrow function is another way to create a function with shorter syntax.

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

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

Output:

An arrow function is usually stored inside a variable.

For example:

add(10, 20);

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

Output:

ReferenceError

This happens because add is declared using const, so it is in the TDZ before the declaration.

The important point is:

The variable's declaration rule decides the hoisting behavior.

For example:

const arrow function → TDZ → ReferenceError

let arrow function   → TDZ → ReferenceError

var arrow function   → undefined → TypeError

Hoisting Rule

Arrow functions are not hoisted as callable functions.

4. IIFE

IIFE stands for:

Immediately Invoked Function Expression

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

Example:

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

Output:

Hello

Normally, we create a function and call it separately:

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

greet();

But in an IIFE, the function is created and called immediately:

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

The last () is used to call the function.

Hoisting Rule

An IIFE is a function expression, not a function declaration.

So it runs when JavaScript reaches that expression.

IIFE → Create function → Immediately call it

Function Hoisting: Simple Comparison

The easiest way to remember the difference is:

Function Declaration

greet();

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

✅ Works

Because the function itself is fully hoisted.

Function Expression

greet();

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

❌ ReferenceError

Because greet is a const variable and is in the TDZ.

Arrow Function

greet();

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

❌ ReferenceError

Because greet is a const variable and is in the TDZ.

Arrays in JavaScript

ABISHEK M — Tue, 01 Sep 2026 17:09:48 +0000

What is an Array?

An array is used to store multiple values in a single variable.
An array can store values of the same or different data types.
Each individual value stored inside an array is called an element.

Without Array:

let student1 = "Abi";
let student2 = "Max";
let student3 = "Rohith";
let student4 = "virat";
let student5 = "ABD";

Here, separate variables are used to store each student name.

With Array:

let students = ["Abi", "Max", "Rohith", "virat", "ABD"];

Here, all the student names are stored together in a single array called students.

Real-World Example

An array can be compared to a school bag.

A school bag is a single container that can hold multiple items such as:

Book
Pen
Pencil
Eraser
Scale

Similarly, an array is a collection of values that can store multiple values together.

let schoolBag = ["Book", "Pen", "Pencil", "Eraser", "Scale"];

Each individual value inside the array is called an element.

For example:

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

Here:

"Apple" → Element
"Banana" → Element
"Mango" → Element

Different Data Types in an Array

JavaScript arrays can store different types of values in the same array.

let data = ["Arun", 20, true, 25.5];

Here:

"Arun" → String
20 → Number
true → Boolean
25.5 → Number

So, an array does not have to contain only one type of value.

In simple words, an array is a way to store multiple values of the same or different data types together in a single variable.

Why do we use Arrays?

To store multiple values in a single variable.
To keep related data organized together.
To avoid creating separate variables for every value.
To make multiple values easier to manage.
Arrays can be used with loops to process multiple values.
Arrays are commonly used to store collections such as student names, marks, products, prices, and scores.

Example:

let marks = [80, 75, 90, 85, 70];

Here, multiple marks are stored together in the marks array.

Arrays are widely used in JavaScript applications whenever a collection of values needs to be stored and processed.

Increment and Decrement Operators in JavaScript

ABISHEK M — Mon, 31 Aug 2026 18:29:24 +0000

Introduction

In JavaScript, we often need to increase or decrease a value by 1. For example, a game score may increase from 10 to 11, or the number of available seats may decrease from 10 to 9.

JavaScript provides two operators for this:

++ → Increment
-- → Decrement

Increment increases a value by 1, while decrement decreases a value by 1.

How Increment and Decrement Work

The basic idea is simple:

++ → Add 1
-- → Subtract 1

For example:

let x = 10;

x++; // 10 → 11
x--; // 11 → 10

Both operators can be placed before or after a variable. Their position determines when the value is used.

POST → Use the value first, then change it
PRE  → Change the value first, then use it

This gives us four operators:

x++ → Use → +1
++x → +1 → Use

x-- → Use → -1
--x → -1 → Use

Increment Operator `++`

1. Post-Increment `x++`

Post-increment uses the old value first, then increases the variable by 1.

let x = 5;

let y = x++;

console.log(x);
console.log(y);

Output:

6
5

Here, y gets the old value 5, and then x becomes 6.

Think of a ticket counter: give the current ticket number first, then move to the next number.

2. Pre-Increment `++x`

Pre-increment increases the value first, then uses the new value.

let x = 5;

let y = ++x;

console.log(x);
console.log(y);

Output:

6
6

Here, x first changes from 5 to 6, and then y receives 6.

Decrement Operator `--`

1. Post-Decrement `x--`

Post-decrement uses the old value first, then decreases the variable by 1.

let x = 5;

let y = x--;

console.log(x);
console.log(y);

Output:

4
5

Here, y gets 5, and then x becomes 4.

2. Pre-Decrement `--x`

Pre-decrement decreases the value first, then uses the new value.

let x = 5;

let y = --x;

console.log(x);
console.log(y);

Output:

4
4

Here, x first changes from 5 to 4, and then y receives 4.

Easy Way to Remember

You don't need to memorize four separate definitions. Remember these two rules:

POST → USE FIRST
PRE  → CHANGE FIRST

And:

++ → Increase by 1
-- → Decrease by 1

Therefore:

x++ → Use → +1
++x → +1 → Use

x-- → Use → -1
--x → -1 → Use

Increment and Decrement in Real Programs

These operators are commonly used with counters and loops.

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

Output:

Here, i++ increases the counter after each iteration.

Understanding these operators is also important for JavaScript interviews, especially output-based questions involving expressions, conditions, and loops.

Increment and decrement operators provide a short way to increase or decrease values by 1.

The most important rule to remember is:

POST → Use first
PRE  → Change first

++ → Increase
-- → Decrease

Once you understand this rule, you can easily understand all four operators:

x++   ++x
x--   --x

🔄 Loops in JavaScript

ABISHEK M — Sat, 29 Aug 2026 18:20:07 +0000

Imagine a teacher wants to greet 5 students:

Hello Arun
Hello Kumar
Hello Ravi
Hello Priya
Hello Divya

Without a loop, we need to write the same code multiple times.

console.log("Hello Arun");
console.log("Hello Kumar");
console.log("Hello Ravi");
console.log("Hello Priya");
console.log("Hello Divya");

Instead of writing the same type of code again and again, JavaScript provides loops.

🔄 What is a Loop?

A loop is used to execute a block of code repeatedly.
It helps us avoid writing the same code again and again.
A loop continues running based on a condition or a collection of values.

In simple words:

A loop means repeating a task multiple times using code.

For example:

For every student:
    Print the student's name

This is the basic idea of a loop.

🤔 Why Do We Use Loops?

Loops are useful when the same task needs to be performed multiple times.

For example, without a loop:

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

Using a loop:

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

Output:

Hello
Hello
Hello
Hello
Hello

If the task needs to be performed 100 or 1000 times, using a loop is much easier than writing the same code repeatedly.

📍 Where Are Loops Used?

Loops can be used in many situations, such as:

Displaying a list of products
Processing a list of students
Reading values from an array
Printing numbers
Calculating marks
Processing multiple records
Repeating a task until a condition becomes false

For example:

For every product:
    Display the product

⏰ When Should We Use a Loop?

A loop can be used when:

The same task needs to be performed multiple times.

For example:

For every student:
    Display the student's name

or:

While the password is incorrect:
    Ask for the password again

Different situations require different types of loops.

🔢 Types of Loops in JavaScript

JavaScript provides different types of loops:

for loop
while loop
do...while loop
for...of loop
for...in loop

Let's look at each loop one by one.

1. 🔁 `for` Loop

The for loop is used to execute a block of code repeatedly.
It is commonly used when the number of repetitions is known or can be controlled.
A for loop has three main parts: initialization, condition, and update.

🌍 Real-World Example

Imagine a teacher says:

"Write your name 5 times."

The task can be represented as:

1 → Write name
2 → Write name
3 → Write name
4 → Write name
5 → Write name
→ Stop

A for loop can be used for this type of task.

Syntax

for (initialization; condition; update) {
    // code to execute
}

Three Parts of a `for` Loop

1. Initialization

Defines where the loop starts.

let i = 1;

2. Condition

Checks whether the loop should continue.

i <= 5

If the condition is true, the code executes.

If the condition is false, the loop stops.

3. Update

Changes the value after each iteration.

i++;

Example

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

Output:

How Does It Work?

i = 1
 ↓
Check condition
 ↓
1 <= 5 → true
 ↓
Print 1
 ↓
i++
 ↓
i = 2
 ↓
Check condition
 ↓
2 <= 5 → true
 ↓
Print 2
 ↓
...
 ↓
6 <= 5 → false
 ↓
Stop

When to Use `for` Loop?

Use a for loop when the number of repetitions is known or can be controlled.

2. 🔄 `while` Loop

The while loop executes a block of code as long as a condition is true.
The condition is checked before executing the code.
If the condition is false at the beginning, the code inside the loop will not execute.

🌍 Real-World Example

Imagine charging a mobile phone.

The idea can be:

While battery < 100%:
    Keep charging

The charging continues while the condition is true.

Syntax

while (condition) {
    // code to execute
}

Example

let i = 1;

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

Output:

The execution looks like this:

Check condition
      ↓
Is it true?
   ↙       ↘
 Yes        No
  ↓          ↓
Execute     Stop
  ↓
Update
  ↓
Check again

⚠️ Infinite Loop

An infinite loop is a loop that never stops because its condition always remains true.

For example:

let i = 1;

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

Here, i is never changed.

So the condition always remains:

1 <= 5 → true

The loop keeps running continuously.

❌ How to Avoid an Infinite Loop?

Make sure the value used in the condition is updated so that the condition can eventually become false.

let i = 1;

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

Here:

i++;

changes the value:

1 → 2 → 3 → 4 → 5 → 6

When i becomes 6:

6 <= 5 → false

So the loop stops.

Output:

To avoid an infinite loop, make sure the loop condition can eventually become false.

When to Use `while` Loop?

Use a while loop when the repetition mainly depends on a condition.

3. 🔁 `do...while` Loop

The do...while loop is similar to the while loop.
The main difference is that the code executes before the condition is checked.
Because of this, the code inside the loop executes at least once.

🌍 Real-World Example

Imagine an ATM asking for a PIN.

The user needs to enter the PIN at least once.

The process can be represented as:

DO:
    Enter PIN

WHILE:
    PIN is incorrect

Syntax

do {
    // code to execute
} while (condition);

Example

let i = 1;

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

Output:

How Does It Work?

Execute code
     ↓
Check condition
     ↓
Is it true?
  ↙       ↘
Yes       No
 ↓         ↓
Repeat    Stop

`while` vs `do...while`

while
→ Check condition first
→ Execute if true

do...while
→ Execute first
→ Check condition later

For example:

let i = 10;

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

Nothing is printed because the condition is checked first:

10 <= 5 → false

But:

let i = 10;

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

prints:

because the code executes once before checking the condition.

When to Use `do...while`?

Use do...while when the code needs to execute at least once.

4. 🔄 `for...of` Loop

The for...of loop is used to iterate over the values of an iterable.
It is commonly used with arrays and strings.
It takes one value at a time.

In simple words:

for...of takes values one by one.

🌍 Real-World Example

Imagine a bag containing:

Apple
Banana
Orange
Mango

Taking the fruits one by one is similar to how for...of works.

Syntax

for (const value of iterable) {
    // code to execute
}

Example

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

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

Output:

Apple
Banana
Orange

Here, fruit gets each value one by one:

Apple
↓
Banana
↓
Orange

`for...of` With a String

const name = "Abishek";

for (const character of name) {
    console.log(character);
}

Output:

A
b
i
s
h
e
k

When to Use `for...of`?

Use for...of when you need to work with the values of an array, string, or another iterable.

Remember:

for...of → Values

5. 🔄 `for...in` Loop

The for...in loop is mainly used to iterate over the keys (property names) of an object.
It takes one key at a time.
The key can be used to access its corresponding value.

In simple words:

for...in takes object keys one by one.

🌍 Real-World Example

Imagine a person's information:

Name → Abishek
Age  → 21
City → Chennai

Here:

Name → Key
Age  → Key
City → Key

And:

Abishek → Value
21      → Value
Chennai → Value

Syntax

for (const key in object) {
    // code to execute
}

Example

const person = {
    name: "Abishek",
    age: 21,
    city: "Chennai"
};

for (const key in person) {
    console.log(key);
}

Output:

name
age
city

Here, key gets each property name.

Getting Both Key and Value

for (const key in person) {
    console.log(key, person[key]);
}

Output:

name Abishek
age 21
city Chennai

When to Use `for...in`?

Use for...in mainly when you need to work with the keys of an object.

Remember:

for...in → Keys

🔥 `for...in` vs `for...of`

These two loops can be confusing because their names are similar.

The easiest way to remember them is:

for...in → Keys
for...of → Values

`for...in`

const person = {
    name: "Abishek",
    age: 21
};

for (const key in person) {
    console.log(key);
}

Output:

name
age

`for...of`

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

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

Output:

Apple
Banana

🤔 Which Loop Should You Use?

Requirement	Loop
Repeat a specific number of times	`for`
Repeat while a condition is true	`while`
Execute at least once	`do...while`
Get values from an array/string	`for...of`
Get keys from an object	`for...in`

📌 NOTE:

Loops are used to repeat code without writing the same code again and again.

The commonly used JavaScript loops are:

for
while
do...while
for...of
for...in

A simple way to remember them:

for
→ Repeat a specific number of times

while
→ Repeat while condition is true

do...while
→ Execute first, then check

for...of
→ Values

for...in
→ Keys

Choose the loop based on what needs to be repeated and how the repetition should be controlled.

Conditional Statements in JavaScript

ABISHEK M — Thu, 27 Aug 2026 18:41:41 +0000

JavaScript is used to create dynamic and interactive web applications. In many situations, a program needs to make decisions based on certain conditions.

For example:

If a user is logged in, show their profile.
If the user is not logged in, show the login page.
If the marks are above 90, give Grade A.
If the payment is successful, place the order.

To make these kinds of decisions, JavaScript provides conditional statements.

What are Conditional Statements?

Conditional statements are statements used to make decisions in a program based on whether a condition is true or false.

In simple words:

If a condition is true, execute one block of code. Otherwise, execute another block of code.

Real-World Example

Imagine you are going to a movie.

You have a ticket, so the theatre allows you to enter.

If you have a ticket
        ↓
Enter the theatre

We can represent the same decision using JavaScript:

let hasTicket = true;

if (hasTicket) {
    console.log("You can enter the theatre");
}

Output

You can enter the theatre

How did this output come?

The value of hasTicket is true.

Therefore, the condition inside if is satisfied, so JavaScript executes the code inside the { }.

Why Do We Use Conditional Statements?

Conditional statements are used whenever a program needs to make a decision.

For example, an e-commerce website may check:

Is the product available?
        ↓
      Yes → Place the order
      No  → Show "Out of Stock"

A banking application may check:

Is the balance sufficient?
        ↓
      Yes → Allow withdrawal
      No  → Show "Insufficient balance"

So, conditional statements allow a program to behave differently depending on the situation.

Conditional Statements Available in JavaScript

The main conditional statements in JavaScript are:

if statement
if...else statement
if...else if...else statement
Nested if statement
switch statement

Let's understand each one.

1. `if` Statement

The if statement is used when we want to execute a block of code only when a condition is true.

Syntax

if (condition) {
    // code to execute
}

Example

let age = 20;

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

Output

You can vote

How did this output come?

JavaScript checks the condition:

age >= 18

The value of age is 20.

So:

20 >= 18
   ↓
true

Since the condition is true, JavaScript executes:

console.log("You can vote");

Real-World Example

Imagine an online shopping website.

let productAvailable = true;

if (productAvailable) {
    console.log("You can buy this product");
}

Output

You can buy this product

How did this output come?

productAvailable is true.

Therefore, the if condition is true and the message is printed.

2. `if...else` Statement

The if...else statement is used when there are two possible outcomes.

If the condition is true, the if block executes.

If the condition is false, the else block executes.

Syntax

if (condition) {
    // code if condition is true
} else {
    // code if condition is false
}

Example

let age = 16;

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

Output

You cannot vote

How did this output come?

JavaScript checks:

16 >= 18
   ↓
false

Since the condition is false, the if block is skipped.

JavaScript executes the else block instead.

Therefore:

You cannot vote

Real-World Example

A login system can check whether the user has entered the correct password.

let passwordCorrect = false;

if (passwordCorrect) {
    console.log("Login successful");
} else {
    console.log("Incorrect password");
}

Output

Incorrect password

How did this output come?

passwordCorrect is false.

Therefore, the if block is not executed and the else block runs.

3. `if...else if...else` Statement

The if...else if...else statement is used when there are multiple conditions to check.

Syntax

if (condition1) {
    // code
} else if (condition2) {
    // code
} else if (condition3) {
    // code
} else {
    // code
}

JavaScript checks the conditions from top to bottom.

As soon as it finds a condition that is true, that block is executed and the remaining conditions are skipped.

Example

let marks = 75;

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

Output

Grade B

How did this output come?

JavaScript checks the conditions one by one:

marks >= 90
75 >= 90
   ↓
false

So JavaScript moves to the next condition:

marks >= 75
75 >= 75
   ↓
true

Therefore, JavaScript executes:

console.log("Grade B");

Once this condition is true, JavaScript does not check the remaining else if conditions.

Real-World Example

A school grading system can use multiple conditions:

90 - 100 → Grade A
75 - 89  → Grade B
50 - 74  → Grade C
Below 50 → Fail

This is a good situation for if...else if...else.

4. Nested `if` Statement

When an if statement is written inside another if statement, it is called a nested if statement.

Example

let age = 25;
let hasLicense = true;

if (age >= 18) {

    if (hasLicense) {
        console.log("You can drive");
    }

}

Output

You can drive

How did this output come?

JavaScript first checks:

age >= 18
25 >= 18
   ↓
true

Because the first condition is true, JavaScript enters the first if.

Then it checks the second condition:

hasLicense
   ↓
true

Both conditions are true, so JavaScript prints:

You can drive

Real-World Example

Consider an online exam system.

First, the system checks whether the student is logged in.

If the student is logged in, it then checks whether the student has permission to take the exam.

let isLoggedIn = true;
let hasPermission = true;

if (isLoggedIn) {

    if (hasPermission) {
        console.log("You can start the exam");
    }

}

Output

You can start the exam

How did this output come?

First:

isLoggedIn
    ↓
true

So JavaScript enters the first if.

Then:

hasPermission
    ↓
true

So JavaScript executes:

console.log("You can start the exam");

5. `switch` Statement

The switch statement is used when we want to compare one value with multiple possible values.

Syntax

switch (value) {

    case value1:
        // code
        break;

    case value2:
        // code
        break;

    default:
        // code
}

Example

let day = 2;

switch (day) {

    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

    default:
        console.log("Invalid day");
}

Output

Tuesday

How did this output come?

The value of day is 2.

JavaScript compares day with each case:

case 1 → 2 === 1 → false
case 2 → 2 === 2 → true

So case 2 executes:

console.log("Tuesday");

Then JavaScript reaches:

break;

The break statement stops the switch and exits from it.

What Happens If We Don't Use `break`?

The break statement is commonly used inside switch to stop execution after the matching case.

Let's understand the difference.

With `break`

let day = 2;

switch (day) {

    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

    default:
        console.log("Invalid day");
}

Output

Tuesday

Why?

day is 2, so case 2 matches.

case 2
   ↓
Tuesday
   ↓
break
   ↓
Exit switch

Therefore, case 3 and default are not executed.

Without `break`

Now let's remove the break statements.

let day = 2;

switch (day) {

    case 1:
        console.log("Monday");

    case 2:
        console.log("Tuesday");

    case 3:
        console.log("Wednesday");

    default:
        console.log("Invalid day");
}

Output

Tuesday
Wednesday
Invalid day

Why?

day is 2.

JavaScript finds the matching case 2.

It prints:

Tuesday

But there is no break, so JavaScript continues executing the following cases.

case 2
   ↓
Tuesday
   ↓
No break
   ↓
case 3
   ↓
Wednesday
   ↓
No break
   ↓
default
   ↓
Invalid day

This behavior is called fall-through.

So, normally, we use break after each case when we want only the matching case to execute.

Real-World Example of `switch`

Imagine a food ordering application.

The user selects a food item using a number:

1 → Pizza
2 → Burger
3 → Pasta
4 → Sandwich

We can use switch:

let choice = 2;

switch (choice) {

    case 1:
        console.log("Pizza selected");
        break;

    case 2:
        console.log("Burger selected");
        break;

    case 3:
        console.log("Pasta selected");
        break;

    case 4:
        console.log("Sandwich selected");
        break;

    default:
        console.log("Invalid choice");
}

Output

Burger selected

How did this output come?

The value of choice is 2.

JavaScript finds:

choice === 2
       ↓
case 2 matches
       ↓
Burger selected
       ↓
break
       ↓
Exit switch

So only "Burger selected" is printed.

`if...else` vs `switch`

Both if...else and switch can be used for decision-making, but they are useful in different situations.

`if...else`

Use if...else when you need to check conditions or ranges.

let marks = 85;

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

Here we are checking ranges, so if...else if...else is suitable.

`switch`

Use switch when you are comparing one value against specific possible values.

let day = 2;

switch (day) {
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;
}

Here we are checking specific values such as 1, 2, and 3, so switch is suitable.

Summary

Conditional statements allow JavaScript programs to make decisions based on conditions.

The main conditional statements are:

Conditional Statement	When to Use
`if`	When you have one condition
`if...else`	When you have two possible outcomes
`if...else if...else`	When you have multiple conditions
Nested `if`	When one condition needs to be checked inside another condition
`switch`	When one value needs to be compared with multiple possible values

Simple Way to Remember

One condition
     ↓
   if

Two possible outcomes
     ↓
 if...else

Multiple conditions
     ↓
if...else if...else

One condition inside another
     ↓
 Nested if

One value with multiple fixed choices
     ↓
  switch

Conditional statements are one of the most important concepts in JavaScript because they allow programs to make decisions and perform different actions depending on the situation.

DEV Community: ABISHEK M

setTimeout() in JavaScript

JavaScript addEventListener()

Syntax

Example

How It Works

Common Events

Example: Changing Button Text

Why Use addEventListener()?

Conclusion

Closure in JavaScript

Introduction

What is Closure?

How Closure Works

Why is Closure Useful?

Simple Way to Remember Closure

Conclusion

Lexical Scope in JavaScript

Introduction

Example of Lexical Scope

Inner and Outer Scope

Lexical Scope and Scope Chain

Conclusion

Callback Function in JavaScript

What is a Callback Function?

Example

Output

Flow

Why Do We Use Callback Functions?

Output

How Does a Callback Work?

Step 1: Create a function

Step 2: Create another function that accepts a callback

Step 3: Pass the function

Flow

Callback vs callback()

callback

callback()

Conclusion

Parameters and Arguments in JavaScript

What is a Parameter?

Example

What is an Argument?

Example

Parameter vs Argument

Simple Example

Example with Multiple Arguments

Parameters

Arguments

What Happens If We Don't Pass an Argument?

Default Parameters

Final Summary

Scope Chain in JavaScript

1. What is Scope?

2. What is Scope Chain?

Simple Flow

3. Example of Scope Chain

Finding c

Finding b

Finding a

4. What if the Variable is Not Found?

5. Inner Scope Can Access Outer Scope

6. Outer Scope Cannot Access Inner Scope

7. Important Rule

Scope Chain always searches:

JavaScript Functions & Its Hoisting Rules

JavaScript Functions and Hoisting

What is Hoisting in JavaScript?

What is a Function?

1. Function Declaration

Hoisting Rule

2. Function Expression

Simple Hoisting Rule

3. Arrow Function

Hoisting Rule

4. IIFE

Hoisting Rule

Function Hoisting: Simple Comparison

Function Declaration

Function Expression

Callback vs `callback()`

`callback`

`callback()`

Finding `c`

Finding `b`

Finding `a`

Increment Operator `++`

1. Post-Increment `x++`

2. Pre-Increment `++x`

Decrement Operator `--`

1. Post-Decrement `x--`

2. Pre-Decrement `--x`

1. 🔁 `for` Loop

Three Parts of a `for` Loop

When to Use `for` Loop?

2. 🔄 `while` Loop

When to Use `while` Loop?

3. 🔁 `do...while` Loop

`while` vs `do...while`

When to Use `do...while`?

4. 🔄 `for...of` Loop

`for...of` With a String

When to Use `for...of`?

5. 🔄 `for...in` Loop

When to Use `for...in`?

🔥 `for...in` vs `for...of`

`for...in`

`for...of`