JavaScript Notes

JavaScript Array map() Method - Complete Tutorial with Examples

Master JavaScript array map() method: syntax, transformations, mapping objects, chaining, React rendering, vs forEach, common mistakes, real-world use cases, interview Q&A.

The map() method creates a new array by transforming every element using a callback function. It's the go-to tool for data transformation in JavaScript and is essential for React rendering.

Example

Visual: How map() Works Original: [1, 2, 3, 4, 5] ↓ callback: n => n * 2 ↓ New Array: [2, 4, 6, 8, 10] Original: [1, 2, 3, 4, 5] ← unchanged! Key rule: same length in → same length out

Basic Usage

Example

const numbers = [1, 2, 3, 4, 5]; // Double each number const doubled = numbers.map(n => n * 2); console.log(doubled); // Square each number const squared = numbers.map(n => n ** 2); console.log(squared); // Convert to strings const strings = numbers.map(n => String(n)); console.log(strings); // Original unchanged! console.log(numbers);

Output

[2, 4, 6, 8, 10]
[1, 4, 9, 16, 25]
["1", "2", "3", "4", "5"]
[1, 2, 3, 4, 5]

Using Index in map()

Example

Output

["1. apple", "2. banana", "3. cherry"]
[
  {id: 1, name: "Alice", email: "alice@example.com"},
  {id: 2, name: "Bob",   email: "bob@example.com"},
  {id: 3, name: "Carol", email: "carol@example.com"}
]

Mapping Arrays of Objects

Example

Output

["Laptop", "Phone", "Tablet"]
{name: "Laptop", price: 999, tax: 0.1, total: 1098.9}
[{name: "Laptop", price: 999}, {name: "Phone", price: 699}, {name: "Tablet", price: 499}]

map() with Destructuring

Example

// Destructure objects in callback const points = [{ x: 3, y: 4 }, { x: 0, y: 0 }, { x: 5, y: 12 }]; const distances = points.map(({ x, y }) => Math.sqrt(x ** 2 + y ** 2)); console.log(distances); // Destructure arrays in callback const pairs = [[1, 2], [3, 4], [5, 6]]; const sums = pairs.map(([a, b]) => a + b); console.log(sums);

Output

[5, 0, 13]
[3, 7, 11]

Chaining map() with Other Methods

Example

Output

[
  {product: "Laptop",  total: 1998},
  {product: "Monitor", total: 1350},
  {product: "Mouse",   total: 250}
]

Real World Use Cases

Example

// 1. React-style list rendering const items = ["Home", "About", "Contact"]; const listItems = items.map((item, i) => `<li key="${i}">${item}</li>` ).join("\n"); console.log(listItems); // 2. Normalize API data const apiUsers = [ { first_name: "alice", last_name: "SMITH", age: "28" }, { first_name: "bob", last_name: "JONES", age: "35" } ]; const normalized = apiUsers.map(u => ({ fullName: `${u.first_name} ${u.last_name}`.toLowerCase() .replace(/\b\w/g, c => c.toUpperCase()), age: parseInt(u.age) })); console.log(normalized); // 3. Add tax to prices const prices = [100, 250, 380]; const withGST = prices.map(p => +(p * 1.18).toFixed(2)); console.log("With 18% GST:", withGST);

Output

<li key="0">Home</li>
<li key="1">About</li>
<li key="2">Contact</li>
[{fullName: "Alice Smith", age: 28}, {fullName: "Bob Jones", age: 35}]
With 18% GST: [118, 295, 448.4]

Common Mistakes

❌ Wrong	✅ Correct	Why
`arr.map(n => { n * 2 })`	`arr.map(n => n * 2)` or `arr.map(n => { return n * 2; })`	Curly braces need explicit `return`
Using `map()` just for `console.log`	Use `forEach()` instead	`map()` is for transformation — side effects only = `forEach()`
`arr.map(parseInt)` expecting `[1, 2, 3]`	`arr.map(n => parseInt(n))`	`parseInt` receives `(value, index, array)` — the second arg (index) acts as radix
Expecting `map()` to filter elements	Chain `.filter()` before `.map()`	`map()` always returns same-length array; it can't skip elements
Mutating original objects inside map	Return a new object: `{ ...item, updated: true }`	Mutations inside map cause hard-to-trace bugs

map() vs forEach()

Feature	`map()`	`forEach()`
Returns	New array	`undefined`
Purpose	Transform values	Run side effects
Chainable	✅ Yes	❌ No
Skips sparse holes	✅ Yes	✅ Yes
Use when	You need a new array	You just want to loop

Example

const nums = [1, 2, 3]; // map: use when you need the result const doubled = nums.map(n => n * 2); console.log(doubled); // [2, 4, 6] // forEach: use for side effects only nums.forEach(n => console.log(n)); // forEach returns undefined — can't chain! const result = nums.forEach(n => n * 2); console.log(result); // undefined

Output

[2, 4, 6]
1
2
3
undefined

Cheat Sheet

Example

Double values: arr.map(n => n * 2) Extract property: arr.map(obj => obj.name) Add field: arr.map(obj => ({ ...obj, newField: value })) Numbered list: arr.map((item, i) => `${i + 1}. ${item}`) Create objects: arr.map((name, i) => ({ id: i+1, name })) Parse numbers: arr.map(n => parseInt(n)) To uppercase: arr.map(s => s.toUpperCase()) Array pairs to obj: arr.map(([key, val]) => ({ [key]: val }))

Interview Questions

Q1. What does map() return?

A new array of the same length as the original. Each element is the return value of the callback for that position.

Q2. Does map() mutate the original array?

No. map() never modifies the original array. It creates and returns a completely new array.

Q3. What happens if you forget the return statement in a map() callback?

Each element becomes undefined. Example: [1,2,3].map(n => { n * 2 }) returns [undefined, undefined, undefined].

Q4. What is the difference between map() and forEach()?

map() returns a new array with transformed values — use it when you need a result. forEach() returns undefined — use it only for side effects like logging or updating external state.

Q5. Why does [1, 2, 3].map(parseInt) not work as expected?

parseInt accepts (string, radix). map passes (element, index, array), so the index becomes the radix. parseInt("2", 1) returns NaN. Fix: [1, 2, 3].map(n => parseInt(n)).

Q6. Can map() remove elements?

No. map() always returns an array of the same length. Elements you "skip" become undefined. To filter and transform, use .filter().map().

Q7. How do you use map() in React?

Example

const items = ["Apple", "Banana", "Cherry"]; return ( <ul> {items.map((item, i) => <li key={i}>{item}</li>)} </ul> );

Key Takeaways

map() always returns a new array of the same length
The callback's return value becomes the element in the new array
Forgetting return inside curly braces fills the new array with undefined
Use map() for transformation, forEach() for side effects, filter() for removing elements
map() is chainable — .filter().map().reduce() pipelines are powerful
Never use map() just to call console.log — that's forEach()'s job

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Array map() Method - Complete Tutorial with Examples.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, arrays, map, javascript array map() method - complete tutorial with examples

Continue learning this concept

ArraysJavaScript map() Method — Transform Arrays Complete Guide 2026Master the JavaScript Array map() method with complete examples, internal working explanation, comparisons with forEach, common mistakes, interview questions, and FAQ. comprehensive guide.ArraysJavaScript map() vs forEach() - Key Differences with ExamplesUnderstand the exact differences between JavaScript map() and forEach(): return values, chaining, performance, when to use each, comparison table, and interview Q&A.ArraysJavaScript Array Basics - Complete BeginnerLearn JavaScript array basics from scratch: creation, indexing, length, iteration, mutation vs copy, and real-world patterns. 30+ examples with outputs.ArraysJavaScript Array Methods - Complete Reference Guide with ExamplesComprehensive guide to all JavaScript array methods: push, pop, splice, slice, sort, flat, map, filter, reduce, ES2023 methods with examples, outputs, and performance tips.ArraysJavaScript Array Programs - 20+ Practice Problems with SolutionsMaster JavaScript arrays with 20+ practical programs: sum, max, reverse, duplicates, sorting, searching, matrix operations, and real-world coding patterns.ArraysJavaScript Arrays Basics - Complete Guide with Examples & DiagramsMaster JavaScript arrays from scratch. Learn array creation, indexing, iteration, multidimensional arrays, reference types, and memory behavior with 30+ examples.

PreviousJavaScript find() & findIndex() — Complete Guide 2026 NextJavaScript map() Method — Transform Arrays Complete Guide 2026