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