forEach() vs. map() - What’s the Difference?

[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 set up Workspace

Sign up