Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

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 thenum 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.