Loops in javascript

When we talk about loops we’re actually talking about iteration, which is defined as the repetition of a process in order to generate an outcome. In programming there are many situations in which you need to repeat a task a certain number of times or until something in particular happens, and that’s what loops are for.

Now we’re going to take a look at some of the ways javascript offers to loop over things and what are the main differences between each other.

The for loop

When a for loop executes, the following occurs:

1. The initializing expression initialExpressionis executed.
2. The conditionExpression expression is evaluated. If the value of conditionExpression is true, the loop statements execute. If the value of condition is false, the for loop terminates.
3. The statement executes.
4. If present, the update expression incrementExpression is executed.
5. Control returns to Step 2.

The do…while loop

The do...while statement repeats until a specified condition evaluates to false.statement is always executed once before the condition is checked.

If condition is true, the statement executes again. At the end of every execution, the condition is checked. When the condition is false, execution stops.

The while loop

A while statement executes it’s statements as long as a specified condition evaluates to true. If the condition becomes false, statement within the loop stops executing and control passes to the statement following the loop.

If the condition returns true, statement is executed and the condition is tested again. If the condition returns false, execution stops, and control is passed to the statement following while.

This loop works very similar to the do… while one, but the main difference between the is that the in the while loop the condition test occurs before statement in the loop is executed. While in the while.. do loop the statement always is executed once before the condition is checked.

The for…in loop

The for...in statement iterates over all the enumerable properties of an object. For each distinct property, JavaScript executes the specified statements.

The for…of loop

The for...of statement creates a loop Iterating over iterable objects (including Array, Map, Set, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

For…in and for…of loops work similarly, but remember that for…in is used when you want to iterate through object properties and for…of is used when you wish to iterate through values in arrays, maps, sets, etc.

The forEach loop

The forEach() method calls a function once for each element in an array, in order.forEach() is not executed for array elements without values. It passes a callback function for each element of an array together with the below parameters:

• Current Value (required): The value of the current array element
• Index (optional): The index number of the current element
• Array (optional): The array object the current element belongs to

The forEach loop works fairly similar to the for loop, so here are some of the subtle differences between each other.

The break and continue instructions in loops

Javascript provides tools for you to conditionally handle the execution of a loop.

The break instruction ends the loop if a certain condition is met.

In this example, when the counter gets to 3, the loop will be exited and the 996 later iterations won’t be executed.

On the other hand, the continue instruction allows you to skip certain iterations, meaning that when the loop gets to this specific iteration, it will skip it and go directly to the next iteration of the loop.

In the following example, when the counter gets to 3 it won’t print nothing in the console and will go directly to the next iteration.