Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Use the map method to transform elements in an array.
Snippets from the Video
const strings = ['1','2','3','4','5'];
const fruits = ['apple', 'pear', 'cherry'];
let capitalizedFruits = [];
fruits.forEach(fruit => {
let capitalizedFruit = fruit.toUpperCase();
capitalizedFruits.push(capitalizedFruit);
});
console.log(capitalizedFruits);
const prices = [5, 4.23, 6.4, 8.09, 3.20];
// Result: [ '$5.00', '$4.23', '$6.40', '$8.09', '$3.20' ]
MDN Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You can use map to transform each
item in an array into something else.
0:00
Like filter, map returns a new array
leaving the original array unchanged.
0:04
However unlike filter it returns a new
array with the same number of array
0:10
elements.
0:14
Say for example that you have an array
of words you want to pluralize.
0:15
Or you could use map to go
through an array of temperatures,
0:20
changing them from Celsius to Fahrenheit.
0:23
Perhaps you have an array
of prices as numbers and
0:25
you want to turn them into strings and
put a dollar sign on the front of them.
0:28
Map can do this for you too.
0:32
To transform an array's items with map,
0:35
you use a callback function
to return the data you want.
0:38
Let me show you what I mean.
0:42
I've removed the code from the last video,
and
0:44
I have an array of numbers
that are stored as strings.
0:46
Let's create an array of numbers from
these strings using the map method.
0:49
First, I'll create a variable
to hold the new array.
0:54
I'll call it numbers,
then I'll call map on the string's array.
0:59
I'll pass in a callback function to
map using a parameter named string
1:07
that will contain each array item.
1:12
The call back will return
a number to replace the string.
1:16
To get a number from a string,
I can use the parseInt
1:20
function, Passing in a string.
1:23
Now each string value will be
transformed to a number and
1:30
returned from the call back
creating an array of numbers.
1:34
parseInt takes a second argument,
called a ratex.
1:38
I'm going to pass the ratex value 10,
which just means I want the number to be
1:42
in base 10,
the way we normally think of numbers.
1:47
You can use different values for
different kinds of numbers, like binary or
1:51
octal numbers.
1:55
I've included some information in
the teacher's notes if you want to
1:56
do further research.
1:59
Just remember, when you use parseInt,
pass a number for
2:01
the second argument, usually 10,
to get predictable behavior.
2:04
I'll log numbers out to the console.
2:09
And it has to equal strings.
2:17
And I'll save and run the file.
2:20
It works.
2:21
Now I'll give you a challenge.
2:30
In the section covering
the forEach method,
2:32
I used an example that capitalized
all the words within an array.
2:34
This is really what map does,
transforms one array item into another.
2:39
Let's change this code to use map.
2:44
Delete this code here and
2:48
copy the snippet from the teacher's
notes below into your work space.
2:49
Your challenge,
2:54
should you choose to accept it, is to
refactor this code using the map method.
2:54
Refactoring means changing how code is
written without changing what it does.
3:00
When you are done refactoring,
3:05
your code will often look very
different from when it began.
3:06
But the program does the exact same thing.
3:09
Go ahead and give it a try.
3:12
Pause the video and see if you can
capitalize the strings in the fruits array
3:14
using map instead of forEach.
3:19
The first thing I'm going to
do is change forEach to map.
3:23
The map method will out put a new array,
so
3:30
I can set the capitalized fruits
variable to equal map's output.
3:32
And I'll change it to const,
since it won't changed after it's set.
3:39
Inside the callback function,
we're creating a capitalized
3:46
version of each string from fruits and
pushing it into a new array.
3:50
We just want to return the new string and
3:54
the variable capitalized fruit from the
callback, so I'll erase this lower line.
3:56
We really don't need to create
a capitalized fruit variable either.
4:03
I'll just return fruit to uppercase.
4:07
I'll save this and run it in the console.
4:17
And it works.
4:24
We've successfully refactored our code.
4:26
Now I'll give you another challenge.
4:29
I'll erase this code and
enter an array of numbers.
4:33
Check the teacher's notes for
the code snippet.
4:41
Your challenge is to us map to turn
this list of numbers into price strings
4:44
with two digits and
a dollar sign at the beginning.
4:49
I am using dollar signs, but feel free to
use any currency symbol you'd like to.
4:53
I've put a link in the teacher's
notes to the MDN page for
4:58
JavaScript's Number object.
5:01
There you can find the methods
you can use on numbers.
5:04
Go ahead and pause the video and
see if you can complete the challenge.
5:07
The first thing I'll do is create
a new variable, displayPrices.
5:14
And set it to the output of price.map.
5:25
I'll go ahead and
log displayPrices to the console as well.
5:30
Now I'll need to take each number and
5:40
turn it into a string with
a dollar sign at the beginning.
5:42
I could do that like this.
5:47
This would work because the plus
operator will force this
5:57
number to become a string and then
concatenate these two strings together.
6:00
But I'm going to use
a template literal for
6:06
this and
interpolate the number into the string.
6:08
Notice the double dollar sign here.
6:22
The first dollar sign is a literal dollar
sign that will show up in the string
6:25
we're creating.
6:29
The second one is a marker JavaScript uses
6:31
along with the curly braces to know
this price should be interpolated.
6:34
Now we're going to get an array
of currency strings, but
6:40
they won't necessarily
display two decimal places.
6:43
We can take care of that with a toFixed
method on JavaScripts number object.
6:47
I'll call toFixed on price, And
6:52
pass in (2) for two decimal places.
6:57
I'll save this and
run iteration.js in the console.
7:02
And let's see what's wrong.
7:08
So it says price is not defined.
7:11
I need to put an s there.
7:14
I'll go ahead and clear,
And run, and it works.
7:19
Here's the array of display prices.
7:26
Let's go ahead and
assign this function to a variable so
7:28
we can reuse it else
where if we wanted too.
7:31
Cut it out here.
7:36
And I'll name it priceToDollars,
7:42
And then I'll pass it into map.
7:52
Now we could use this function anywhere we
want to to turn a number into a currency
7:59
string.
8:04
The next step will give you
a little more practice with map.
8:05
Then in the next video we'll dive
into the reduce array method.
8:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up