Looping allows you to iterate through each item in an array so that you can customize and output each of them as you like. As with every programming language, loops are a crucial tool for rendering arrays in JavaScript, too.
With the help of some practical examples, let's dive deeper into the various ways you can use loops in JavaScript.
The Incremental and Decremental for Loop in JavaScript
The incremental for loop is the basis of iteration in JavaScript.
It assumes an initial value assigned to a variable and runs a simple conditional length check. Then it increments or decrements that value using the ++ or -- operators.
Here's how its general syntax looks:
for(var i = initial value; i < array.length; i++) {
array[i]}
Now let's iterate through an array using the above base syntax:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6 Now we'll operate on each item in the above array using the JavaScript for loop:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
The loop is iterating through the array incrementally with the ++ operator, producing an ordered output.
But using the negative (--) operator, you can reverse the output.
The syntaxes are the same, but the logic is a bit different from the above incrementing loop.
Here's how the decremental method works:
anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5The logic behind the code above isn't far-fetched. Array indexing starts from zero. So calling anArray[i] normally iterates from index zero to three as the above array contains four items.
Thus, removing one from the array length and setting the condition to greater or equal zero as we did is pretty handy—especially when using the array as a basis of your iteration.
It keeps the array index at one less than its length. The condition i >= 0 then forces the count to stop on the last item in the array.
JavaScript forEach
Although you can't decrement using JavaScript's forEach, it's often less verbose than the raw for loop. It works by picking one item after the other without memorizing the previous one.
Here's the general syntax of JavaScript forEach:
array.forEach(element => {
action
})Take a look at how it works in practice:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
1
3
5
6
Now use this to run a simple mathematical operation on each item as you did in the previous section:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
How to Use the for...in Loop of JavaScript
The for...in loop in JavaScript iterates through an array and returns its index.
You'll find it easy to use for...in if you're familiar with Python's for loop as they're similar in regards to simplicity and logic.
Take a look at its general syntax:
for (let element in array){
action
}So the for...in loop assigns each item in an array to the variable (element) declared within the parenthesis.
Thus, logging the element directly within the loop returns an array index and not the items themselves:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
0
1
2
3
To output each item instead:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6
Like you did when using the decremental loop, it's also easy to reverse the output using for...in:
let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
The above code is logically similar to what you did while using the decremental loop. It's more readable and explicitly outlined, though.
JavaScript for...of Loop
The for...of loop is similar to the for...in loop.
However, unlike for...in, it doesn't iterate through the array index but the items themselves.
Its general syntax looks like this:
for (let i of array) {
action
}
Let's use this looping method to iterate through an array incrementally to see how it works:
let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
1
3
5
6
You can also use this method to iterate down the array and reverse the output. It's similar to how you do it using for...in:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
To operate within the loop:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
The While Loop
The while loop runs continuously as long as a specified condition remains true. It's often used as an infinite loop.
For example, since zero is always less than ten, the code below runs continuously:
let i = 0;
while (i < 10) {
console.log(4)
}The above code logs "4" infinitely.
Let's iterate through an array using the while loop:
let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6
JavaScript do...while Loop
The do...while loop accepts and executes a set of actions explicitly inside a do syntax. It then states the condition for this action inside the while loop.
Here's how it looks like:
do{
actions
}
while (
consition
)Now let's iterate through an array using this looping method:
do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
1
3
5
6
Familiarize Yourself With JavaScript Loops
Although we've highlighted the various JavaScript looping methods here, mastering the basics of iteration in programming lets you use them flexibly and confidently in your programs. That said, most of these JavaScript loops work the same way, with only a few differences in their general outline and syntaxes.
Loops, however, are the basis of most client-side array rendering. So feel free to tweak these looping methods as you like. Using them with more complex arrays, for instance, gives you a better understanding of JavaScript loops.
