Lesson Thursday

Over the next several lessons, we are going to dive into a concept that is often very challenging for beginners: looping.

A loop is just what it sounds like - a piece of code that loops over and over until a condition is met.

In this lesson, we'll start by covering the basics of Array.prototype.forEach(), which we can use to loop through each element in an array. In the next lesson, we'll move on to a more in-depth discussion of Array.prototype.forEach(), including ways we can use this kind of loop.

Later, we will explore for loops and Array.prototype.map(). for loops have been around since the beginning of JavaScript - and they are a more traditional way of looping. In fact, Array.prototype.forEach() is syntactic sugar that's been added to a traditional for loop. Syntactic sugar just means syntax that makes a piece of code easier to write. A loop that uses Array.prototype.forEach() is really using a for loop under the hood. Meanwhile, Array.prototype.map(), like Array.prototype.forEach(), provides syntactic sugar as well as other functionality that can make looping easier in many situations.

We will cover Array.prototype.forEach() first because this kind of loop is easier to use - and generally should be preferred except in a few use cases.

Later in this section, we will also learn the following looping methods:

  • for...of
  • while

Array.prototype.forEach()

Array.prototype.forEach() loops over every element in the array it is called on. Let's take a look at a simple example. Try running the following in the console:

const languages = ['HTML', 'CSS', 'JavaScript'];
languages.forEach(function(language) {
  alert('I love ' + language + '!');
});

The first time through the loop, we'll get an alert that says "I love HTML!" The second time, we'll get an alert that says "I love CSS!" The third and final time through the loop, we'll get an alert that says "I love JavaScript!"

So what exactly is happening?

An Array.prototype.forEach() loop takes a function as an argument. Here's the function that is passed into the loop above:

function(language) {
  alert('I love ' + language + '!');
}

When a function calls another function, it is known as a callback. Callbacks are a huge part of programming - and you'll often see complex and even confusing examples of callbacks in JavaScript. In those moments, just remember that a callback is just a function that calls another function.

The callback above is an anonymous function. That just means it doesn't have a name. Because it doesn't have a name, we don't have a way to use it or call it on its own.

However, remember when we learned about function expressions (also known as function literals) in Writing Functions? We can use the anonymous function above in a function expression:

const languageILove = function(language) {
  alert('I love ' + language + '!');
};

Try this in the console, then call it like this:

languageILove("JavaScript!")

An alert saying "I love JavaScript" will pop up.

In short, when we call Array.prototype.forEach() on an array, the function we pass into the loop will be called for every element in the array.

Unlike with our function expression, which can only be used to pop up one alert at a time, we can use our loop to iterate over an array of any size. We could have an array with a thousand items, popping up one thousand alerts as a result. The users of our website will definitely love that. (All joking aside, you should avoid alerts in your code... they are extremely unpopular for obvious reasons - mainly their obtrusiveness.)

While the example above is not a very useful one, it demonstrates the power of looping. We can execute code on many elements of an array instead of a single item. As a result, looping is a foundational cornerstone of computer programming and it's one of the most important programming concepts you'll ever learn.

In the next lesson, we'll do a deeper dive into using Array.prototype.forEach(). We'll learn how we can use it to modify arrays, add numbers and more.

Terminology


Loop: A piece of code that repeats until a condition is met.

Callback: A function that calls another function.

Anonymous function: An unnamed function. They can be stored using a function expression or used as a callback in another function such as Array.prototype.forEach().

Example


const languages = ['HTML', 'CSS', 'JavaScript'];
languages.forEach(function(language) {
  alert('I love ' + language + '!');
});

Lesson 8 of 16
Last updated July 2, 2020