Array Iteration
The for
loop can be used to iterate over an array element by element.
const clients = ["Mango", "Ajax", "Poly"];
for (let i = 0; i < clients.length; i += 1) {
console.log(clients[i]);
}
To access array elements, use syntax with square brackets, array[index]
, where
index
is the value of the loop counter from 0
to the last index of the
array, that is, less than but not equal to its length.
for...of
loop
The for...of
construct declares a loop that iterates over iterable objects
such as arrays and strings. The loop body will execute for each element's value.
This is a good replacement for the for
loop when you do not need to access the
iteration counter.
for (const variable of iterable) {
// loop body
}
variable
is a variable that stores element values at each iteration.iterable
is a collection that contains enumerable elements such as an array.
const clients = ["Mango", "Ajax", "Poly"];
for (const client of clients) {
console.log(client);
}
const string = "javascript";
for (const character of string) {
console.log(character);
}
break
and continue
statements
Let's look for the client's name in the array of names. After indentifying it, the loop is interrupted, as there is no point in looking further (all names are unique).
const clients = ["Mango", "Poly", "Ajax"];
const clientNameToFind = "Poly";
let message;
for (const client of clients) {
// At each iteration, check if the array element matches
// client's name. If it matches, then log a message
// and make a break so as not to look further
if (client === clientNameToFind) {
message = "Client name exists in the database!";
break;
}
// If no match is found, create a message saying that there is no such a name
message = "Client name does not exist in the database!";
}
console.log(message); // "Client name exists in the database!"
You can initially set message
to search failure and overwrite it with success
in a loop if the name is found. You will need to use break
anyway, because if
your array consists of 10,000 clients, and the one you need is at position 2,
there is no point in iterating over the remaining 9,998 elements.
const clients = ["Mango", "Poly", "Ajax"];
const clientNameToFind = "Poly";
let message = "Client name does not exist in the database!";
for (const client of clients) {
if (client === clientNameToFind) {
message = "Client name exists in the database!";
break;
}
// If it does not match, then do nothing at this iteration
}
console.log(message); // Client name exists in the database!
Use a loop to output only numbers greater than a preset value.
const numbers = [1, 3, 14, 18, 4, 7, 29, 6, 34];
const threshold = 15;
// For numbers less than the threshold value, continue is triggered, the body execution stops
// and control is passed to the next iteration.
for (let i = 0; i < numbers.length; i += 1) {
if (numbers[i] < threshold) {
continue;
}
console.log(`Number is greater than ${threshold}: ${numbers[i]}`); // 18, 29, 34
}