Understanding the forEach() Method

[MUSIC] 0:00 Hey, what's up? 0:09 I'm Dustin, a developer here at Treehouse. 0:10 I wanna go over a JavaScript array method known as for each. 0:12 It can seem a little confusing and hard to use at first, but 0:16 this is a really great way to iterate over a collection of items in an array. 0:19 The only prerequisite that I would have for this would be to just understand how 0:24 loops work in JavaScript, since this method does loop over array items. 0:28 I'll go over the differences between a standard for loop and the for each method. 0:32 And this will all be done in the console of my browser, so 0:37 feel free to follow along with me. 0:40 If you stick around until the end, I'll show you a fun real world example 0:41 using this method to create a small settings application dynamically. 0:46 As always, check the teachers notes or description of this video for 0:50 related content and a blog post covering this method. 0:53 If you're ready, let's get into it. 0:56 Let's first get started by checking out the MDN docs for forEach. 0:58 According to MDN, the forEach method executes a provided function once for 1:03 each array element. 1:08 Let's take a look at the example that they've provided. 1:10 On line 1, a variable named array1 is created and it holds an array of strings. 1:13 On line 3, they write the array name, followed by the forEach method. 1:19 Inside the method, you see the word element. 1:24 But what exactly is element and where did it come from? 1:27 Well, it's actually a variable. 1:32 Each time the array gets looped over, 1:34 this element variable holds the value of the current index. 1:37 So, to put it simply, 1:40 element is just a placeholder variable holding the current index's value. 1:42 You don't have to name this element, 1:47 you can actually name this anything you'd like. 1:49 You can see that next they are logging the value of element to the console. 1:51 So each time the loop runs on the array, 1:56 the value is stored into this element variable and logged to the console. 1:59 And then it's repeated until every item in the array has been looped over. 2:04 So in their example, when the code runs, forEach loops through the array. 2:09 The first time through element, 2:15 holds the value of the first index which is the string of a. 2:17 This gets logged to the console and then the process starts over again, but 2:22 at the next index. 2:26 And this keeps happening until all array items have been looped over. 2:27 In case you are unfamiliar with the shorthand syntax that the MDN docs use, 2:32 here's the same code with the standard syntax. 2:36 Now that we have a bit of an understanding of the basics with for each, 2:42 let's look at the parameters we can use with this method. 2:46 If you scroll down to the parameters section, 2:49 the first thing listed is the callback function. 2:52 This is where you can write a function for what you want to do each time for 2:55 each loops over your array. 3:00 In this example we just went over, 3:02 this was the console.log that was ran on each iteration with the for each method. 3:04 Next, you'll see that element variable again, and this 3:10 is the variable you assign the current index's value through each iteration. 3:14 The only other parameter we'll go over is index. 3:18 This can be called anything you'd like just like the element parameter, but 3:22 this is usually just named index. 3:26 But what does it do? 3:29 According to MDN, this is the index of the element in the array. 3:30 Let's check this out in the browser console to get a better understanding for 3:35 what this parameter can do. 3:39 In my project folder, 3:44 all I have is an index.html file that links to an app.js file. 3:46 We will write our code in this app.js file, so let's open this up in the browser 3:51 console side by side with my editor, so that we can see everything at once. 3:56 The first thing I'll do is I'll just log hello world to the console 4:01 to make sure everything is working properly. 4:05 I'll hit Save, and sweet, hello world shows up in the console. 4:09 So let's remove that and let's set up an array. 4:14 We can name this Nums, and set up this array with just a few numbers. 4:17 I'll do 1, 2, 3, and 4. 4:22 Underneath that, let's run the forEach method on our array. 4:25 We can write nums.forEach, and the element parameter we'll call num. 4:29 Since each item in our array is a number, this variable name makes sense. 4:34 Inside the function, we'll just log(num). 4:38 I'll hit Save, and we'll see 1, 2, 3, and 4:45 4 in the browser console, which are the items of our array. 4:49 But what about that index parameter that we discussed earlier? 4:53 Let's add that in, and 4:57 then change our console.log to log out this index variable. 4:59 Let's hit Save, and we'll notice that now we see 0, 1, 2 and 3. 5:03 This is because our for 5:08 each method is logging the index variable each time through the array. 5:09 So the first element of our array is the number one, and 5:14 the number one has an array index of 0 since arrays start with a 0 index. 5:17 So let's break down what we've done so far. 5:22 We first initialized a variable and named it Nums. 5:25 This variable holds an array of numbers. 5:29 Next, we ran the for each method on this variable that holds our array. 5:32 We gave our for each method two parameters, num and index. 5:37 We then console.log num and index. 5:42 The first time the for each method goes through our array, num = 1. 5:46 1's index in our array is zero, so index = 0. 5:51 The second time through the array, 5:56 num holds the value of 2 with an index value of 1. 5:59 The third time, the num variable holds the value of 3, and 6:02 the index holds the value of 2. 6:06 And the last time through our array, 6:08 num holds the value of 4 while the index holds the value of 3. 6:11 One way that I like to remember how this method works is by making sure my array's 6:16 name is a plural word, since it's an array that holds a collection of items. 6:21 So when we run our for each, 6:26 our element variable can be named the singular version of our plural array name. 6:28 Then, you can just verbally say something like users.forEach 6:33 user do this, or colors.forEach color, do this. 6:39

You need to sign up for Treehouse in order to set up Workspace

Sign up