Learn Array Map in 100 seconds (of JavaScript). ⚡

#JavaScript #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:26:30.107Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3985516b-a8de-436a-80c5-2ac15eaa675c
31c61b36a767ea4b9a93139fd9094c40a68fb7edc77988757c06bc54f2b6efc3
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
ArrayMap.
Create a new array by calling a function on every element in a different array.
Imagine we have an array of squares.
We can call a function on every single one of those squares using map to convert it to a new array of circles.
In other words, it's just a loop, where the goal of that loop is to create a new array.
In our code, let's start with an array of objects that contain some user data.
Our goal is to take this array of objects and convert it to an array of strings that only contain the usernames.
We could do this imperatively by creating a new empty array, then use a for loop to push each individual username to the new array.
Notice how we're using statements to change the app's state.
This is known as imperative programming.
Map on the other hand is declarative and describes how to create this new array using a function.
The new array is equal to the original array mapped to a function.
The function is passed as an argument to map, and it's called on every element in the original array.
Your function has access to the current element in the loop as well plus its index.
In the body of the function, your job is to compute a new value and then return it.
And we've now solved the same problem we did with the for loop, but with less code and without mutating the internal state.
If you're a React JS user, you'll often see map used to take some initial data and then map it to JSX for the actual UI.
Or maybe you need these usernames to do something asynchronously like fetch additional data from the database.
You could do that by mapping them all to an array Promises, then running them concurrently with Promise.
All.
One anti pattern to be aware of with map is that you should only use it if you plan on using the new array.
If you just need to run a loop, consider for each or a regular for loop instead.
This has been ArrayMap in 100 seconds.
Thanks for watching and I will see you in the next one.

Speaker 0: ArrayMap. Create a new array by calling a function on every element in a different array. Imagine we have an array of squares. We can call a function on every single one of those squares using map to convert it to a new array of circles. In other words, it's just a loop, where the goal of that loop is to create a new array.

In our code, let's start with an array of objects that contain some user data. Our goal is to take this array of objects and convert it to an array of strings that only contain the usernames. We could do this imperatively by creating a new empty array, then use a for loop to push each individual username to the new array. Notice how we're using statements to change the app's state. This is known as imperative programming.

Map on the other hand is declarative and describes how to create this new array using a function. The new array is equal to the original array mapped to a function. The function is passed as an argument to map, and it's called on every element in the original array. Your function has access to the current element in the loop as well plus its index. In the body of the function, your job is to compute a new value and then return it.

And we've now solved the same problem we did with the for loop, but with less code and without mutating the internal state. If you're a React JS user, you'll often see map used to take some initial data and then map it to JSX for the actual UI. Or maybe you need these usernames to do something asynchronously like fetch additional data from the database. You could do that by mapping them all to an array Promises, then running them concurrently with Promise. All.

One anti pattern to be aware of with map is that you should only use it if you plan on using the new array. If you just need to run a loop, consider for each or a regular for loop instead. This has been ArrayMap in 100 seconds. Thanks for watching and I will see you in the next one.
ArrayMap. Create a new array by calling a function on every element in a different array. Imagine we have an array of squares. We can call a function on every single one of those squares using map to convert it to a new array of circles.
In other words, it's just a loop, where the goal of that loop is to create a new array. In our code, let's start with an array of objects that contain some user data. Our goal is to take this array of objects and convert it to an array of strings that only contain the usernames.
programming
We could do this imperatively by creating a new empty array, then use a for loop to push each individual username to the new array.
Notice how we're using statements to change the app's state. This is known as imperative programming. Map on the other hand is declarative and describes how to create this new array using a function. The new array is equal to the original array mapped to a function. The function is passed as an argument to map, and it's called on every element in the original array.
programming
Your function has access to the current element in the loop as well plus its index. In the body of the function, your job is to compute a new value and then return it. And we've now solved the same problem we did with the for loop, but with less code and without mutating the internal state.
operations
programming
If you're a React JS user, you'll often see map used to take some initial data and then map it to JSX for the actual UI.
Or maybe you need these usernames to do something asynchronously like fetch additional data from the database. You could do that by mapping them all to an array Promises, then running them concurrently with Promise. All. One anti pattern to be aware of with map is that you should only use it if you plan on using the new array.
databases
If you just need to run a loop, consider for each or a regular for loop instead. This has been ArrayMap in 100 seconds. Thanks for watching and I will see you in the next one.
ArrayMap. Create a new array by calling a function on every element in a different array. Imagine we have an array of squares. We can call a function on every single one of those squares using map to convert it to a new array of circles. In other words, it's just a loop, where the goal of that loop is to create a new array. In our code, let's start with an array of objects that contain some user data. Our goal is to take this array of objects and convert it to an array of strings that only contain the usernames. We could do this imperatively by creating a new empty array, then use a for loop to push each individual username to the new array. Notice how we're using statements to change the app's state. This is known as imperative programming. Map on the other hand is declarative and describes how to create this new array using a function. The new array is equal to the original array mapped to a function. The function is passed as an argument to map, and it's called on every element in the original array. Your function has access to the current element in the loop as well plus its index. In the body of the function, your job is to compute a new value and then return it. And we've now solved the same problem we did with the for loop, but with less code and without mutating the internal state. If you're a React JS user, you'll often see map used to take some initial data and then map it to JSX for the actual UI. Or maybe you need these usernames to do something asynchronously like fetch additional data from the database. You could do that by mapping them all to an array Promises, then running them concurrently with Promise. All. One anti pattern to be aware of with map is that you should only use it if you plan on using the new array. If you just need to run a loop, consider for each or a regular for loop instead. This has been ArrayMap in 100 seconds. Thanks for watching and I will see you in the next one.
ArrayMap.
arraymap
Create
create
a
a
new
new
array
array
by
by
calling
calling
a
a
function
function
on
on
every
every
element
element
in
in
a
a
different
different
array.
array
Imagine
imagine
we
we
have
have
an
an
array
array
of
of
squares.
squares
We
we
can
can
call
call
a
a
function
function
on
on
every
every
single
single
one
one
of
of
those
those
squares
squares
using
using
map
map
to
to
convert
convert
it
it
to
to
a
a
new
new
array
array
of
of
circles.
circles
In
in
other
other
words,
words
it's
it's
just
just
a
a
loop,
loop
where
where
the
the
goal
goal
of
of
that
that
loop
loop
is
is
to
to
create
create
a
a
new
new
array.
array
In
in
our
our
code,
code
let's
let's
start
start
with
with
an
an
array
array
of
of
objects
objects
that
that
contain
contain
some
some
user
user
data.
data
Our
our
goal
goal
is
is
to
to
take
take
this
this
array
array
of
of
objects
objects
and
and
convert
convert
it
it
to
to
an
an
array
array
of
of
strings
strings
that
that
only
only
contain
contain
the
the
usernames.
usernames
We
we
could
could
do
do
this
this
imperatively
imperatively
by
by
creating
creating
a
a
new
new
empty
empty
array,
array
then
then
use
use
a
a
for
for
loop
loop
to
to
push
push
each
each
individual
individual
username
username
to
to
the
the
new
new
array.
array
Notice
notice
how
how
we're
we're
using
using
statements
statements
to
to
change
change
the
the
app's
app's
state.
state
This
this
is
is
known
known
as
as
imperative
imperative
programming.
programming
Map
map
on
on
the
the
other
other
hand
hand
is
is
declarative
declarative
and
and
describes
describes
how
how
to
to
create
create
this
this
new
new
array
array
using
using
a
a
function.
function
The
the
new
new
array
array
is
is
equal
equal
to
to
the
the
original
original
array
array
mapped
mapped
to
to
a
a
function.
function
The
the
function
function
is
is
passed
passed
as
as
an
an
argument
argument
to
to
map,
map
and
and
it's
it's
called
called
on
on
every
every
element
element
in
in
the
the
original
original
array.
array
Your
your
function
function
has
has
access
access
to
to
the
the
current
current
element
element
in
in
the
the
loop
loop
as
as
well
well
plus
plus
its
its
index.
index
In
in
the
the
body
body
of
of
the
the
function,
function
your
your
job
job
is
is
to
to
compute
compute
a
a
new
new
value
value
and
and
then
then
return
return
it.
it
And
and
we've
we've
now
now
solved
solved
the
the
same
same
problem
problem
we
we
did
did
with
with
the
the
for
for
loop,
loop
but
but
with
with
less
less
code
code
and
and
without
without
mutating
mutating
the
the
internal
internal
state.
state
If
if
you're
you're
a
a
React
react
JS
js
user,
user
you'll
you'll
often
often
see
see
map
map
used
used
to
to
take
take
some
some
initial
initial
data
data
and
and
then
then
map
map
it
it
to
to
JSX
jsx
for
for
the
the
actual
actual
UI.
ui
Or
or
maybe
maybe
you
you
need
need
these
these
usernames
usernames
to
to
do
do
something
something
asynchronously
asynchronously
like
like
fetch
fetch
additional
additional
data
data
from
from
the
the
database.
database
You
you
could
could
do
do
that
that
by
by
mapping
mapping
them
them
all
all
to
to
an
an
array
array
Promises,
promises
then
then
running
running
them
them
concurrently
concurrently
with
with
Promise.
promise
All.
all
One
one
anti
anti
pattern
pattern
to
to
be
be
aware
aware
of
of
with
with
map
map
is
is
that
that
you
you
should
should
only
only
use
use
it
it
if
if
you
you
plan
plan
on
on
using
using
the
the
new
new
array.
array
If
if
you
you
just
just
need
need
to
to
run
run
a
a
loop,
loop
consider
consider
for
for
each
each
or
or
a
a
regular
regular
for
for
loop
loop
instead.
instead
This
this
has
has
been
been
ArrayMap
arraymap
in
in
100
100
seconds.
seconds
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to create a new array by calling a function on every element in a different array. They also discuss the use of map in creating a new empty array and how to use it for a function. The speaker provides instructions on how to create the new array and mentions a pre-existing pattern for map use.
Array Map in 100 Seconds
ArrayMap. Create a new array by calling a function on every element in a different array. Imagine we have an array of squares. We can call a function on every single one of those squares using map to convert it to a new array of circles. In other words, it's just a loop, where the goal of that loop is to create a new array. In our code, let's start with an array of objects that contain some user data. Our goal is to take this array of objects and convert it to an array of strings that only contain the usernames. We could do this imperatively by creating a new empty array, then use a for loop to push each individual username to the new array. Notice how we're using statements to change the app's state. This is known as imperative programming. Map on the other hand is declarative and describes how to create this new array using a function. The new array is equal to the original array mapped to a function. The function is passed as an argument to map, and it's called on every element in the original array. Your function has access to the current element in the loop as well plus its index. In the body of the function, your job is to compute a new value and then return it. And we've now solved the same problem we did with the for loop, but with less code and without mutating the internal state. If you're a React JS user, you'll often see map used to take some initial data and then map it to JSX for the actual UI. Or maybe you need these usernames to do something asynchronously like fetch additional data from the database. You could do that by mapping them all to an array Promises, then running them concurrently with Promise. All. One anti pattern to be aware of with map is that you should only use it if you plan on using the new array. If you just need to run a loop, consider for each or a regular for loop instead. This has been ArrayMap in 100 seconds. Thanks for watching and I will see you in the next one.
The speaker explains how to create a new array by calling a function on every element in a different array. They also discuss the use of map in creating a new empty array and how to use it for a function. The speaker provides instructions on how to create the new array and mentions a pre-existing pattern for map use.