Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
The JavaScript map() array method is a powerful and widely used tool for transforming each element of an array into a new value, returning a new array of the transformed elements without altering the original array.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
what's up everybody and welcome to
another javascript nuggets video
where we cover interesting javascript
topics in great detail
and in this video we'll cover arguably
the most
used and popular array method by the
name of map
what makes map so special is the fact that
that
as we're iterating over the original
array essentially we can return
whatever we would want which just means
that when it comes to
iterating over our data and displaying it
it
in the browser in a nice way map is
a perfect tool for the job and once
we've got a general housekeeping out of
the way
now let's focus on the map method and essentially
essentially
we need to understand that always always
map returns a
new array even if it's just an empty array
array
then it does not change the size of the
original array
unlike the filter method and it always
uses the
values from the original array when
making a new one however if you don't
want to
and you'll see that in our examples you
don't have to use those values
but you always have access to them so in
my example i have a
general people array and in that array i
have three objects
i have bob and susie and all of them
have age
as well as position property so here's
what i would want to do
i would want to iterate over my people
array and just grab the age so that's
going to be our first example
so how do we need to do that well we
first need to create some kind of
variable so we're going to go to const
and i'll call this ages and that is
equal to
a people then i'm mapping over
and then within the map we pass in the
copa function
now this can be good old function with a
function keyword
so you can write something like this
over here
this can be a arrow function which is
going to be in our case
so that's why we'll write away right
here a arrow function
and also we can set up a reference
so don't worry once we set up the first
example i'll show you the
other two options as well so here i have my
my
array method and then if i don't return
anything you'll see that i have a new array
array
with three items and the values will be undefined
undefined
so first of all let me show you that
that is the case so i'll go with
ages and you'll notice that i have undefined
undefined
undefined undefined so first why do i
have three items
because that is my original array so
when map construct that new array
it will always depend on this one on the
original array so for example
if i add one more item and for example
call this person i don't know john
and i'm say that the age is
26 and he is an intern
you'll see that now i have four
undefineds so again
the new array will always depend on the
original one
now why am i getting undefined back well
because i'm not returning anything from
the function
from my callback function and we already
know that by default in javascript
the function will return undefined so if
i have 200 items i'm going to have 200 undefined
undefined
if i'm going to have three items four
items then of course i'll have
three or four items all right that's a
good start
now what well now i want to show you
that in the callback function
as a parameter we can access each and
every item
because we need to keep in mind that of
course we're iterating
over this array now since it is a
parameter we can call it whatever we want
want
so this can be an item this can be a orange
orange
this can be a person whatever you'd want
so in this case probably
it would just make a little bit more
sense if i
set it up as a person but i don't have
to now
in the function body now i want to show
you that
still yeah we can access this item but
we can return whatever we would want
so first i'm going to go with log and
then i'm going to show you that of
course we're accessing each and every person
person
notice so i have the object so
since the items are objects then as i'm
iterating i'm accessing that object
but if i would want to i can just simply
return a hello world
and you'll also see that yeah i still
have my array of four items
but the values are the strings that i'm returning
returning
the hello world so you can always access
this data but you can return whatever
you'd want
and of course a little bit later i'll
show you a little bit more meaningful example
example
where we display something in a browser
so we'll wrap our data
in the html all right i'm accessing the person
person
and in this case i can do multiple
things i can destructure it
if i already know how to do that so i
can destruction for example
age or position or name or whatever i
would want
or we can simply return it so in my case
i'm going to get rid of that
console log and i'm going to say that
i'm returning
from my callback function a person
and then since it is a object i can
simply say age
and now you'll see that in the ages i
have 20 25
30 and 26. why do i have those values because
because
those represent the values for the property
property
that i'm accessing and if i would want
to make it more interesting
of course i can massage this data as
well where i can say yeah
get me the person that age and then i
can multiply this by two now of course
my value is right away changed
because this is what i'm doing in my
callback function so whatever i'm
returning from the callback function
will be a value in my new array
now before i take a look at a little bit
more complicated example
where we set up a object let me just
quickly dimension
that of course since i'm using the arrow function
function
i could just simply set up a one-liner
where i'm getting rid of the curly braces
braces
here and then i'll just say that yeah i
would like to
return person and then age multiplied by two
two
so of course that is always an option
just keep in mind that if you have more functionality
functionality
in the function body you'll still always
need to use the curl braces
and let me also show you that you can
use the reference so for example
if i'm going to say get ages so that is
my function and again this could be a regular
regular
function and this can be a arrow function
function
and for example i'm going to have the
same logic where i'm going to say person
that age
i'm returning and then in here i'm going
to access the person so in that age
i'm going to be accessing the person so
if i'll pass
in get ages functionality won't change
so if i'll say get ages still i get the
same values
so always keep in mind that of course
you can pass it here
directly or you can set up a function
and then just reference the function and
i can do that with an arrow function
or i can use the good old regular
function with the function keyword
and now once we understand the basics
now we can
massage the data now let's take a look
at a little bit more complicated example
where essentially i would still want to
iterate over data
but i would want to return objects so
instead of just accessing one single
value i'm going to construct
the object how's that going to look like
well i'm going to say
cons new people and that is going to be
equal to
a people and then that map so
still the same thing again i'm going to
set up my callback function we already
know that
i can access each and every item as a parameter
parameter
so in this case just to change it around
i'm going to call this item
and then since i can return whatever i
would want from my callback function
i'm going to return a object and here
i'm going to say that the object has two properties
properties
so first a name and that is equal to a
person that name since that is the
property of course
in my item but of course since i named
it differently
it's not a person anymore it is now a
item so i'm going to go with item.name
and then i'm looking forward to
uppercase just to showcase that of course
course
we can massage our data how we want and
now of course i would want to set up
one more property where i'm going to say
old age
whatever you'd want as a name for a
property and that is going to be equal
to a item
that age and then plus 20. just to spice
things up
and now of course if i'm going to go
with console.log and if i'm going to say
new people new people you'll see
that i have this new array with these objects
objects
so whatever i decided here in my
callback function
i'm getting back which is of course very
very cool
and the last thing that i want to
showcase is
how we can wrap our data in the html
and essentially that why map is so used
because you can grab your data you can
wrap it in the html
or in react case in jsx
and you can nicely display the data
so how is that going to look like well
i'm just going to iterate
over people and i'm going to grab a name
and once i've got the name in the index.html
index.html
i have the div with an idea result so
i'm going to select that result and then
i'll place it as a
in our html my new array so let's try
that out
so in the app.js i'm going to scroll
down and
right after the new people i'm going to go
go
with variable names and that is going to
be equal to my people array
so i'm iterating over i'm using map in
this case i'll right away just use
a one-liner where i'm going to say that
yeah i would like to access the person
but what i would want to return is the
heading 1.
now i'll wrap this in a template string
so i'm going to say over here
that i'm returning instead of a simple string
string
i'm returning a heading one so or you're not
not
let's go with adding two i think that's
going to be a little bit smaller
so i have my heading two and now i would
want to access that value
the name property so i'm gonna go with person
person
dot name but instead of simply console
logging which of course
we can do what i would want to do is
grab the result so let's target our
result div and of course we can do that
by using document get element by d or
query selector
so let's go with result and that is
equal to a
document then query selector
now i'm looking for my result so that of course
course
has the id of result so let's go over
here result
and now let's set up the inner html
so result and then inner html
is equal to name and by the way not
i think i wanted to call this names so
this is going to be equal to
a names array and you'll notice that
right now i'm displaying heading twos
with these values
now there's one housekeeping thing that
we need to do notice how we're
getting these commas and that is of
course because we're just returning a
whole array so why don't we collect it together
together
in one giant string and we can do that
by using a join method
and then we'll pass in the empty string
and that just means that our separator
will be
empty string and there it is now of
course i can see
all my names and essentially that's why
it is
so powerful in the react world and also
in the javascript
applications vanilla javascript
applications because you can take your data
data
and you can massage it however we would
want including
wrapping it in the html or
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
