Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 8 / 12Arrays and map
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Arrays and map
01 / 10Overview

Arrays and map

You'll learn to read and use map to transform a list.

Why it mattersIn React, almost every list on screen is made with map.
about 90 min·needs: Arrays, Functions in, values out
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Video
Modern JavaScript in Bangla #12: array map()YouTube · Learn with Sumit · 3 min · Bangla
MMamun's noteIn Bangla, about three minutes. A short, focused look at map. Watch all of it.
Article
Array methods: transform an arrayjavascript.info · 15 min · English
MMamun's noteRead the map section, then stop before sort.
DocsOptional
Array.prototype.map()MDN Web Docs · reference · English
MMamun's noteKeep it open as a reference. You do not need to read it all.
ToolOptional
Python Tutor, JavaScript modepythontutor.com · visualiser · English
MMamun's notePaste the code from the visual below and step through it yourself.
03 / 10

See it step by step

Watch map turn each item into a new one.

nums
123
double.js
1const nums = [1, 2, 3];
2const doubled = nums.map(n => n * 2);
3console.log(doubled);
nums holds three numbers. map has not started yet.
Step 1 / 6
04 / 10

Explanation

An array is a list of values in order. Very often you want a new list where every item has been changed in the same way: prices with tax added, names in capitals, users turned into labels on a screen.

map does exactly that. You give it a function, called a callback. map runs that function once for each item, in order, and collects what the function returns into a brand new array.

Two things are always true. The new array has the same length as the old one, and the old array is not changed. When you read list.map(x => …), ask yourself: what does one item become?

Words to recognise
arraymapcallback=>returnnew array
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const users = getUsers();
Mentor note · line 1
users is an array of objects. In a real app it would come from an API.
2// [{ name: "Rafi", year: 2 }, { name: "Nusrat", year: 3 }]
3
const names = users.map(user => user.name);
5// ["Rafi", "Nusrat"]
6
const labels = users.map(user => {
return user.name + " (year " + user.year + ")";
9});
10
console.log(names.length === users.length);
12// true: map always keeps the length
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const words = ["hi", "yo"];
2console.log(words.map(w => w.length));
What does this print?
DrillFind the bug2 / 2
doubleAll should return a new array with every number doubled. Fix the code so all three checks pass.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does map give back?
  2. 2 / 3What is [10, 20].map(x => x / 10)?
  3. 3 / 3In nums.map(n => n + 1), which part is the callback?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Arrays and map?

10 / 10

Done

You can now
Read any map call in React code.
Next: filter and find Back to Phase 2
On this page
  1. 01Arrays and map
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Arrays and map
01 / 10Overview

Arrays and map

You'll learn to read and use map to transform a list.

Why it mattersIn React, almost every list on screen is made with map.
about 90 min·needs: Arrays, Functions in, values out
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Video
Modern JavaScript in Bangla #12: array map()YouTube · Learn with Sumit · 3 min · Bangla
MMamun's noteIn Bangla, about three minutes. A short, focused look at map. Watch all of it.
Article
Array methods: transform an arrayjavascript.info · 15 min · English
MMamun's noteRead the map section, then stop before sort.
DocsOptional
Array.prototype.map()MDN Web Docs · reference · English
MMamun's noteKeep it open as a reference. You do not need to read it all.
ToolOptional
Python Tutor, JavaScript modepythontutor.com · visualiser · English
MMamun's notePaste the code from the visual below and step through it yourself.
03 / 10

See it step by step

Watch map turn each item into a new one.

nums
123
double.js
1const nums = [1, 2, 3];
2const doubled = nums.map(n => n * 2);
3console.log(doubled);
nums holds three numbers. map has not started yet.
Step 1 / 6
04 / 10

Explanation

An array is a list of values in order. Very often you want a new list where every item has been changed in the same way: prices with tax added, names in capitals, users turned into labels on a screen.

map does exactly that. You give it a function, called a callback. map runs that function once for each item, in order, and collects what the function returns into a brand new array.

Two things are always true. The new array has the same length as the old one, and the old array is not changed. When you read list.map(x => …), ask yourself: what does one item become?

Words to recognise
arraymapcallback=>returnnew array
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const users = getUsers();
Mentor note · line 1
users is an array of objects. In a real app it would come from an API.
2// [{ name: "Rafi", year: 2 }, { name: "Nusrat", year: 3 }]
3
const names = users.map(user => user.name);
5// ["Rafi", "Nusrat"]
6
const labels = users.map(user => {
return user.name + " (year " + user.year + ")";
9});
10
console.log(names.length === users.length);
12// true: map always keeps the length
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const words = ["hi", "yo"];
2console.log(words.map(w => w.length));
What does this print?
DrillFind the bug2 / 2
doubleAll should return a new array with every number doubled. Fix the code so all three checks pass.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does map give back?
  2. 2 / 3What is [10, 20].map(x => x / 10)?
  3. 3 / 3In nums.map(n => n + 1), which part is the callback?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Arrays and map?

10 / 10

Done

You can now
Read any map call in React code.
Next: filter and find Back to Phase 2
On this page
  1. 01Arrays and map
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

An array is a list of values in order. Very often you want a new list where every item has been changed in the same way: prices with tax added, names in capitals, users turned into labels on a screen.

map does exactly that. You give it a function, called a callback. map runs that function once for each item, in order, and collects what the function returns into a brand new array.

Two things are always true. The new array has the same length as the old one, and the old array is not changed. When you read list.map(x => …), ask yourself: what does one item become?

Words to recognise
arraymapcallback=>returnnew array

An array is a list of values in order. Very often you want a new list where every item has been changed in the same way: prices with tax added, names in capitals, users turned into labels on a screen.

map does exactly that. You give it a function, called a callback. map runs that function once for each item, in order, and collects what the function returns into a brand new array.

Two things are always true. The new array has the same length as the old one, and the old array is not changed. When you read list.map(x => …), ask yourself: what does one item become?

Words to recognise
arraymapcallback=>returnnew array