Construct For Loops in JavaScript

Construct For Loops in JavaScript

Introduction

• The loops are utilized in programming to automatize repetitive tasks.
• Basic variabilities of loops are applied in JavaScript are the while and do…while statements.
• Because while and do…while statements are not absolutely primarily based, they execute once a given statement returns as evaluating to true.
• Same therein they’re conjointly not absolutely primarily based, for statements includes additional options like a loop counter, permitting you to line the number of iterations of the loop beforehand.
• We can study the for statement, together with the for…of and for…in statements, that are essential elements of the JavaScript programing language.

For Loop

• The for statement is a variety of loop that may dissipate to 3 optional expressions to implement the recurrent execution of a code block.
• Let’s take a glance at the example of what it means

for (initialization; condition; final expression) {
    // code to be executed
}

In the syntax on top of there are 3 expressions within the for statement: the initialization, the condition, and therefore the final expression, conjointly called incrementation.

Let’s use a basic example to demonstrate what each of those statements ensures.

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
// Print each iteration to the console
console.log(i);
}

When we tend to run the above code, we’ll receive the subsequent output:

Output

0
1
2
3

In the on top of example, we tend to initialized the for loop with let i = 0, that begins the loop at zero. We tend to set the condition to be i < 4, that means that as long as i evaluates as but 4, the loop can still run. Our final expression of i++ increments the count for every iteration through the loop. The console.log(i) prints out the numbers, beginning with 0 and stopping as presently as i is evaluated as 4.

Without employing a loop, we tend to may have achieved that very same output by exploitation the subsequent code.

// Set initial variable to 0
let i = 0;

// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

Without the loop in that place, the code block is repetitive and consists of additional lines. If required we would have wanted to increment through additional numbers we’d have needed to put in writing even additional lines of code.

Let’s re-examine every expression within the loop to grasp them totally.

Initialization

Our 1st expression is that initialization. This is often what it’s like.

let i = 0;

We’re declaring a variable referred to as i with the let keyword (the keyword var may additionally be used) and giving it a value of 0. Whereas the variable will be named something, i is most often used. The variable i stands for iteration is consistent and keeps the code compact.

Condition

Just as we tend to saw within the while and do…while loops, for loops, sometimes contain a condition. Here is our condition statement.

i < 4;

We already established that our iteration variable, i, represents 0 to start out. Currently, we can say that the condition is true as long as i is a smaller amount than 4 from this example.

Final expression

The final expression is a statement that’s implemented at the end of every loop. It’s most frequently accustomed increment or decrement a value, however, it will be used for any purpose.

i++

In our example, we tend to increment the variable by one, with i++. This is a similar as running i = i + 1.

Unlike the initialization and condition expressions, the final expression doesn’t finish with a semicolon(;).

Combine it together

Now that we’ve reviewed our 3 expressions contained within the for loop, we will take a glance at the entire loop once more.

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    console.log(i);
}

First, we tend to declare i and setting it to 0. Then, we tend to set a condition for the loop to run till i is a less than 4. Finally, we’re incrementing i by one every iteration. Our code block prints the value of i to the console, therefore our result’s 0, 1, 2, and 3 as output.

Optional Expressions

All 3 expressions within the for loop are optional. As an example, we will write a similar for statement without the initialization expression by initializing the variable outside of the loop.

// Declare variable outside the loop
let i = 0;

// Initialize the loop
for (; i < 4; i++) {
    console.log(i);
}

Output

0
1
2
3

• In this case, the first ; is important to denote whether or not the statement refers to initialization, condition, or final expression, even once it’s omitted.
• Below, we will eliminate the condition from the loop. We’ll use if statement combined with break to inform the loop to prevent running once i is greater than 3, that is the reverse of true condition.

// Declare variable outside the loop
let i = 0;

// Omit initialization and condition
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}

Output

0
1
2
3

Warning: The break statement should be enclosed if the condition is omitted, otherwise the loop can run forever as an infinite loop and probably crash the browser.

Lastly, the final expression will be removed by putting it an end of the loop instead. Each semicolon should still be enclosed, or the loop won’t perform.

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

Output

0
1
2
3

As we will see from the on top of examples, together with all 3 statements typically produces the foremost terse and clear code. However, it’s helpful to grasp that statements will be omitted just in case you encounter it within the future.

Modify an Array

• We will use for loops for modifying the array.
• In subsequent example, we’ll produce empty array and populate it with the loop counter variable.

// Initialize empty array
let arrayExample = [];

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
    // Update array with variable value
    arrayExample.push(i);
    console.log(arrayExample);
}

Running the JavaScript code from the above is resulted as below output.

Output

[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

We set a loop that runs till i < 3 isn’t any longer true, and we’re telling the console to print the arrayExample array to the console at the end of every iteration. With this methodology, we will see however the array updates with the new values.

Length of an array

Sometimes, we would need a loop to run a number of times while not being bound of what the number of iterations is. Rather than declaring a static number, as we tend to do in previous examples, we can build use of the length property of the array to possess the loop run as persistently as there are things within the array.

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

We’ll receive the subsequent output.

Output

flounder
salmon
pike

In this instance, we tend to increment through every index of the array with fish[i] (e.g. the loop can increment through fish[0], fish[1], etc.). This causes the index to dynamically update with every iteration.

For…In Loop

The for…in statement iterates over the properties of the object. To determine, we’ll build an easy shark object with a couple of name:value pairs.

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}

Using the for…in loop, we will simply access every of the property names.

// Print property names of object
for (attribute in shark) {
    console.log(attribute);
}

Output

species
color
numberOfTeeth

We may access the value of every property by exploitation the property name because of the index value of the object.

// Print property values of object
for (attribute in shark) {
    console.log(shark[attribute]);
}

Output

great white
white
Infinity

Putting them along, we will access all the names values of an object.

// Print names and values of object properties
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}

Output

SPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

We used the toUpperCase() methodology to change the property name and followed it by the property value. for…in is an especially helpful iterate through object properties.

For…Of Loop

The for…in statement is beneficial for iterating over object properties, however, to iterate over iterable objects like arrays and strings, we will use the for…of statement. The for…of statement may be a newer feature as of ECMAScript 6.
In this instance of a for…of loop, we’ll produce array and print every item within the array to the console.

// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];

// Print out each type of shark
for (let shark of sharks) {
    console.log(shark);
}

We’ll receive the subsequent as output from the for…of statement.

Output

great white
tiger
hammerhead

It is additionally probable to print out the index related to the index elements exploitation the entries() methodology.

...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}

Output

0 'great white'
1 'tiger'
2 'hammerhead'

A string will be iterated through within the same means as an array.

// Assign string to a variable
let sharkString = "sharks";

// Iterate through each index in the string
for (let shark of sharkString) {
    console.log(shark);
}

Output

s
h
a
r
k
s

In this case, we tend to loop through every character within the string, printing them in successive order.

Conclusion

• In this tutorial, we tend to learn the way to construct for loops in JavaScript, consisting of the for, for…of and for…in statements.
• Loops are an integral part of programming in JavaScript and are used for automating repetitive tasks and creating code additional terse and economical.