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.

Practice

1.

What does the map method do in JavaScript?

easy

A. Sorts the elements of the array in place.

B. Changes the original array by removing elements.

C. Creates a new array by applying a function to each element of the original array.

D. Filters elements from the array based on a condition.

Solution

1. Step 1: Understand the purpose of map

   The map method applies a function to each element and creates a new array with the results.

2. Step 2: Compare with other array methods

   Unlike filter or sort, map does not remove or reorder elements but transforms them.

3. Final Answer:

   Creates a new array by applying a function to each element of the original array. -> Option C

4. Quick Check:

   map creates new transformed array = A [OK]

Hint: Map always returns a new array with transformed items [OK]

Common Mistakes:

• Thinking map changes the original array
• Confusing map with filter or sort
• Believing map removes elements

2.

Which of the following is the correct syntax to double each number in the array nums using map?

const nums = [1, 2, 3];

easy

A. const doubled = nums.map(x => x * 2);

B. const doubled = nums.map(x * 2);

C. const doubled = nums.map(x => { x * 2 });

D. const doubled = nums.map(x => return x * 2);

Solution

1. Step 1: Check arrow function syntax inside map

   The function must be x => x * 2 to return the doubled value directly.

2. Step 2: Identify syntax errors in other options

   const doubled = nums.map(x * 2); misses the arrow function syntax. const doubled = nums.map(x => { x * 2 }); uses braces but no return statement, so returns undefined. const doubled = nums.map(x => return x * 2); incorrectly uses return without braces.

3. Final Answer:

   const doubled = nums.map(x => x * 2); -> Option A

4. Quick Check:

   Correct arrow function syntax = B [OK]

Hint: Use arrow function with implicit return inside map [OK]

Common Mistakes:

• Missing arrow (=>) in the function
• Using braces without return statement
• Incorrect return syntax inside arrow function

3.

What is the output of the following code?

const arr = [1, 2, 3];
const result = arr.map(x => x + 1);
console.log(result);

medium

A. [1, 2, 3]

B. [2, 3, 4]

C. [1, 3, 5]

D. Error

Solution

1. Step 1: Understand the map function applied

   Each element x in arr is increased by 1, so 1 becomes 2, 2 becomes 3, and 3 becomes 4.

2. Step 2: Check the output array

   The new array is [2, 3, 4], which is logged to the console.

3. Final Answer:

   [2, 3, 4] -> Option B

4. Quick Check:

   Each element +1 = [2, 3, 4] [OK]

Hint: Add 1 to each element inside map to get output [OK]

Common Mistakes:

• Thinking original array changes
• Confusing output with original array
• Expecting error due to syntax

4.

Find the error in this code snippet:

const numbers = [1, 2, 3];
const newNumbers = numbers.map(num => { num * 3 });
console.log(newNumbers);

medium

A. The arrow function syntax is incorrect.

B. The array numbers is not defined.

C. map method cannot be used on arrays.

D. Missing return statement inside the arrow function block.

Solution

1. Step 1: Analyze arrow function with braces

   When using braces in arrow functions, an explicit return is needed to return a value.

2. Step 2: Identify missing return

   The function body { num * 3 } does not return anything, so newNumbers will be an array of undefined.

3. Final Answer:

   Missing return statement inside the arrow function block. -> Option D

4. Quick Check:

   Arrow function with braces needs return [OK]

Hint: Add return inside braces or remove braces for implicit return [OK]

Common Mistakes:

• Forgetting return inside arrow function with braces
• Thinking map changes original array
• Assuming map works only with simple functions

5.

You have an array of objects representing people:

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Carol', age: 35 }
];

// Use map to create an array of greetings like "Hello, Alice!"

Which code correctly creates this greetings array?

hard

A. const greetings = people.map(person => `Hello, ${person.name}!`);

B. const greetings = people.map(person => { `Hello, ${person.name}!` });

C. const greetings = people.map(person => { return `Hello, ${person.age}!` });

D. const greetings = people.map(person => person.name + 'Hello!');

Solution

1. Step 1: Use map to transform each object to a greeting string

   The function should return a string like "Hello, Alice!" using template literals.

2. Step 2: Check arrow function syntax for returning string

   const greetings = people.map(person => `Hello, ${person.name}!`); uses implicit return with template literal correctly. const greetings = people.map(person => { `Hello, ${person.name}!` }); misses return inside braces. const greetings = people.map(person => { return `Hello, ${person.age}!` }); incorrectly uses age instead of name. const greetings = people.map(person => person.name + 'Hello!'); concatenates incorrectly.

3. Final Answer:

   const greetings = people.map(person => `Hello, ${person.name}!`); -> Option A

4. Quick Check:

   Implicit return with template literal = C [OK]

Hint: Use template literals with implicit return in map [OK]

Common Mistakes:

• Missing return inside braces
• Incorrect string concatenation
• Confusing implicit and explicit return