Loops and iteration
The statements for loops provided in JavaScript are:
for statement
do...while statement
while statement
labeled statement
break statement
continue statement
for...in statement
for...of statement
for statement
A for loop repeats until a specified condition evaluates to false. The
JavaScript for loop is similar to the Java and C for loop.
A for statement looks as follows:
for (initialization; condition; afterthought)
statement
When a for loop executes, the following occurs:
1. The initializing expression initialization , if any, is executed. This expression
usually initializes one or more loop counters, but the syntax allows an
expression of any degree of complexity. This expression can also declare
variables.
2. The condition expression is evaluated. If the value of condition is true, the loop
statements execute. Otherwise, the for loop terminates. (If
the condition expression is omitted entirely, the condition is assumed to be
true.)
Loops and iteration 1
3. The statement executes. To execute multiple statements, use a block
statement ( { } ) to group those statements.
4. If present, the update expression afterthought is executed.
5. Control returns to Step 2.
do...while statement
The do...while statement repeats until a specified condition evaluates to false.
A do...while statement looks as follows:
do
statement
while (condition);
is always executed once before the condition is checked. (To execute
statement
multiple statements, use a block statement ( { } ) to group those statements.)
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, and
control passes to the statement following do...while .
while statement
A while statement executes its statements as long as a specified condition
evaluates to true . A while statement looks as follows:
while (condition)
statement
If the condition becomes false , statement within the loop stops executing and
control passes to the statement following the loop.
The condition test occurs before statement in the loop is executed. 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 .
Loops and iteration 2
To execute multiple statements, use a block statement ( { } ) to group those
statements.
for...in statement
The for...in statement iterates a specified variable over all the enumerable
properties of an object. For each distinct property, JavaScript executes the
specified statements. A for...in statement looks as follows:
for (variable in object)
statement
should not be used to iterate over arrays because it loops over all
for...in
enumerable properties, not just numeric indexes. Since arrays are objects, any
custom properties or prototype methods added to an array will also be
included, which can cause bugs and unexpected behavior.
A traditional for loop, for...of , or forEach is safer because they iterate only over
actual array elements and ignore extra properties.
Rule of thumb:
👉 Use for , for...of , or forEach for arrays.
👉 Use for...in only for objects.
for...of statement
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 (variable of iterable)
statement
for...in iterates over property names, for...of iterates over property values:
Loops and iteration 3
const arr = [3, 5, 7];
[Link] = "hello";
for (const i in arr) {
[Link](i);
}
// "0" "1" "2" "foo"
for (const i of arr) {
[Link](i);
}
// Logs: 3 5 7
The for...of and for...in statements can also be used with destructuring. For
example, you can simultaneously loop over the keys and values of an object
using [Link]() .
const obj = { foo: 1, bar: 2 };
for (const [key, val] of [Link](obj)) {
[Link](key, val);
}
// "foo" 1
// "bar" 2
Loops and iteration 4