Start a free Courses trial
to watch this video
Have you ever needed to loop over an array and weren't sure which method to use? At first, forEach() and map() can seem to do the same thing, right? So which one do you choose and what is the difference between them? In this quick guide, Dustin goes over one thing that sets these two methods apart. If you're unfamiliar with forEach() or map() and would like to learn more, check out the guides in the notes below.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hey, what's up? 0:09 I'm Dustin, a developer here at Treehouse. 0:10 Today, I wanna go over the subtle difference between a couple of JavaScript 0:12 array methods. 0:16 Those methods are forEach() and map(). 0:17 If you've never worked with these methods before, 0:19 you might wanna check out the guides that I've created for each of them first. 0:21 I'll link those down below in the teacher's notes or 0:25 description of this video. 0:27 But if you are familiar with these already, and 0:28 you'd like to understand their differences and how to use them, 0:30 let's hop into our text editors and write some code. 0:34 First, I'll set up an app.js file. 0:36 I'll use Node to run my app.js file. 0:39 But if you're not familiar with Node or don't have it installed, 0:42 you can include an index.html file and then just link in your JavaScript file. 0:46 Then open up your HTML file in the browser and open up the console. 0:51 The first thing I'll do inside of my app.js is just set up a basic array. 0:55 I'll create an array and call it studentNames, and I'll add a few strings. 1:00 We can add in ['John', 'Kate', 'Sam'] 1:05 Next, I wanna loop over each of these array elements and 1:08 log them to the console in all lowercase letters. 1:11 So let's use the forEach() method to do this. 1:14 All right, studentNames.forEach() 1:17 And I'll set our element parameter to name, and 1:20 in the callback, I'll just console.log(name.toLowerCase()) 1:24 Let's check out what we get back in the console. 1:29 In my terminal, I'll run node app.js. 1:31 As you can see, we get back all of our array items in lowercase. 1:36 This is exactly what we wanted. 1:39 Now, how would we do the exact same thing but using map() instead? 1:42 It's pretty easy. 1:46 You just replace forEach() with map() 1:47 I'll save my app.js file, and then clear my console and run node app.js again. 1:50 And look at that, we get the exact same thing in the console. 1:56 So what exactly is the difference between these two methods? 1:59 Let's switch up the structure of our code just a bit so 2:03 that we can see how these methods differ. 2:06 I'll comment out what we've written before and I'll write console.log() 2:09 And inside of this console.log, we'll take our studentNames array and 2:13 run the forEach() method on it. 2:17 We'll take our name element and just convert it to lowercase, 2:19 just as we did before. 2:23 I'll hit save and then clear out my console and run node app.js again. 2:24 But this time, the console returns "undefined". 2:31 So it would probably do the same thing if we used map() instead, right? 2:34 Let's find out. 2:38 I'll clear out my console and run node app.js again. 2:40 This time, we're returned with our array of studentNames. 2:43 Why is this? 2:46 Well, this is because map() returns a new array without altering our initial array, 2:47 while forEach() doesn't return a new array. 2:52 This is actually the key difference between the two methods. 2:55 Let's erase some of the code that we've written and set up a new variable. 2:59 We can call this variable "names". 3:03 And we'll set this equal to studentNames.forEach() 3:05 And we'll again take in the name and convert it to all lowercase letters. 3:10 Now if we console.log this names variable, we should get undefined 3:15 in the console because forEach will not return a new array. 3:20 I'll hit save and clear out my terminal, and then I'll just run node app.js again. 3:23 And undefined is shown in the console. 3:29 But if we change our method to map(), 3:32 we'll get an array back as our value for our names variable. 3:35 Sweet, our names variable now holds our new array of all lowercase names. 3:39 If we hop back into the code and console.log our student names array, 3:45 you'll notice that it still has the same values that we originally gave it, 3:49 it's untouched. 3:54 map() will not alter an array but instead just return a new one. 3:55 I hope this quick run through of these two methods was helpful and 3:59 you can see the difference between them. 4:02 They definitely both have their use cases, and now you should understand when and 4:05 how to use them effectively. 4:09 I'll see you in the next one, and until then, have fun and happy coding. 4:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up