Types of loops in JS

Programming is all about solving problems efficiently. Two concepts that play a major role in writing reusable and efficient programs are loops and functions.

Loops help us perform repetitive tasks without writing the same code again and again, whereas functions help us organize code into reusable blocks.

Let’s understand these concepts in detail.

Why Do We Need Loops?

Suppose we want to print “Hello” five times.

Without loops, we would write:

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

Enter fullscreen mode Exit fullscreen mode

Although this works, it violates one of the fundamental principles of programming:

Don’t Repeat Yourself (DRY)

Repeating code:

• Increases the number of lines.
• Makes maintenance difficult.
• Introduces more chances for errors.

Loops solve this problem by allowing us to execute the same block of code multiple times.

Types of Loops in JavaScript

JavaScript provides three looping statements:

Loop Type Category while Entry-Check Loop for Entry-Check Loop do…while Exit-Check Loop

Entry-Check Loop / Entry-Controlled Loop

In entry-Check loops, the condition is checked before executing the loop body.

If the condition is false initially, the loop body never executes.

Examples:

• while loop
• for loop

Exit-Check Loop / Exit-Controlled Loop

In an exit-Check loop, the loop body executes first and then checks the condition.

Therefore, the body executes at least once.

Example:

• do…while loop

Components of Every Loop

Every loop generally consists of three parts:

1. Initialization

Determines where the loop starts.

let i = 1;

Enter fullscreen mode Exit fullscreen mode

2. Condition

Determines whether the loop should continue executing.

i <= 5

Enter fullscreen mode Exit fullscreen mode

3. Increment or Decrement

Updates the loop variable after each iteration.

i++;

Enter fullscreen mode Exit fullscreen mode

or

i--;

Enter fullscreen mode Exit fullscreen mode

1. while Loop

The while loop repeatedly executes a block of code as long as the condition remains true.

Syntax

while(condition)
{
    // statements
}

Enter fullscreen mode Exit fullscreen mode

Example: Print Numbers from 1 to 5

let i = 1;

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

Enter fullscreen mode Exit fullscreen mode

Output

1
2
3
4
5

Enter fullscreen mode Exit fullscreen mode

Working of while Loop

Iteration 1:

i = 1
1 <= 5 → true
Print 1
i becomes 2

Enter fullscreen mode Exit fullscreen mode

Iteration 2:

i = 2
2 <= 5 → true
Print 2

Enter fullscreen mode Exit fullscreen mode

This process continues until:

i = 6
6 <= 5 → false

Enter fullscreen mode Exit fullscreen mode

At that point, the loop terminates.

Infinite Loop

An infinite loop occurs when the condition never becomes false.

Example:

let i = 1;

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

Enter fullscreen mode Exit fullscreen mode

Output:

1
2
3
4
5
...

Enter fullscreen mode Exit fullscreen mode

The loop never stops because i++ is missing.

Infinite loops consume CPU and memory resources and may eventually crash the program.

2. for Loop

The for loop is considered the compact form of the while loop because initialization, condition, and increment are written in a single line.

Syntax

for(initialization; condition; increment)
{
    // statements
}

Enter fullscreen mode Exit fullscreen mode

Example

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

Enter fullscreen mode Exit fullscreen mode

Output

1
2
3
4
5

Enter fullscreen mode Exit fullscreen mode

while Loop vs for Loop

while Loop

let i = 1;

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

Enter fullscreen mode Exit fullscreen mode

for Loop

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

Enter fullscreen mode Exit fullscreen mode

Both produce the same output.

The difference lies mainly in readability.

Special Forms of for Loop

Infinite Loop

for(;;)
{
    console.log("Hi");
}

Enter fullscreen mode Exit fullscreen mode

Output:

Hi
Hi
Hi
...

Enter fullscreen mode Exit fullscreen mode

Since no condition is provided, JavaScript assumes it is always true.

Explicit Infinite Loop

for(;true;)
{
    console.log("Hi");
}

Enter fullscreen mode Exit fullscreen mode

Output:

Hi
Hi
Hi
...

Enter fullscreen mode Exit fullscreen mode

No Iteration

for(;false;)
{
    console.log("Hi");
}

Enter fullscreen mode Exit fullscreen mode

Output:

No output.

Because the condition is false initially.

When Should We Use while and for?

Use while Loop

When the number of iterations is unknown.

Examples:

• Reading data until a valid input is entered.
• Waiting for a user action.
• Processing files until end-of-file is reached.

while(password !== correctPassword)
{
    // ask again
}

Enter fullscreen mode Exit fullscreen mode

Use for Loop

When the number of iterations is known.

Examples:

• Print numbers from 1 to 100.
• Traverse arrays.
• Display table values.

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

Enter fullscreen mode Exit fullscreen mode

do…while Loop

The do…while loop executes the body first and checks the condition later.

Syntax

do
{
    // statements
}
while(condition);

Enter fullscreen mode Exit fullscreen mode

Example

let i = 1;

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

Enter fullscreen mode Exit fullscreen mode

Output

1
2
3
4
5

Enter fullscreen mode Exit fullscreen mode

Why Is It Called Exit-Controlled / Exit-check?

Because the condition is checked after executing the loop body.

Therefore, the body executes at least once.

Curly Braces in JavaScript

Curly braces define a block of statements.

Without braces, only the first statement belongs to the loop or if statement.

Example:

let i = 5;

if(i == 4)
    console.log("Hello");

console.log("Bye");

Enter fullscreen mode Exit fullscreen mode

Output:

Bye

Enter fullscreen mode Exit fullscreen mode

Because:

if(i == 4)
{
    console.log("Hello");
}

console.log("Bye");

Enter fullscreen mode Exit fullscreen mode

Multiple Statements Using Curly Braces

if(i == 4)
{
    console.log("Hello");
    console.log("Bye");
}

Enter fullscreen mode Exit fullscreen mode

Now both statements belong to the if block.

Infinite Loop Due to Missing Braces

let i = 5;

while(i >= 1)
    console.log("Hello");

console.log("Bye");

Enter fullscreen mode Exit fullscreen mode

Output:

Hello
Hello
Hello
...

Enter fullscreen mode Exit fullscreen mode

Notice that:

console.log("Bye");

Enter fullscreen mode Exit fullscreen mode

is outside the loop.

Also, i never changes, causing an infinite loop.

Functions in JavaScript

Functions are reusable blocks of code.

They are considered the building blocks of programs.

Functions help:

• Reduce code duplication.
• Improve readability.
• Increase maintainability.
• Promote modular programming.
• Reuse code multiple times.

Creating a Function

function add(i, j)
{
    let result = i + j;
    console.log(result);
}

add(10,10);

Enter fullscreen mode Exit fullscreen mode

Output:

20

Enter fullscreen mode Exit fullscreen mode

Parameters and Arguments

Parameters

Variables declared in the function definition.

function add(i, j)

Enter fullscreen mode Exit fullscreen mode

i and j are parameters.

Arguments

Values passed while calling the function.

add(10,10);

Enter fullscreen mode Exit fullscreen mode

Here:

• 10 and 10 are arguments.

Real-Life Analogy: Biriyani Function

Think of a function like a recipe.

function biriyani(riceContainer, masalaContainer, container)
{
    console.log("Biriyani ready");
}

Enter fullscreen mode Exit fullscreen mode

Calling:

biriyani("rice", "masala", "chicken");

Enter fullscreen mode Exit fullscreen mode

supplies the ingredients.

Calling Without Arguments

biriyani();

Enter fullscreen mode Exit fullscreen mode

Internally:

riceContainer = undefined
masalaContainer = undefined
container = undefined

Enter fullscreen mode Exit fullscreen mode

If printed:

function biriyani(riceContainer, masalaContainer, container)
{
    console.log(riceContainer);
    console.log(masalaContainer);
    console.log(container);
}

biriyani();

Enter fullscreen mode Exit fullscreen mode

Output:

undefined
undefined
undefined

Enter fullscreen mode Exit fullscreen mode

Passing Actual Values

biriyani("BasmatiRice", "Masala", "Mutton");

Enter fullscreen mode Exit fullscreen mode

Output:

BasmatiRice
Masala
Mutton

Enter fullscreen mode Exit fullscreen mode

Summary

Loops

• while → Entry-controlled loop / Entry-Check loop.
• for → Entry-controlled loop / Entry-check loop.
• do…while → Exit-controlled loop / Exit-check loop.
• Infinite loops occur when conditions never become false.
• Curly braces group multiple statements.

Functions

• Functions are reusable blocks of code.
• Parameters receive values from arguments.
• Missing arguments become undefined.
• Functions improve readability and modularity.

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
https://javascript.info/while-for
https://javascript.info/function-basics
https://www.w3schools.com/js/js_loop_for.asp
https://www.w3schools.com/js/js_functions.asp