Map method in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this map method code?

Consider the following JavaScript code using the map method. What will be printed to the console?

Javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);
console.log(doubled);

A [1, 2, 3, 4]

B [2, 4, 6, 8]

C [NaN, NaN, NaN, NaN]

D TypeError

💡 Hint

Remember, map creates a new array by applying the function to each element.

The map method applies the function x => x * 2 to each element, doubling each number. So the output is [2, 4, 6, 8].

❓ Predict Output

intermediate

What does this map method return?

Look at this code snippet. What will be the value of result after running it?

Javascript

const words = ['apple', 'banana', 'cherry'];
const result = words.map(word => word.length);
console.log(result);

A [5, 6, 6]

B ["apple", "banana", "cherry"]

C ["a", "b", "c"]

D ReferenceError

💡 Hint

The function returns the length of each word.

The map method returns a new array with the length of each string: 'apple' has 5 letters, 'banana' 6, and 'cherry' 6.

🔧 Debug

advanced

Why does this map code produce an error?

This code tries to double numbers using map, but it causes an error. What is the cause?

Javascript

const nums = [1, 2, 3];
const doubled = nums.map(x => { x * 2 });
console.log(doubled);

A The arrow function lacks a return statement, so it returns undefined for each element.

B The array is empty, so map cannot run.

C The map method is not defined on arrays.

D The multiplication operator * is invalid here.

💡 Hint

Arrow functions with curly braces need an explicit return to output a value.

When using curly braces in arrow functions, you must use return to send back a value. Without it, the function returns undefined, so the new array is [undefined, undefined, undefined].

❓ Predict Output

advanced

What is the output of this map with object transformation?

What will this code print to the console?

Javascript

const users = [{name: 'Anna', age: 25}, {name: 'Ben', age: 30}];
const names = users.map(user => user.name.toUpperCase());
console.log(names);

A [{name: "ANNA"}, {name: "BEN"}]

B TypeError

C ["anna", "ben"]

D ["ANNA", "BEN"]

💡 Hint

The function converts each user's name to uppercase.

The map method creates a new array with the uppercase names of each user, so the output is ["ANNA", "BEN"].

🧠 Conceptual

expert

Which option correctly explains the behavior of map with sparse arrays?

Given a sparse array const arr = [1, , 3]; (note the missing element), what does arr.map(x => x * 2) produce?

A [2, NaN, 6]

B [2, undefined, 6]

C [2, , 6]

D Throws a TypeError

💡 Hint

Map skips missing elements in sparse arrays and keeps holes.

The map method skips holes in sparse arrays, so the output keeps the hole at index 1. The result is [2, , 6], where the middle element is still missing.