Skip to main content

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
}