Iteration

It is common that the same code will need to be executed multiple times, or for multiple items. To solve this problem we can use iteration, or loops.

For Loops

A for loop is a powerful tool that allows a block of code to be executed multiple times. This is often to iterate (go through) an array or string, or to a certain number, and do something at each current index (position) of the element. Here's an example of a for loop that will console.log each name in the names array.

const names = ['Harry', 'Sally', 'Bob'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

The first part of the for loop (let i = 0;) is saying start counting from the very beginning of the array. Strings and arrays are 0 indexed in Javascript which means that we start counting from 0 (the initial expression). The second part (i < names.length;) is saying to keep going until you've reached the end of the array (the condition expression) which works by running the for loop until the condition is no longer true. The final part (i++;) is making sure that we go through each element of the array one by one (the increment expression) which increases the value of i in steps until the condition is no longer true. If I wanted to access the very first index in the names array, outside of using a for loop, we would use square brackets to do this.

name[0]; // 'Harry'
name[1]; // 'Sally'
name[2]; // 'Bob'
name[4]; // undefined

Inside of the for loop we can do the same thing but instead of going through an having to access each individual index, we can use the i index variable to access every element we need as we have already made sure that we can do that with the for loop. For loops can also work with numbers and strings, for example: To console.log every number from 0, up to and including 5

const numberFive = 5;
for (let i = 0; i <= numberFive; i++) {
  console.log(i);
}
//output
// 0
// 1
// 2
// 3
// 4
// 5

We can't use the .length property here because that only exists on arrays and strings. Or to console.log each letter in a string:

const name = 'Bob';
for (let i = 0; i < name.length; i++) {
  console.log(name[i]);
}
//output
// "B"
// "o"
// "b"

For ... of Loops

For of loops are similar, but expose the items inside an array or string in order, rather than giving you an integer that increments.

const name = 'Harry'; // would also work with an array of: ['H', 'a', 'r', 'r', 'y']
let capitalName = [];
for (const letter of name) {
  const capitalLetter = letter.toUpperCase();
  capitalName.push(capitalLetter);
}
console.log(capitalName);

In the above example letter represents each value in the name array as it iterates. If you don't need the flexibility of the for loop's conditions, initial statement and manner of incrementing, the for ... of loop can simplify the code.

For ... in Loops

For... in loops can be used to iterate through arrays and objects. This is the only iterative method available to us for objects. The syntax for a for...in loop is very similar to the for...of loop:

const person = { name: 'Noel', age: 42, favouriteAnimal: 'Owl' };
for (const key in person) {
  console.log(key);
}
//output
// name
// age
// favouriteAnimal

In the above example, we will log all of the keys from the person object. Remember that objects are unordered, so the order that these keys are logged is not guaranteed.

const person = { name: 'Noel', age: 42, favouriteAnimal: 'Owl' };
for (const key in person) {
  console.log(person[key]);
}
//output
// 'Noel'
// 42
// 'Owl'

In this second example we use bracket notation and dynamic access to access each value. This will log 'Noel', 42 and 'Owl' instead of logging the key names.