Course: Section

Episode: Title

## S01・V10:Loops

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
1. We will loop over an array using a classic “for” statement.
2. We will iterate over the same array using the newer, and much simpler, “for…of”, statement.
3. We will loop over the array with the “forEach()” method, calling a function on each item in the array.
Watch Video
Duration: 4m 11s

### for

Ever since JavaScript ES1, we can iterate over an array, using a `for` statement.

Let’s say we have an array of numbers:

``const arr = [2, 5, 3, 8, 7, 11, 12];``

We want an array with the squares of these numbers.

We start with a `squares` array as an empty array:

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let squares = [];``````

Then, using a `for` statement, we iterate over the numbers array. We start at index zero, up until the index of the last item, increase the index by one on each iteration.

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let squares = [];

for (let index = 0; index < arr.length; index++) {}``````

On each loop, we square the array number at the current iteration index, and push it into our `squares` array.

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let squares = [];

for (let index = 0; index < arr.length; index++) {
squaredArr.push(arr[index] ** 2);}``````

We then can print out our completed `squares` array.

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let squares = [];

for (let index = 0; index < arr.length; index++) {
squaredArr.push(arr[index] ** 2);
}

console.log("squares:", squares); // Prints `squares: [4, 25, 9, 64, 49, 121, 144]```````

We can see the array of squared numbers in the Console.

### for...of

Since JavaScript ES6, we can iterate over an array, using a `for…of` statement.

We will give each number item in the array, the variable name, `num`:

``````for (const num of arr) {
squares.push(num**2);
}``````

This is a much simpler construction, which has the same result as the `for` statement.

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let squares = [];

// for (let index = 0; index < arr.length; index++) {
//		squares.push(arr[index] ** 2);
// }

for (const num of arr) {
squares.push(num**2);
}

console.log("squares:", squares); // Prints `squares: [4, 25, 9, 64, 49, 121, 144]```````

Note that we can use `const`, instead of `let` when declaring the`num` variable, since we are not reassigning it inside the block.

The resulting `squares` array is the same as before.

### forEach()

Another useful tool for doing something to each item in an array is the `forEach()` method, available since JavaScript ES5.

It takes a callback function, which is called on each item in the array.

For instance, let’s say we only wanted squares with two digits in our resulting array of squares. Start with the same numbers array as before, and then set up an empty double-digits squares array:

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let ddSquares = [];``````

Then, we would use the `forEach()` method on our numbers array:

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let ddSquares = [];

arr.forEach();``````

We will specify an arrow function as the method’s callback, whose parameter is the current item in the array, which we will call `num`:

``arr.forEach(num => {});``

Inside the callback’s block, we will check if the square of the number has double digits:

``````arr.forEach(num => {
if ((num**2 >= 10) && (num**2 < 100)) {}});``````

If this is the case, then push the square of the number into the double-digits squares array:

``````arr.forEach(num => {
if ((num**2 >= 10) && (num**2 < 100)) {
ddSquares.push(num**2);  }
});``````

Now, we can print out the resulting array.

``````const arr = [2, 5, 3, 8, 7, 11, 12];

let ddSquares = [];

arr.forEach(num => {
if ((num**2 >= 10) && (num**2 < 100)) {
ddSquares.push(num**2);
}
});

console.log("ddSquares:", ddSquares); // Prints `squares: [25, 64, 49]```````

Our resulting array of squares has only double-digit numbers inside, which is what we want.

### Summary

We looped over an array using a classic `for` statement. We iterated over the same array using the newer, and much simpler, `for…of`, statement. And, we looped over the array with the `forEach()` method, calling a function on each item in the array.

### Next Up…

In the next video, we will look at copying and merging arrays and objects.

Previous Video
Next Video