Intermediate Arrays

Learning Goals

• Explain the concept of iteration
• Use JavaScript syntax to iterate over an array

Technical Vocabulary

• Array
• Collection
• Element
• Index
• Iterate

Warm Up

Iteration (or looping for a specified number of times) is a process of repeating a task for each object in a collection. For each of the scenarios below, we’ll walk through using scenarios we are familiar with to demonstrate the concept.

These are examples that would be programmatically challenging because they would require several steps, but are things that we do every day.

We can also iterate in programming. By “in programming,” we mean things that could be done, with relative ease by a computer, like crunching numbers.

Iterator Methods

In our Intro to Arrays lesson, you learned about the array methods .push() and .pop(). Today we will learn about another array method, .forEach(). It’s what is referred to as an iterator method because its job is to run a function not only once, but one time for each element in the array.

forEach

The benefit of iterators is they save us time. When we want to repeat the same thing for a lot of items, we only have to write that command once. For example, if we wanted to do something with each string in the trending array, our code would look like this:

var trending = ["@cosette", "@avani", "@lorengray", "@jamescharles"];

console.log(`Have you seen that TikTok from ${trending[0]} yet?!`);
console.log(`Have you seen that TikTok from ${trending[1]} yet?!`);
console.log(`Have you seen that TikTok from ${trending[2]} yet?!`);
console.log(`Have you seen that TikTok from ${trending[3]} yet?!`);

Right now, this doesn’t seem so bad. What if we had 100 creators on our list? 1000? That’s a lot of lines of code to write and potentially a lot of places we would need to update it every time we added or removed a creator.

Syntax

var trending = ["@cosette", "@avani", "@lorengray", "@jamescharles"];

trending.forEach(function(creator) {
  console.log(creator);
});

Let’s break this code down:

• trending is the array we are going to iterate over
• .forEach() is a built-in function that runs through each element of the array it’s called on, one-by-one. It takes one argument, a function. This is different from anything we’ve seen before. It’s saying it will run this function for each element in the array.
• function(creator) { is the function that will run on each element in the array. If there are 10 elements in the array, it will run 10 times. 100 elements? 100 times. creator is the variable that represents the current element in the array being iterated over.
• console.log(creator) is the code that will run for each element. In this case, each creator’s handle in the array will print to the console.

Placeholders & Counters

Sometimes, when iterating over an array, our end goal won’t be to do the exact same thing to each element. Sometimes we’ll want to combine elements. Sometimes we’ll want to filter through them and only use some of them.

Here’s a real-life example: Tumblr has an array of posts related to each term. When we first search a term, we’ll see all the posts. If we select “Link” from the filter drop-down, we’ll only see the two posts that are links.

How did Tumblr do that? They iterated over the array of all posts, checked each one for a piece of criteria, and put those that met the criteria in a placeholder. After it finished iterating, it returned the placeholder and displayed them in the browser.

Let’s solve a slightly less involved challenge, but one that gets at the same idea. Our goal will be to take an array of numbers and return an array of only the numbers from the original array that are greater than 10. One important thing to know about forEach is that it won’t ever change the array it was called on.

// start with an array of numbers
var numbers = [1, 4, 23, 14, 5, 7, 11, 6, 92];

// start a placeholder array that will eventually store numbers over 10
var largeNumbers = [];

// iterate over the array
numbers.forEach(function(number) {

});

In the code above, we set up our placeholder and our forEach. Now, we need to do some work inside the forEach.

var numbers = [1, 4, 23, 14, 5, 7, 11, 6, 92];
var largeNumbers = [];

numbers.forEach(function(number) {
  // check if the current number being iterated over is greater than 10
  if (number > 10) {

  }
});

In the code above, we wrote a conditional to check the value of the current number against 10. Now, we need to write code inside that conditional.

var numbers = [1, 4, 23, 14, 5, 7, 11, 6, 92];
var largeNumbers = [];

numbers.forEach(function(number) {
  if (number > 10) {
    // if the number is greater than 10
    // push it into the largeNumbers placeholder array
    largeNumbers.push(number);
  }
});

At this point, our largeNumbers array is holding all four numbers greater than 10, but we aren’t ever printing it out, so it’s hard to see that.

var numbers = [1, 4, 23, 14, 5, 7, 11, 6, 92];
var largeNumbers = [];

numbers.forEach(function(number) {
  if (number > 10) {
    largeNumbers.push(number);
  }
});

console.log(numbers); // [1, 4, 23, 14, 5, 7, 11, 6, 92]
console.log(largeNumbers); // [23, 14, 11, 92]

More Practice

At this point, you have the tools to do just about anything with an array! If you’d like more practice before moving on, check out the Leveled Array Exercises.