Lesson Monday

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.

Finally, for the sake of thoroughness, we'll cover while and for...of loops, which you probably won't use often (and aren't necessary for this section's independent project). However, it's still important to be aware of them.

We'll cover Array.prototype.forEach() first because this kind of loop is easier to use - and will likely be one of your main go-tos for looping.


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 is passed into another function as an argument to be executed later, 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. Also, callbacks tend to be a tricky concept for beginners.

Up to this point, we've passed things like numbers and strings into other functions. However, functions themselves are also things that we can pass into other functions. That's exactly what's happening above. We pass a function into Array.prototype.forEach(). Then, when we call this outer function (Array.prototype.forEach()), the inner function is invoked.

Specifically, Array.prototype.forEach() takes an anonymous function as its argument. That just means that the inner function 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:


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.


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().


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

Lesson 12 of 42
Last updated June 9, 2022