Exercise Thursday

Goal: In the Looping lesson, we learned:

  • How to use an Array.prototype.forEach() loop
  • Naming conventions for arrays and the parameter in a loop

As we can see, looping is an incredibly important programming concept. Now it's time to practice. We'll begin with several looping exercises in the console and then move on to creating and updating small projects.

Warm Up


  • If we used Array.prototype.forEach() to loop through an array called "kittens", what should we call the parameter in the Array.prototype.forEach() function? Why?
  • What does the += operator do?

Code


Looping Practice in the Console

  • Make an array of your friends' names. Loop through it and console.log() a greeting to each.
  • Write a loop to multiply an arbitrary amount of numbers. This should look similar to the code to sum numbers from the lesson.

Refactoring Existing Projects with Loops

  • Refactor your Mad Libs page we created in this exercise to use a loop.

  • In the Introduction to jQuery lesson we created a web page that triggered alerts containing information about a particular HTML tag whenever a user clicked on an HTML element. Try to refactor this page's multiple, similar event listeners using a loop.

Webpages with Looping

  • Make a web page that lists out your favorite ice cream flavors. Rather than writing the flavors in the HTML, use a JavaScript loop to insert the flavors into the page from an array.

Additional Information


Note: When choosing a name for the variables in your loop, it's good practice to use a plural for the array and the singular form of that word for the loop.

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

The array is named languages and the parameter is the singular language.

Lesson 12 of 16
Last updated September 13, 2020