Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Array Iteration Methods!
You have completed JavaScript Array Iteration Methods!
Preview
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