Javascript Loops
In JavaScript loops are applied to execute repeated activities based on a condition. Normally, conditions return true or false. A loop will execute until the specified condition returns as false.
In this article, you will learn how to build a loop with numerous settings using JavaScript for loop expression.
Types of Loops in Javascript
- For - loops over a section of code many times.
- For/in - loops (cycles) over an object's attributes
- For/of - loops over an iterable object's values
- While - loops (cycles) through a block of code while a particular condition is true.
- Do/while - this function also loops (cycles) over a code block while a given condition is true.
You can decide to print a text ten times and achieve this by writing the text in that number of times to loop it, or you can easily just use a Javascript loop to write it just once but run it ten times. For example, suppose we wish to print “Hello TechStack” 10 times. This can easily be done in two different ways, as shown below:
Iterative method
You can achieve a repeated result by using the document.write() statement ten times like this:
<script type = "text/javascript">
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
document.write("Hello TechStack\n");
</script>
The iterative method above is effective, but it'll make your code look too jampacked and bulky, and that's why we need Javascript loops. To make our lines of code look neater, more professional, and take less time to write. To write this same thing using loops, try out the code below:
Using Loops
<script type = "text/javascript">
var i;
for (i = 0; i < 10; i++)
{
document.write("Hello Techstack!\n");
}
</script>
When you run both, they'll both produce the same result. But, you can see that using Javascript loops will be the better option of the two while coding.
Some aspects of the program explained above may appear strange to you at this moment, but don't worry; by the conclusion of this tutorial, you will master everything there is about JS loops.
Javascript Loops with Examples
1. The "For" Loop
Here's the Syntax of the "For" loop:
for (statement one; statement two; statement three) {
// code block to be executed
}
- Statement One is performed once before the code block is executed.
- The condition for running the code block is defined in Statement two.
- When the code block has already been executed, Statement three will then be executed every time.
Example of the "For" Loop
for (let i = 0; i < 6; i++) {
text += "The number is " + i + "<br>";
}
2. The "For/In" Loop
The JS "for/in" statement runs over an Object's properties. Here's the Syntax of the "For'In" loop:
for (key in object) {
// code block to be executed
}
Example of the "For/In" Loop
const person = {fname:"Barnabas", lname:"Paul", age:30};
let text = "";
for (let y in person) {
text += person[y];
}
- The for/in loop goes over a person object
- Each iteration returns a key (y)
- This key is used to gain access to the value of the key
- The value of the key is person[y]
The JS "For/In" statement could also cycle over an Array's properties:
Syntax
for (variable in array) {
code
}
Example
const numbers = [30, 6, 8, 10, 15];
let txt = "";
for (let y in numbers) {
txt += numbers[y];
}
Array.forEach()
For every array element, this forEach() method invokes a function.
Example
const numbers = [30, 6, 8, 10, 15];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value;
}
It should be noted that the function accepts three arguments:
- The index of items
- The value of the item
- The array on its own
The value parameter is the only one used in the above example. It may be rewritten as follows:
const numbers = [30, 6, 8, 10, 15];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value;
}
3. The "For/Of" Loop
The "For/Of" statement in JavaScript runs over the values of an object that's iterable. It allows you to loop through iterable data structures like Strings, Arrays, NodeLists, Maps and others:
Here's the Syntax of the "For'Of" loop:
for (variable of iterable) {
// code block to be executed
}
Looping over an Array
const supercars = ["Benz", "Mclaren", "Lamborghini"];
let text = "";
for (let x of supercars) {
text += x;
}
Looping over a string
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x;
}
4. The While Loop
The Js while loop iterates over the components indefinitely. It should be utilized when the number of iterations is unknown. The while loop syntax is seen below.
while (condition)
{
code to be executed
}
Example of the While Loop
<script>
var i=15;
while (i<=20)
{
document.write(i + "<br/>");
i++;
}
</script>
5. The "Do/While" Loop
The do/while loop is similar to of that of the while loop. Condition is verified at the conclusion of every iteration of the cycle (loop) in a do/while loop, instead of at the start before the loop begins.
This implies that code in a do/while loop will be executed at least once, regardless of whether the condition statement is already true.
Syntax
do{
code to be executed
}while (condition);
Example of "Do/While" Loop
<script>
var i=15;
do{
document.write(i + "<br/>");
i++;
}while (i<=30);
</script>
