1
00:00:00,356 --> 00:00:09,239
[MUSIC]

2
00:00:09,239 --> 00:00:10,102
Hey, what's up?

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

4
00:00:12,318 --> 00:00:16,251
Today, I wanna go over the subtle
difference between a couple of JavaScript

5
00:00:16,251 --> 00:00:17,115
array methods.

6
00:00:17,115 --> 00:00:19,736
Those methods are forEach() and map().

7
00:00:19,736 --> 00:00:21,905
If you've never worked
with these methods before,

8
00:00:21,905 --> 00:00:25,173
you might wanna check out the guides that
I've created for each of them first.

9
00:00:25,173 --> 00:00:27,431
I'll link those down below
in the teacher's notes or

10
00:00:27,431 --> 00:00:28,643
description of this video.

11
00:00:28,643 --> 00:00:30,976
But if you are familiar
with these already, and

12
00:00:30,976 --> 00:00:34,184
you'd like to understand their
differences and how to use them,

13
00:00:34,184 --> 00:00:36,832
let's hop into our text editors and
write some code.

14
00:00:36,832 --> 00:00:39,849
First, I'll set up an app.js file.

15
00:00:39,849 --> 00:00:42,277
I'll use Node to run my app.js file.

16
00:00:42,277 --> 00:00:46,408
But if you're not familiar with Node or
don't have it installed,

17
00:00:46,408 --> 00:00:51,371
you can include an index.html file and
then just link in your JavaScript file.

18
00:00:51,371 --> 00:00:55,896
Then open up your HTML file in
the browser and open up the console.

19
00:00:55,896 --> 00:01:00,465
The first thing I'll do inside of my
app.js is just set up a basic array.

20
00:01:00,465 --> 00:01:05,071
I'll create an array and call it
studentNames, and I'll add a few strings.

21
00:01:05,071 --> 00:01:08,264
We can add in ['John', 'Kate', 'Sam']

22
00:01:08,264 --> 00:01:11,579
Next, I wanna loop over each
of these array elements and

23
00:01:11,579 --> 00:01:14,552
log them to the console
in all lowercase letters.

24
00:01:14,552 --> 00:01:17,560
So let's use the forEach()
method to do this.

25
00:01:17,560 --> 00:01:20,561
All right, studentNames.forEach()

26
00:01:20,561 --> 00:01:24,253
And I'll set our element
parameter to name, and

27
00:01:24,253 --> 00:01:29,217
in the callback,
I'll just console.log(name.toLowerCase())

28
00:01:29,217 --> 00:01:31,710
Let's check out what we
get back in the console.

29
00:01:31,710 --> 00:01:36,042
In my terminal, I'll run node app.js.

30
00:01:36,042 --> 00:01:39,903
As you can see, we get back all
of our array items in lowercase.

31
00:01:39,903 --> 00:01:42,012
This is exactly what we wanted.

32
00:01:42,012 --> 00:01:46,754
Now, how would we do the exact
same thing but using map() instead?

33
00:01:46,754 --> 00:01:47,486
It's pretty easy.

34
00:01:47,486 --> 00:01:50,537
You just replace forEach() with map()

35
00:01:50,537 --> 00:01:56,543
I'll save my app.js file, and then clear
my console and run node app.js again.

36
00:01:56,543 --> 00:01:59,590
And look at that, we get the exact
same thing in the console.

37
00:01:59,590 --> 00:02:03,877
So what exactly is the difference
between these two methods?

38
00:02:03,877 --> 00:02:06,823
Let's switch up the structure
of our code just a bit so

39
00:02:06,823 --> 00:02:09,125
that we can see how these methods differ.

40
00:02:09,125 --> 00:02:13,068
I'll comment out what we've written
before and I'll write console.log()

41
00:02:13,068 --> 00:02:17,724
And inside of this console.log,
we'll take our studentNames array and

42
00:02:17,724 --> 00:02:19,608
run the forEach() method on it.

43
00:02:19,608 --> 00:02:23,465
We'll take our name element and
just convert it to lowercase,

44
00:02:23,465 --> 00:02:24,859
just as we did before.

45
00:02:24,859 --> 00:02:31,638
I'll hit save and then clear out my
console and run node app.js again.

46
00:02:31,638 --> 00:02:34,622
But this time,
the console returns "undefined".

47
00:02:34,622 --> 00:02:38,769
So it would probably do the same
thing if we used map() instead, right?

48
00:02:38,769 --> 00:02:40,167
Let's find out.

49
00:02:40,167 --> 00:02:43,703
I'll clear out my console and
run node app.js again.

50
00:02:43,703 --> 00:02:46,377
This time, we're returned with
our array of studentNames.

51
00:02:46,377 --> 00:02:47,795
Why is this?

52
00:02:47,795 --> 00:02:52,980
Well, this is because map() returns a new
array without altering our initial array,

53
00:02:52,980 --> 00:02:55,733
while forEach() doesn't return a new array.

54
00:02:55,733 --> 00:02:59,586
This is actually the key difference
between the two methods.

55
00:02:59,586 --> 00:03:03,648
Let's erase some of the code that we've
written and set up a new variable.

56
00:03:03,648 --> 00:03:05,895
We can call this variable "names".

57
00:03:05,895 --> 00:03:10,167
And we'll set this equal
to studentNames.forEach()

58
00:03:10,167 --> 00:03:15,395
And we'll again take in the name and
convert it to all lowercase letters.

59
00:03:15,395 --> 00:03:20,005
Now if we console.log this names variable,
we should get undefined

60
00:03:20,005 --> 00:03:23,989
in the console because forEach
will not return a new array.

61
00:03:23,989 --> 00:03:29,883
I'll hit save and clear out my terminal,
and then I'll just run node app.js again.

62
00:03:29,883 --> 00:03:32,815
And undefined is shown in the console.

63
00:03:32,815 --> 00:03:35,358
But if we change our method to map(),

64
00:03:35,358 --> 00:03:39,854
we'll get an array back as our value for
our names variable.

65
00:03:39,854 --> 00:03:45,099
Sweet, our names variable now holds
our new array of all lowercase names.

66
00:03:45,099 --> 00:03:49,505
If we hop back into the code and
console.log our student names array,

67
00:03:49,505 --> 00:03:54,284
you'll notice that it still has the same
values that we originally gave it,

68
00:03:54,284 --> 00:03:55,490
it's untouched.

69
00:03:55,490 --> 00:03:59,718
map() will not alter an array but
instead just return a new one.

70
00:03:59,718 --> 00:04:02,940
I hope this quick run through of
these two methods was helpful and

71
00:04:02,940 --> 00:04:05,036
you can see the difference between them.

72
00:04:05,036 --> 00:04:09,256
They definitely both have their use cases,
and now you should understand when and

73
00:04:09,256 --> 00:04:10,794
how to use them effectively.

74
00:04:10,794 --> 00:04:14,868
I'll see you in the next one, and
until then, have fun and happy coding.