Annapoorani Kadhiravan

Posted on Jun 13

Types of loops in JS

#webdev #programming #tutorial #productivity

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");

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;

2. Condition

Determines whether the loop should continue executing.

i <= 5

3. Increment or Decrement

Updates the loop variable after each iteration.

i++;

i--;

1. while Loop

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

Syntax

while(condition)
{
    // statements
}

Example: Print Numbers from 1 to 5

let i = 1;

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

Output

Working of while Loop

Iteration 1:

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

Iteration 2:

i = 2
2 <= 5 → true
Print 2

This process continues until:

i = 6
6 <= 5 → false

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);
}

Output:

1
2
3
4
5
...

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
}

Example

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

Output

while Loop vs for Loop

while Loop

let i = 1;

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

for Loop

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

Both produce the same output.

The difference lies mainly in readability.

Special Forms of for Loop

Infinite Loop

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

Output:

Hi
Hi
Hi
...

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

Explicit Infinite Loop

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

Output:

Hi
Hi
Hi
...

No Iteration

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

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
}

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);
}

do...while Loop

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

Syntax

do
{
    // statements
}
while(condition);

Example

let i = 1;

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

Output

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");

Output:

Bye

Because:

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

console.log("Bye");

Multiple Statements Using Curly Braces

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

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");

Output:

Hello
Hello
Hello
...

Notice that:

console.log("Bye");

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);

Output:

Parameters and Arguments

Parameters

Variables declared in the function definition.

function add(i, j)

i and j are parameters.

Arguments

Values passed while calling the function.

add(10,10);

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");
}

Calling:

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

supplies the ingredients.

Calling Without Arguments

biriyani();

Internally:

riceContainer = undefined
masalaContainer = undefined
container = undefined

If printed:

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

biriyani();

Output:

undefined
undefined
undefined

Passing Actual Values

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

Output:

BasmatiRice
Masala
Mutton

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?utm_source=chatgpt.com
https://javascript.info/while-for?utm_source=chatgpt.com
https://javascript.info/function-basics?utm_source=chatgpt.com
https://www.w3schools.com/js/js_loop_for.asp?utm_source=chatgpt.com
https://www.w3schools.com/js/js_functions.asp?utm_source=chatgpt.com