JavaScript Array Methods: map()

[MUSIC] 0:00 Hey, what's up. 0:09 I'm Dustin, a developer here at Treehouse. 0:10 Today, we'll go over a JavaScript array method known as map. 0:12 Whether you've used this method before or haven't used it at all yet, 0:16 I'll go over what it is and how we can work with it. 0:19 I'll do all of this in my text editor, so feel free to follow along with me. 0:21 And as always, check out the description or teacher's notes below for 0:25 a related blog article and some helpful resources. 0:29 Let's get into it. 0:32 First, let's hop into the MDN Docs and see what they have to say about this method. 0:33 According to MDN, the map method creates a new array populated with the results of 0:38 calling a provided function on every element in the calling array. 0:42 Let's break that down and take a look at the example that they've provided. 0:47 You can see that on line one, 0:51 they've initialized a variable named array1 holding an array of numbers. 0:52 Then on line four, they initialize a new variable named map1 and 0:57 that's equal to array1.map() 1:01 And inside of this map method, we see x, an arrow function, and then x * 2 1:04 If this looks a little confusing to you, 1:11 let's check out the parameters by scrolling down to the parameter section. 1:13 You'll see element and 1:17 this parameter is the current element being processed in the array. 1:18 So to put it simply this method will loop over a given array and 1:23 do something with each item in that array. 1:27 Some of you may be familiar with the forEach() method. 1:29 While this may seem similar to the forEach() method, 1:32 at this point there are some crucial differences that I'll demonstrate shortly. 1:35 I'll go into even more detail about these differences in a separate video that I'll 1:39 link either in the teachers notes or description below. 1:43 Now let's go back up to the example and see what's going on. 1:46 It looks like they're creating this element parameter and setting it to x and 1:50 then taking x and multiplying it by 2. 1:55 So X holds the value of the current element in the array being processed. 1:58 So the first time through the loop, x equals the first item in the given array. 2:03 Which in this case is 1, and 1 times 2 equals 2. 2:07 And the process starts over again, but at the next array's index, so the second 2:11 time through the loop, x equals 4, and 4 times 2 is 8, and so on and so on. 2:16 On line six, we see a console.log logging the variable created on line 4. 2:22 This variable now holds a new array holding the results of the logic that was 2:27 ran in the map method. 2:31 So the new array holds all the numbers of the first array multiplied by two. 2:34 If this still doesn't quite make sense to you yet, 2:39 let's give this a try in our text editor. 2:41 In my text editor, I'll just create an app.js file and 2:44 I'll be running this file with node in my terminal. 2:48 But if you're unfamiliar with how that works or don't have Node installed, 2:51 you can still follow along by just creating an index.html file. 2:55 Link your app.js file inside of it, and then open the index.html file in your 2:59 browser and navigate to your browser's console and write the same code as I am. 3:04 So as always, 3:11 let's run a quick console.log to see if everything's working. 3:12 To do this with node, I'll just open up my terminal and run node app.js. 3:16 And sweet, we see hello world show up in the console. 3:24 Let's remove that and set up an array. 3:28 We'll make an array of pets. 3:31 So I'll just name this array "pets". 3:32 Inside of our array, let's add a few strings. 3:35 We can write ['dog', 'cat', 'fish']; 3:38 Underneath our array, let's write pets.map() 3:42 And inside of our map method, let's create a variable for our element parameter. 3:45 I'll name this "pet". 3:50 Now what do we wanna do with each pet in the array? 3:52 Let's make all of the letters of our pet uppercase by running the 3:56 toUpperCase() method. 4:00 If you're unfamiliar with the to uppercase method I'll link some of 4:01 the MDN documentation for it down below. 4:05 But to put it simply, it just takes a given string and 4:08 converts it to all uppercase letters. 4:11 Great, so now we're using the toUpperCase() method on each array element. 4:13 Let's put this into a variable and log it to the console. 4:19 We can call this "upperCasePets". 4:22 Before we do this though, let's go over what we've done one last time. 4:24 We created a variable named pets and we set it to an array and 4:28 we added some strings. 4:32 We added ['dog', 'cat', 'fish']; 4:34 Then we created a new variable named upperCasePets and 4:37 set it to the result of running the map method on our pets array. 4:40 Inside of our map method, we are running the toUpperCase() method on each element. 4:44 Great, so let's hit save and run our console.log to see what we have now. 4:50 Looks like our upperCasePets variable now holds an array of pets in 5:05 all uppercase letters. 5:09 Sweet, remember, the definition of the map method states that 5:11 map creates a *new* array populated with the results of calling a provided 5:15 function on every element in the calling array. 5:20 So what do you think happens if we log our initial pets array to the console? 5:24 Let's find out As you can see, nothing has changed with our initial pets array. 5:28 Map does not change an array but instead creates a new one. 5:38 If you've used the forEach() method before, 5:42 you'll probably think that map is pretty similar, if not identical. 5:44 This is one of the differences between the two methods. 5:48 If you'd like to know a little bit more about the differences between forEach() and 5:51 map(), and when is the best time to use either, 5:55 I'll link a video down below where I go over the differences. 5:57 I hope you found this guide on using the map() array method helpful and 6:00 you can comfortably start to implement this in your projects going forward. 6:03 Remember to check out the teacher's notes or description below for 6:07 an associated blog article and some helpful resources. 6:10 I'll see you in the next one. 6:13 And until then, have fun and happy coding. 6:14

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

Sign up