`for` vs forEach()

6:53 with Joel Kraft

It's important to able to look through an array to see what it holds. This video covers two ways of doing this: the for loop, and the forEach method. We'll compare and contrast the two techniques.

Teacher's Notes
Video Transcript
Downloads

Node.js

Using Treehouse Workspaces for this course is strongly encouraged. However, if you'd like to work locally (on your computer), you'll need to install Node.js. Node allows you to run JavaScript from your command line. To install Node, you can go to this link for instuctions:

http://treehouse.github.io/installation-guides/

Once you have Node installed, you'll need to use a console application on your computer to run the exercise file(s) described in the videos, and look at the output in your console. You'll also need a text editor like Atom or Sublime Text to edit the file(s) before running them from the command line.

If all of that sounds like more than you want to do just yet, don't worry! Just click the "Launch Workspace" button below the video, and follow along.

Creating a Variable for an Array Element in a for Loop

Here's an example of creating a variable to hold each element in a for loop. As stated in the video, this is a bit more verbose than the forEach example we looked at. However, it can be helpful in making your intent easier to understand. Readable, intuitive code is a great thing!

const fruits = ['apple', 'pear', 'cherry'];

for (let i = 0; i < fruits.length; i += 1) {
  const fruit = fruits[i]
  console.log(fruit);
}

0:00
Let's begin our journey through array iteration methods with a look at forEach.
0:05
The forEach method is simply a loop that accesses each item in an array.
0:10
You've probably used a for loop to do the exact same thing.
0:14
Let's look at a for loop and
0:15
I'll show you how to rewrite it using the forEach method.
0:19
Open a workspace below this video if you want to follow along with me.
0:23
If you want to work locally on your own computer,
0:26
look at the teacher's notes to get started.
0:28
But I do recommend using WorkSpaces for this course.
0:31
I have an array of strings in this JavaScript file called iteration.js.
0:36
Let's loop through this array and log each string to the console.
0:41
First I'll set up my for loop by typing for
0:45
() and {}.
0:49
Now only to set up my counter variable.
0:54
You can use any variable name but programmers frequently use the letter i.
0:59
I'll set it equal to 0.
1:02
I'll type a semicolon and set a condition to check each time through the loop.
1:07
Because I want to look at each element in the array,
1:11
I'll check to see if i is less than the array's length.
1:18
An array's length property stores the total number of items in the array.
1:23
In this example that's 3.
1:25
Array items are accessed using their index value,
1:28
and the first item in an array is at index 0.
1:33
So the three items here are at the 0, 1, and 2 spots in the array.
1:38
So as long as i is less than 3, this loop runs.
1:43
When the loop accesses the last item, i will be increased to 3, and
1:47
the loop will end.
1:49
Finally let's add a statement that runs before the next time through the loop,
1:54
usually this expression increases or decreases the counter variable.
1:58
I'll increment i by 1.
2:01
I wanna log each item to the console, so
2:05
in the body of the loop, I'll type console.log.
2:11
I can use i to access each element in the array using square brackets.
2:21
Now, to run this code, I'll go to my console and use the node command.
2:26
In WorkSpaces I can get there by going to View.
2:31
And currently my console is showing, so this says Hide Console.
2:36
If I wanna show it, I go to Show Console.
2:39
If you're working locally, you'll need to use your terminal application.
2:44
I'll type node and then the name of the file I want to run, which is iteration.js.
2:52
I can actually just start typing the name and hit Tab, and
2:55
the console will auto-fill the rest.
2:57
When I hit Return, nothing happens, that's because I did not save this file.
3:03
So I'll hit Command+S or you can go to File and Save.
3:09
And then that orange dot disappeared.
3:12
Now, if I just hit up arrow, the command will come back and I can hit Return.
3:19
And you can see the three strings were logged to the console.
3:23
Now, let´s do the same thing with the forEach method.
3:26
forEach is a method on any array just like push or pop for example.
3:32
Remember, to call a method you first put the variable you want to call it on,
3:36
then a dot, the method name, which is forEach
3:41
in parenthesis.
3:46
Now, I'll pass a call back function into forEach.
3:50
The forEach method will call this function for each element in the array.
3:54
When the function is called, the next array element is passed in as an argument.
4:00
Arrays are often named using plural nouns like fruits,
4:03
customers, photos, etc, because they are a collection of those things.
4:08
Since this argument references just a single item in the fruits array,
4:12
I'll name it fruit.
4:17
Inside the body of the function we can do what we want with each item.
4:22
I'll log each fruit to the console, like we did in the for loop.
4:29
Since this function has only one statement in it,
4:34
I can simplify this by putting it all on one line and removing the curly brackets.
4:43
Now, I'll save and run this file again in the console below.
4:48
And I´ll just clear the console first, I can type clear, and that'll clear it.
4:54
And if I type the up arrow, I get to clear and
4:58
if I hit up one more time, I can get to node iteration.js.
5:04
You can see the fruit names were all printed twice, once in the for loop and
5:09
once with the forEach method.
5:11
Look at this two pieces of code for a moment.
5:14
The for loop includes more code than a forEach version.
5:18
Many programmers find forEach easier to read than for
5:21
loops as well, since it replaces the bracket notation used in a for
5:26
loop with a single variable name for an array element.
5:29
Note that you could also create a named variable with a for loop too.
5:34
But then it becomes even more verbose, see the teacher's notes for an example.
5:39
Let's cover some of the benefits of the forEach method over a for loop for
5:43
iterating over arrays.
5:46
forEach is easier to read and understand with a simpler syntax.
5:50
The forEach method manages the process of accessing each element in an array for
5:55
you, for loops make you have to do that yourself.
5:59
You have to create a counter variable, increment it, and
6:02
check to see when you've looped through the entire array.
6:06
There are also several kinds of bugs that forEach eliminates,
6:09
forEeach won't loop an infinite number of times the way for loops can, for example.
6:15
forEach also takes care of implementing and
6:18
breaking the loop which are both potential sources for bugs.
6:22
On the other hand,
6:23
forEach doesn't let you break out of the loop early the way you can with for loops.
6:28
Every array element will always be visited by forEach, however this need is rare.
6:35
If you need to be able to stop iterating before you get to the end of an array,
6:39
use a for or while loop.
6:41
Just so you know, forEach shares these features with
6:44
all of the array methods you'll learn in this course.
6:48
Now that you've learned about forEach, let's practice using it in the next video.

You need to sign up for Treehouse in order to download course files.

JavaScript Array Iteration Methods

`for` vs forEach()

Node.js

Creating a Variable for an Array Element in a for Loop

Sign in