JavaScript Loops

Loops in Javascript

Learning a new language can be challenging at times, especially when the language has new concepts that many rookie programmers are unfamiliar with.

Loops are used in Javascript to perform repeating code based on a condition. When our loop analyses these circumstances, they usually return true or false. A loop will continue to run until the specified condition is false.

Loops aren't particularly tough, but they can be confusing to individuals who aren't confident or comfortable with the idea. To gain a better understanding of loops, we'll break them down.

for Loop

Syntax:

for (initialization; condition; finalExpression) {
  // code
}

Three optional expressions are followed by a code block in the for loop:

initialization - This expression is commonly used to construct a counter and runs before the first loop executes.

condition - Before the loop runs, this expression is tested each time. The statement or code in the loop is executed if it evaluates to true. The loop ends if it evaluates to false. And if this expression is not present, it evaluates to true.

finalExpression - After each loop iteration, this expression is executed. This is commonly used to increase a counter, although it can also be used to decrement one.

Example:

for(let i = 0; i < 5; i++){
  console.log('Hello');
}

The most fundamental loop in JavaScript is the for loop, which can be thought of as a counter. It needs the use of three parenthesis:

⮞ Let i=0 to start the counter (the counter starts from 0).

⮞ The condition that instructs the for loop when to terminate is as follows: i(5) (when i reaches 5, the condition evaluates to false, the loop stops running).

⮞ Counting should be increased or decreased using (++ or --)

for…of loops

A loop that iterates through an array is also available. You also don't need to establish index variables with this one. When it hits the end of the array, it will immediately stop looping:

for(let val of arr){
  console.log(val);
}
//in console will print:
H
E
L
L
O // this is the last item in arr, stop looping.

However, iterable values are required for...of loops. As a result, it can't be utilised on objects.

for…in loops

When working with objects, this loop comes in helpful. Consider the following scenario: you want to print a spread sheet but aren't sure how many items are on it, so you iterate through it and print them all.

const sheet = {
1: 'A',
2: 'B',
3: 'C',
4: 'D',
5: 'E',
6: 'F'
}
for(let item in sheet){
  console.log(item);
}
//in console will print:
A
B
C
D
E
F // this is the last item in sheet object, stop looping.

while Loop

while (condition) {
  // statement
}

while loop

The condition is evaluated first in the while loop. The code in the code block is executed if the condition evaluates to true. The code in the code block is not performed if condition evaluates to false, and the loop stops.

let num = 5;
while(num<200){
  console.log(num);
  num = num*5;
}
//in console will print:
5 // num = 5, num < 200? true, print num, num*5
25 // num = 25, num < 200? true, print num, num*5
125 // num = 125, num < 200? true, print num, num*5
// num = 625, num < 200? false, stop looping

As can be seen. Before the statement in the loop is executed, the condition is assessed. The statement is executed and the condition is re-evaluated if the condition returns true. The statement will be terminated if the condition returns false.

do...while loop

do {
  // statement
} while (condition);

The while loop and the do...while loop are very similar. The condition is verified at the conclusion of each iteration of the loop in a do...while loop, rather than at the start before the loop runs.

This means that even if the condition expression evaluates to true, code in a do...while loop is guaranteed to run at least once.

let num = 200;
do {
  console.log(num);
} while(num++ < 200)
//in console will print:
201 
// num++ = 201; num++ < 200? false stop looping

Have you figured out what the difference is? do… While loops evaluate their condition after each statement in the loop is executed. The statement will be run at least once, even if the condition returns false at the start of iterate.

Which one should I use

While loops can be written in the same way as for loops, and vice versa. The programmer is always in charge of deciding which loop to utilise. When you know how many times you want the loop to execute, you should use for-loops. When you want the loop to break depending on something other than the number of times it runs, you should use a while-loop. Don't worry if these two loops don't help you find what you're seeking for; there are more complicated iteration structures that you can master in the future.

Conclusion: So there you have it, your first journey into the JavaScript realm. We've started with loops and different methods in javascript.