JavaScript 101 – Lesson 08 – Digging into Loops

JS101

This part is a bit theoretical just like immediate previous lesson.

The loop actually means repeating codes. We can loop through any part of code as many times as we need to. Loops allow us to repeat code based upon a condition or a set of conditions. As long as the given condition is true, the loop will continue to repeat the same code over and over again. We can easily deal with arrays or big set of data through the loop.

 

The FOR loop:

The idea of for loop is to execute code for a certain number of iterations.

Syntax:

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block). That is, when we iterate the loop and when we execute – the loop depend on this part.

Statement 3 is executed each time after the loop (the code block) has been executed.

Example:

for (i = 0; i < 5; i++) {
    alert("Current iteration is " + i);
}

 
Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma). Statement-1 generally use to initialize our loop counter variable. We usually initialize it to 0, because the counter should starts from zero (although we can start from any seed) – which is also helpful to process an array, since the array index starts from zero.

Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

If we omit statement 2, then we must provide a break inside the loop. Otherwise the loop will never end and will crash the browser (which is also called as INFINITE LOOP situation).

Statement 3 is used to increment counter/variable value. This statement is also optional, but if we omit it – we should use incrementer inside our loop.

 

The For/In Loop

The JavaScript for/in statement loops through the properties of an object:

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
    text += person[x];
}

 

The WHILE Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

while (condition) {
    code block to be executed
}

Example:

while (i < 10) {
    var output = "The number is " + i;
    i++;
}

Another Example:

var person = ["Mr. Hasan", "Mr. Mahadi", "Mr. Fernando"];
var arrayLength = person.length;

//Popping out elements one by one from array/stack
while( arrayLength > 0 )
{
    var currentElement = person.pop();
    alert( currentElement );
    arrayLength--;
}

alert("We reached outside after pop-out all elements.");

Note: If we forget to increase or decrease the variable/counter used in the condition, the loop will never end (i.e. an infinite loop). This will crash your browser.

 

The DO/WHILE Loop

This loop is a variation of a WHILE loop. The difference is, this loop will execute at least once – even the supplied condition stands as false. Because, loop code block executes here first before checking the condition.

Syntax

do {
    code block to be executed
}
while (condition);

Example:

do {
    var output = "The number is " + i;
    i++;
}
while (i < 10);

We must need to increase the variable used in the condition, otherwise the loop will never end!

 
Relational view of WHILE and FOR loop:

WHILE loop is something like a FOR loop without statement 1 and statement 3 (i.e. without increment and decrement statement, only with a condition).

 

Break and Continue statements:

The break statement “jumps out” of a loop.
The continue statement “jumps over” one iteration in the loop.

The break statement breaks the loop and continues executing the code after the loop.

Example

for (i = 0; i < 10; i++) {
    if (i === 3) { break; }
    var output = "The number is " + i + "<br>";
}

 
The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.

This example skips the value of 3:

for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    var output = "The number is " + i + "<br>";
}

 
That’s the end of this lesson. Thanks for reading till this mark.

Leave a Comment.