← JavaScript

Arrays – map()

Creates a new array by running a given function on every element of the original array.

Part of: JavaScript Coding without HTML and CSS — Module 26, ACARA Digital Technologies Years 9–10 — Modular and Object-Oriented Programming (JavaScript) — Module 34

Understanding Arrays – map() in JavaScript

What it does: This is exactly what the map() method does. The return keyword provides the value for each new array slot. map() always returns a brand new array. map() leaves the original array untouched. Without return, the new array would be filled with undefined. forEach() doesn't build a new array - map() does. JavaScript is case-sensitive, so the method must start lowercase. map() transforms each element, keeping the same array length.

Common mistakes: 'map' must start lowercase - a capital M causes an error. Missing the 'return' keyword - without it, nothing is sent back.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Arrays – map() to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 1–29) and word search (Modules 21–52).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Does map() create a new array?
YesNo
Matches
nums.Map(function(n) { return n * 2; })
↓
Wrong - 'map' must start with a lowercase m
Applying
Meanings
Term
map()
Meaning
Creates a new array by running a given function on every element of the original array.
Practice
let nums = [1, 2, 3];
Testing
Gaps
let doubled = nums.(function(n) {
Check Answer
Spots
1let a = [1, 2];
2let b = a.Map(function(n) {

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Galaxy Phoenix' badge — Orbit Champion, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Does map() create a new array?
A. No
B. Yes ✓
map() always returns a brand new array.
2. Does the original array change after calling map()?
A. No ✓
B. Yes
map() leaves the original array untouched.
3. Is a return statement needed inside map()'s function?
A. Yes ✓
B. No
Without return, the new array would be filled with undefined.
4. Does forEach() return a new array like map() does?
A. No ✓
B. Yes
forEach() doesn't build a new array - map() does.
5. Is 'Map' with a capital M valid JavaScript syntax?
A. Yes
B. No ✓
JavaScript is case-sensitive, so the method must start lowercase.

Match the Pairs

nums.map(function(n) { return n * 2; }) → Creates a new array with each number doubled
users.map(function(u) { return u.name; }) → Creates a new array of just the users' names
Runs a function on every element to build a new array → array.map(function(item) { ... })
Sends the transformed value back into the new array → return
nums.Map(function(n) { return n * 2; }) → Wrong - 'map' must start with a lowercase m
nums.map(function(n) { n * 2; }) → Wrong - missing the 'return' keyword

Key Term

map()
Creates a new array by running a given function on every element of the original array.

Fill in the Blanks

1. let doubled = nums.map(function(n) {
Hint: Type the array method that returns a new array.
2. let doubled = nums.map(function(n) {
Hint: Type the keyword used to define the function passed to map.
3. return n * 2;
Hint: Type the keyword that sends a value back from a function.
4. let names = users.map(function(u) {
Hint: Type the array method that returns a new array.
5. let squares = nums.map(function(n) { return n * n; });
Hint: Type the keyword that sends a value back from a function.

Spot the Error

Question 1
A let a = [1, 2];
B let b = a.Map(function(n) {
C return n * 2;
Line B — 'map' must start lowercase - a capital M causes an error.
Question 2
A let c = [1, 2];
B let d = c.map(function(n) {
C n * 2;
Line C — Missing the 'return' keyword - without it, nothing is sent back.
Question 3
A let e = [1, 2];
B let f = e.forEach(function(n) {
C return n * 2;
Line B — forEach() doesn't return a new array - use map() instead.
Question 4
A let g = [1, 2, 3];
B let h = g.map(function(n) {
C return n * 2
D });
Line C — This line is missing a semicolon, but that's not required in JS.
Question 5
A let i = [1, 2];
B let j = i.map(function(n) {
C return n * 2;
D ]
Line D — The block must close with }, not ].

Student with a class code? Join your class →