1
00:00:00,428 --> 00:00:04,880
You can use map to transform each
item in an array into something else.

2
00:00:04,880 --> 00:00:10,200
Like filter, map returns a new array
leaving the original array unchanged.

3
00:00:10,200 --> 00:00:14,330
However unlike filter it returns a new
array with the same number of array

4
00:00:14,330 --> 00:00:15,700
elements.

5
00:00:15,700 --> 00:00:20,330
Say for example that you have an array
of words you want to pluralize.

6
00:00:20,330 --> 00:00:23,340
Or you could use map to go
through an array of temperatures,

7
00:00:23,340 --> 00:00:25,940
changing them from Celsius to Fahrenheit.

8
00:00:25,940 --> 00:00:28,490
Perhaps you have an array
of prices as numbers and

9
00:00:28,490 --> 00:00:32,640
you want to turn them into strings and
put a dollar sign on the front of them.

10
00:00:32,640 --> 00:00:34,020
Map can do this for you too.

11
00:00:35,406 --> 00:00:38,670
To transform an array's items with map,

12
00:00:38,670 --> 00:00:42,450
you use a callback function
to return the data you want.

13
00:00:42,450 --> 00:00:44,170
Let me show you what I mean.

14
00:00:44,170 --> 00:00:46,240
I've removed the code from the last video,
and

15
00:00:46,240 --> 00:00:49,880
I have an array of numbers
that are stored as strings.

16
00:00:49,880 --> 00:00:54,430
Let's create an array of numbers from
these strings using the map method.

17
00:00:54,430 --> 00:00:57,310
First, I'll create a variable
to hold the new array.

18
00:00:59,040 --> 00:01:04,050
I'll call it numbers,
then I'll call map on the string's array.

19
00:01:07,720 --> 00:01:12,652
I'll pass in a callback function to
map using a parameter named string

20
00:01:12,652 --> 00:01:15,170
that will contain each array item.

21
00:01:16,880 --> 00:01:20,650
The call back will return
a number to replace the string.

22
00:01:20,650 --> 00:01:23,890
To get a number from a string,
I can use the parseInt

23
00:01:23,890 --> 00:01:29,060
function, Passing in a string.

24
00:01:30,900 --> 00:01:34,465
Now each string value will be
transformed to a number and

25
00:01:34,465 --> 00:01:38,530
returned from the call back
creating an array of numbers.

26
00:01:38,530 --> 00:01:41,600
parseInt takes a second argument,
called a ratex.

27
00:01:42,600 --> 00:01:47,700
I'm going to pass the ratex value 10,
which just means I want the number to be

28
00:01:47,700 --> 00:01:51,410
in base 10,
the way we normally think of numbers.

29
00:01:51,410 --> 00:01:55,080
You can use different values for
different kinds of numbers, like binary or

30
00:01:55,080 --> 00:01:56,470
octal numbers.

31
00:01:56,470 --> 00:01:59,390
I've included some information in
the teacher's notes if you want to

32
00:01:59,390 --> 00:02:01,390
do further research.

33
00:02:01,390 --> 00:02:04,560
Just remember, when you use parseInt,
pass a number for

34
00:02:04,560 --> 00:02:09,180
the second argument, usually 10,
to get predictable behavior.

35
00:02:09,180 --> 00:02:11,160
I'll log numbers out to the console.

36
00:02:17,170 --> 00:02:19,540
And it has to equal strings.

37
00:02:20,660 --> 00:02:21,908
And I'll save and run the file.

38
00:02:21,908 --> 00:02:30,210
It works.

39
00:02:30,210 --> 00:02:32,320
Now I'll give you a challenge.

40
00:02:32,320 --> 00:02:34,990
In the section covering
the forEach method,

41
00:02:34,990 --> 00:02:39,690
I used an example that capitalized
all the words within an array.

42
00:02:39,690 --> 00:02:44,850
This is really what map does,
transforms one array item into another.

43
00:02:44,850 --> 00:02:46,950
Let's change this code to use map.

44
00:02:48,060 --> 00:02:49,520
Delete this code here and

45
00:02:49,520 --> 00:02:54,070
copy the snippet from the teacher's
notes below into your work space.

46
00:02:54,070 --> 00:02:54,990
Your challenge,

47
00:02:54,990 --> 00:03:00,140
should you choose to accept it, is to
refactor this code using the map method.

48
00:03:00,140 --> 00:03:05,030
Refactoring means changing how code is
written without changing what it does.

49
00:03:05,030 --> 00:03:06,558
When you are done refactoring,

50
00:03:06,558 --> 00:03:09,760
your code will often look very
different from when it began.

51
00:03:09,760 --> 00:03:12,860
But the program does the exact same thing.

52
00:03:12,860 --> 00:03:14,750
Go ahead and give it a try.

53
00:03:14,750 --> 00:03:19,370
Pause the video and see if you can
capitalize the strings in the fruits array

54
00:03:19,370 --> 00:03:22,178
using map instead of forEach.

55
00:03:23,663 --> 00:03:27,270
The first thing I'm going to
do is change forEach to map.

56
00:03:30,170 --> 00:03:32,980
The map method will out put a new array,
so

57
00:03:32,980 --> 00:03:36,960
I can set the capitalized fruits
variable to equal map's output.

58
00:03:39,630 --> 00:03:44,480
And I'll change it to const,
since it won't changed after it's set.

59
00:03:46,620 --> 00:03:50,130
Inside the callback function,
we're creating a capitalized

60
00:03:50,130 --> 00:03:54,900
version of each string from fruits and
pushing it into a new array.

61
00:03:54,900 --> 00:03:56,900
We just want to return the new string and

62
00:03:56,900 --> 00:04:01,720
the variable capitalized fruit from the
callback, so I'll erase this lower line.

63
00:04:03,470 --> 00:04:07,930
We really don't need to create
a capitalized fruit variable either.

64
00:04:07,930 --> 00:04:10,362
I'll just return fruit to uppercase.

65
00:04:17,550 --> 00:04:21,230
I'll save this and run it in the console.

66
00:04:24,310 --> 00:04:25,020
And it works.

67
00:04:26,320 --> 00:04:28,650
We've successfully refactored our code.

68
00:04:29,730 --> 00:04:31,550
Now I'll give you another challenge.

69
00:04:33,800 --> 00:04:41,060
I'll erase this code and
enter an array of numbers.

70
00:04:41,060 --> 00:04:44,270
Check the teacher's notes for
the code snippet.

71
00:04:44,270 --> 00:04:49,480
Your challenge is to us map to turn
this list of numbers into price strings

72
00:04:49,480 --> 00:04:53,030
with two digits and
a dollar sign at the beginning.

73
00:04:53,030 --> 00:04:58,490
I am using dollar signs, but feel free to
use any currency symbol you'd like to.

74
00:04:58,490 --> 00:05:01,870
I've put a link in the teacher's
notes to the MDN page for

75
00:05:01,870 --> 00:05:04,240
JavaScript's Number object.

76
00:05:04,240 --> 00:05:07,590
There you can find the methods
you can use on numbers.

77
00:05:07,590 --> 00:05:10,990
Go ahead and pause the video and
see if you can complete the challenge.

78
00:05:14,165 --> 00:05:19,360
The first thing I'll do is create
a new variable, displayPrices.

79
00:05:25,050 --> 00:05:28,813
And set it to the output of price.map.

80
00:05:30,740 --> 00:05:34,530
I'll go ahead and
log displayPrices to the console as well.

81
00:05:40,570 --> 00:05:42,745
Now I'll need to take each number and

82
00:05:42,745 --> 00:05:47,030
turn it into a string with
a dollar sign at the beginning.

83
00:05:47,030 --> 00:05:48,580
I could do that like this.

84
00:05:57,120 --> 00:06:00,746
This would work because the plus
operator will force this

85
00:06:00,746 --> 00:06:06,390
number to become a string and then
concatenate these two strings together.

86
00:06:06,390 --> 00:06:08,540
But I'm going to use
a template literal for

87
00:06:08,540 --> 00:06:11,330
this and
interpolate the number into the string.

88
00:06:22,583 --> 00:06:25,230
Notice the double dollar sign here.

89
00:06:25,230 --> 00:06:29,230
The first dollar sign is a literal dollar
sign that will show up in the string

90
00:06:29,230 --> 00:06:30,020
we're creating.

91
00:06:31,090 --> 00:06:34,850
The second one is a marker JavaScript uses

92
00:06:34,850 --> 00:06:38,900
along with the curly braces to know
this price should be interpolated.

93
00:06:40,670 --> 00:06:43,510
Now we're going to get an array
of currency strings, but

94
00:06:43,510 --> 00:06:47,320
they won't necessarily
display two decimal places.

95
00:06:47,320 --> 00:06:52,940
We can take care of that with a two fix
method on JavaScripts number object.

96
00:06:52,940 --> 00:06:57,138
I'll call twoFixed on price, And

97
00:06:57,138 --> 00:07:01,360
pass in (2) for two decimal places.

98
00:07:02,420 --> 00:07:06,360
I'll save this and
run iteration.js in the console.

99
00:07:08,820 --> 00:07:11,650
And let's see what's wrong.

100
00:07:11,650 --> 00:07:14,380
So it says price is not defined.

101
00:07:14,380 --> 00:07:17,190
I need to put an s there.

102
00:07:19,660 --> 00:07:26,330
I'll go ahead and clear,
And run, and it works.

103
00:07:26,330 --> 00:07:28,710
Here's the array of display prices.

104
00:07:28,710 --> 00:07:31,700
Let's go ahead and
assign this function to a variable so

105
00:07:31,700 --> 00:07:34,050
we can reuse it else
where if we wanted too.

106
00:07:36,270 --> 00:07:37,000
Cut it out here.

107
00:07:42,959 --> 00:07:48,029
And I'll name it priceToDollars,

108
00:07:52,100 --> 00:07:55,340
And then I'll pass it into map.

109
00:07:59,600 --> 00:08:04,321
Now we could use this function anywhere we
want to to turn a number into a currency

110
00:08:04,321 --> 00:08:05,650
string.

111
00:08:05,650 --> 00:08:09,120
The next step will give you
a little more practice with map.

112
00:08:09,120 --> 00:08:12,900
Then in the next video we'll dive
into the reduce array method.