1
00:00:00,000 --> 00:00:09,343
[MUSIC]

2
00:00:09,343 --> 00:00:10,123
Hey, what's up.

3
00:00:10,123 --> 00:00:12,650
I'm Dustin, a developer here at Treehouse.

4
00:00:12,650 --> 00:00:16,060
Today, we'll go over a JavaScript
array method known as map.

5
00:00:16,060 --> 00:00:19,078
Whether you've used this method before or
haven't used it at all yet,

6
00:00:19,078 --> 00:00:21,720
I'll go over what it is and
how we can work with it.

7
00:00:21,720 --> 00:00:25,400
I'll do all of this in my text editor,
so feel free to follow along with me.

8
00:00:25,400 --> 00:00:29,084
And as always, check out the description
or teacher's notes below for

9
00:00:29,084 --> 00:00:32,270
a related blog article and
some helpful resources.

10
00:00:32,270 --> 00:00:33,600
Let's get into it.

11
00:00:33,600 --> 00:00:38,290
First, let's hop into the MDN Docs and see
what they have to say about this method.

12
00:00:38,290 --> 00:00:42,779
According to MDN, the map method creates
a new array populated with the results of

13
00:00:42,779 --> 00:00:46,500
calling a provided function on
every element in the calling array.

14
00:00:47,590 --> 00:00:51,450
Let's break that down and take a look
at the example that they've provided.

15
00:00:51,450 --> 00:00:52,896
You can see that on line one,

16
00:00:52,896 --> 00:00:57,500
they've initialized a variable named
array1 holding an array of numbers.

17
00:00:57,500 --> 00:01:01,642
Then on line four, they initialize
a new variable named map1 and

18
00:01:01,642 --> 00:01:04,620
that's equal to array1.map()

19
00:01:04,620 --> 00:01:10,340
And inside of this map method, we see x,
an arrow function, and then x * 2

20
00:01:11,360 --> 00:01:13,132
If this looks a little confusing to you,

21
00:01:13,132 --> 00:01:17,440
let's check out the parameters by
scrolling down to the parameter section.

22
00:01:17,440 --> 00:01:18,706
You'll see element and

23
00:01:18,706 --> 00:01:22,380
this parameter is the current element
being processed in the array.

24
00:01:23,590 --> 00:01:27,197
So to put it simply this method
will loop over a given array and

25
00:01:27,197 --> 00:01:29,762
do something with each item in that array.

26
00:01:29,762 --> 00:01:32,934
Some of you may be familiar with the forEach() method.

27
00:01:32,934 --> 00:01:35,277
While this may seem similar to the forEach() method,

28
00:01:35,277 --> 00:01:39,960
at this point there are some crucial
differences that I'll demonstrate shortly.

29
00:01:39,960 --> 00:01:43,637
I'll go into even more detail about these
differences in a separate video that I'll

30
00:01:43,637 --> 00:01:46,990
link either in the teachers notes or
description below.

31
00:01:46,990 --> 00:01:49,510
Now let's go back up to the example and
see what's going on.

32
00:01:50,900 --> 00:01:55,173
It looks like they're creating this
element parameter and setting it to x and

33
00:01:55,173 --> 00:01:58,290
then taking x and multiplying it by 2.

34
00:01:58,290 --> 00:02:01,970
So X holds the value of the current
element in the array being processed.

35
00:02:03,020 --> 00:02:07,519
So the first time through the loop, x
equals the first item in the given array.

36
00:02:07,519 --> 00:02:11,409
Which in this case is 1,
and 1 times 2 equals 2.

37
00:02:11,409 --> 00:02:16,403
And the process starts over again, but
at the next array's index, so the second

38
00:02:16,403 --> 00:02:21,190
time through the loop, x equals 4, and
4 times 2 is 8, and so on and so on.

39
00:02:22,780 --> 00:02:27,314
On line six, we see a console.log logging
the variable created on line 4.

40
00:02:27,314 --> 00:02:31,892
This variable now holds a new array
holding the results of the logic that was

41
00:02:31,892 --> 00:02:34,270
ran in the map method.

42
00:02:34,270 --> 00:02:39,070
So the new array holds all the numbers
of the first array multiplied by two.

43
00:02:39,070 --> 00:02:41,159
If this still doesn't quite
make sense to you yet,

44
00:02:41,159 --> 00:02:42,870
let's give this a try in our text editor.

45
00:02:44,640 --> 00:02:48,212
In my text editor,
I'll just create an app.js file and

46
00:02:48,212 --> 00:02:51,680
I'll be running this file
with node in my terminal.

47
00:02:51,680 --> 00:02:55,970
But if you're unfamiliar with how that
works or don't have Node installed,

48
00:02:55,970 --> 00:02:59,658
you can still follow along by
just creating an index.html file.

49
00:02:59,658 --> 00:03:04,592
Link your app.js file inside of it, and
then open the index.html file in your

50
00:03:04,592 --> 00:03:09,630
browser and navigate to your browser's
console and write the same code as I am.

51
00:03:11,210 --> 00:03:12,206
So as always,

52
00:03:12,206 --> 00:03:16,864
let's run a quick console.log
to see if everything's working.

53
00:03:16,864 --> 00:03:22,656
To do this with node, I'll just open
up my terminal and run node app.js.

54
00:03:24,814 --> 00:03:27,510
And sweet,
we see hello world show up in the console.

55
00:03:28,710 --> 00:03:31,400
Let's remove that and set up an array.

56
00:03:31,400 --> 00:03:32,830
We'll make an array of pets.

57
00:03:32,830 --> 00:03:35,449
So I'll just name this array "pets".

58
00:03:35,449 --> 00:03:38,640
Inside of our array,
let's add a few strings.

59
00:03:38,640 --> 00:03:41,090
We can write ['dog', 'cat', 'fish'];

60
00:03:42,430 --> 00:03:45,920
Underneath our array,
let's write pets.map()

61
00:03:45,920 --> 00:03:50,460
And inside of our map method, let's create
a variable for our element parameter.

62
00:03:50,460 --> 00:03:51,280
I'll name this "pet".

63
00:03:52,820 --> 00:03:55,510
Now what do we wanna do
with each pet in the array?

64
00:03:56,760 --> 00:04:00,427
Let's make all of the letters of
our pet uppercase by running the

65
00:04:00,427 --> 00:04:01,552
toUpperCase() method.

66
00:04:01,552 --> 00:04:05,299
If you're unfamiliar with the to
uppercase method I'll link some of

67
00:04:05,299 --> 00:04:08,170
the MDN documentation for it down below.

68
00:04:08,170 --> 00:04:11,401
But to put it simply,
it just takes a given string and

69
00:04:11,401 --> 00:04:13,831
converts it to all uppercase letters.

70
00:04:13,831 --> 00:04:19,000
Great, so now we're using the
toUpperCase() method on each array element.

71
00:04:19,000 --> 00:04:22,100
Let's put this into a variable and
log it to the console.

72
00:04:22,100 --> 00:04:24,930
We can call this "upperCasePets".

73
00:04:24,930 --> 00:04:28,530
Before we do this though, let's go
over what we've done one last time.

74
00:04:28,530 --> 00:04:32,555
We created a variable named pets and
we set it to an array and

75
00:04:32,555 --> 00:04:34,208
we added some strings.

76
00:04:34,208 --> 00:04:37,128
We added ['dog', 'cat', 'fish'];

77
00:04:37,128 --> 00:04:40,659
Then we created a new variable
named upperCasePets and

78
00:04:40,659 --> 00:04:44,737
set it to the result of running
the map method on our pets array.

79
00:04:44,737 --> 00:04:49,230
Inside of our map method, we are running
the toUpperCase() method on each element.

80
00:04:50,350 --> 00:04:54,406
Great, so let's hit save and run our
console.log to see what we have now.

81
00:05:05,592 --> 00:05:09,258
Looks like our upperCasePets variable
now holds an array of pets in

82
00:05:09,258 --> 00:05:11,130
all uppercase letters.

83
00:05:11,130 --> 00:05:15,357
Sweet, remember, the definition
of the map method states that

84
00:05:15,357 --> 00:05:20,054
map creates a *new* array populated with
the results of calling a provided

85
00:05:20,054 --> 00:05:24,090
function on every element
in the calling array.

86
00:05:24,090 --> 00:05:28,760
So what do you think happens if we log
our initial pets array to the console?

87
00:05:28,760 --> 00:05:38,100
Let's find out As you can see, nothing
has changed with our initial pets array.

88
00:05:38,100 --> 00:05:42,000
Map does not change an array but
instead creates a new one.

89
00:05:42,000 --> 00:05:44,112
If you've used the forEach() method before,

90
00:05:44,112 --> 00:05:48,310
you'll probably think that map is
pretty similar, if not identical.

91
00:05:48,310 --> 00:05:51,410
This is one of the differences
between the two methods.

92
00:05:51,410 --> 00:05:55,180
If you'd like to know a little bit more
about the differences between forEach() and

93
00:05:55,180 --> 00:05:57,287
map(), and
when is the best time to use either,

94
00:05:57,287 --> 00:06:00,890
I'll link a video down below
where I go over the differences.

95
00:06:00,890 --> 00:06:03,933
I hope you found this guide on using
the map() array method helpful and

96
00:06:03,933 --> 00:06:07,840
you can comfortably start to implement
this in your projects going forward.

97
00:06:07,840 --> 00:06:10,875
Remember to check out the teacher's
notes or description below for

98
00:06:10,875 --> 00:06:13,710
an associated blog article and
some helpful resources.

99
00:06:13,710 --> 00:06:14,830
I'll see you in the next one.

100
00:06:14,830 --> 00:06:17,080
And until then, have fun and happy coding.