Loops in JavaScript
A key idea in JavaScript’s control flow is loops. They give you a limit on how many times you can run a block of code. You can use a loop to traverse over data sets like arrays and objects or to carry out repetitive activities rather than writing the same code over and over again. Loops regulate the sequence in which JavaScript applications execute.
JavaScript loops come in a variety of forms, including:
- while loop
- do while loop
- for loop
- for in loop
- for of loop
With some code samples, let’s examine these primary types.
The while Loop
A block of code is run by the while loop if a predetermined condition is met. The condition is verified before to every loop iteration. Inside the loop, the code block will not run at all if the condition is originally false.
Syntax:
while (condition) {
// code that gets executed as long as the condition is true
}
When you know you should stop when a specific condition is met but are unsure of how many times to loop, while loops are especially helpful.
Here is a simple example that prints numbers 0 to 9 to the console using a counter variable:
let count = 0; // Initialize variable
while (count < 10) { // Condition check
console.log(count); // Code block
count++; // Increment variable
}
The variable count in this example begins at 0 and increases with each execution of the loop body. Until count falls below 10, the loop keeps going. When the count hits 10, the loop ends and the condition is changed to false.
The do while Loop
Though it ensures that the code block is run at least once, the do while loop is comparable to the while loop. This occurs as a result of the condition being checked following the initial execution of the code block.
Syntax:
do {
// code to be executed
} while (condition); // Note the semicolon
This framework is helpful when you need to do anything at least once, such requesting legitimate user input and then repeating it if the desired outcome wasn’t achieved.
Here is an example demonstrating that the code runs at least once, even if the condition is initially false:
var i = 0; // Initialize variable
do {
document.write(“The number is ” + i); // Code block
document.write(” “);
i = i + 1; // Increment variable
} while (i < 0); // Condition check
// Result: The number is 0
In a different instance, input might be requested repeatedly until a condition is satisfied.
The for Loop
One unique loop that makes handling loops with a counter more organised and frequently understandable is the for loop. When you know exactly how many times you want the loop to run, you use it.
The syntax combines the initialization, condition, and update parts in the loop’s header:
for (initialization; condition; statement) {
// code to be executed
}
There are semicolons between the three sections included in parenthesis.
- Initialisation: This step is completed once prior to the loop commencing. It frequently declares and initialises a variable for the loop counter.
- Condition: This expression is assessed prior to every iteration of the loop. The loop ends if it evaluates to false; if it evaluates to true, the loop body runs.
- Statement (or Final Expression/Update): Following each loop body iteration, this code is run. Usually, it is employed to update the counter variable.
A for loop’s general approach is to run initialisation once, then repeatedly check the condition, run the body (if true), then run the step afterwards.
Here is a simple example logging numbers 0 to 9:
for (let i = 0; i < 10; i++) { // Initialization, condition, statement
console.log(i); // Code block
}
A variable that is declared in the header of the for loop with let exists solely within the loop. Since the initialisation comes before the loop and the update comes at the end, a for loop is essentially the same as a while loop.
Specialized Loops: for in and for of
Loops designed especially for iterating over collections are likewise available in JavaScript. In order to prevent missing any elements or becoming trapped in an endless loop, JavaScript controls the execution of these loops, which traverse over each element in a collection.
- for in: An object’s keys, or property names, are iterated over in this loop. It can loop over array indices as well.
- for of: Iterating over the values of iterable objects, such arrays, is what the for of loop does. This is a succinct method of iterating across array elements. Index values are abstracted away.
For of loops over values, whereas for in loops over keys. This is the primary distinction.
Controlling Loop Flow: break and continue
Using the break and continue statements, you can regulate how a loop is executed.
- break: Instantly leaves the entire loop it’s in.
- continue: By selecting “continue,” the loop moves on to the following iteration, skipping the remaining code in the current one.
The functionality of an else statement can occasionally be replaced by continue. Their usefulness becomes more evident when working with bigger data sets or external data, even though these are demonstrated with straightforward examples for familiarity. To influence outer loops in nested structures, break and continue can also be used with labels.
Infinite Loops
For a loop to be stopped, it needs a condition that will eventually turn out to be untrue. An infinite loop will arise from the loop running indefinitely if the condition never becomes false. Programs may crash or freeze as a result. It’s important to make sure that your loop condition can always turn false. Because of their structure, for loops can be more difficult to accidentally generate than while loops.
To sum up, loops are essential tools for iterating over data and repeating code in JavaScript. There are many kinds of loops to suit different programming requirements and levels of complexity.