JavaScript map Interview Questions

The map() method in JavaScript creates a new array by applying a callback function to each element of the original array, leaving the source array unchanged. It is commonly used for transforming data and returns an array of the same length, making it ideal for functional programming. Here we are going to discuss map interview questions.

1. What is the map() method in JavaScript?

The map() method is an array method in JavaScript that creates a new array populated with the results of calling a provided function on every element in the calling array. It does not modify the original array but returns a new array.

const arr = [1, 2, 3];
const newArr = arr.map(x => x * 2); 

2. What will be the output of this code?

const arr = [1, 2, 3];
const result = arr.map(function(n) {
  return n + 1;
});
console.log(result);

The output will be [2, 3, 4]. The map() method increments each element of the array by 1.

3. Can map() mutate the original array?

No, the map() method does not modify the original array. It always returns a new array with the results of the provided function applied to each element.

const arr = [1, 2, 3];
const newArr = arr.map(x => x * 2);
console.log(arr); // (original array is unchanged)

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

• map() returns a new array with the results of applying the callback function.
• forEach() executes the provided function once for each element in the array but returns undefined.

5. Can map() be used to filter elements in an array?

No, map() is not designed for filtering elements. It is used for transforming each element of the array. If you want to filter elements, you should use the filter() method. However, you could technically achieve a "filtering" effect in map() by returning undefined or null for unwanted elements, but it’s not recommended.

const arr = [1, 2, 3, 4];
const filtered = arr.map(x => x % 2 === 0 ? x : null).filter(x => x !== null);
console.log(filtered); 

6. What is the role of the second parameter in the map() callback function?

The second parameter is the index of the current element being processed in the array. It’s optional and can be used for accessing the element's position in the array.

7. How can you use map() with objects in an array?

You can use map() with objects to extract or transform values from the objects in the array.

const users = [
  { id: 1, name: 'Hello' },
  { id: 2, name: 'Hello1' }
];
const names = users.map(user => user.name);
console.log(names); 

8. What happens if the map() callback function returns undefined?

If the map() callback function returns undefined, the resulting array will contain undefined for that index

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

9. Can you chain map() with other array methods like filter() or reduce()?

Yes, you can chain map() with other array methods such as filter(), reduce(), or forEach() because these methods all return a new array or a value, making them chainable.

const arr = [1, 2, 3, 4, 5];
const result = arr.map(x => x * 2).filter(x => x > 5);
console.log(result); 

10. What is the time complexity of the map() method?

The time complexity of map() is O(n), where n is the length of the array, because it iterates through the array once to apply the callback function to each element.

11. What would be the output of the following code?

The output will be [1, 20, 3]. The second element (at index 1) is multiplied by 10, and the rest remain unchanged.

const arr = [1, 2, 3];
const result = arr.map((x, index) => {
  if (index === 1) return x * 10;
  return x;
});
console.log(result);

12. How does map() work with sparse arrays?

map() will skip over any empty slots in sparse arrays (i.e., slots that are undefined). It doesn't invoke the callback function for those missing elements.

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

13. Explain how map() behaves with asynchronous operations.

The map() method itself is synchronous and will not wait for asynchronous operations like promises. To handle asynchronous operations, you would need to combine map() with Promise.all() or use async/await inside the map callback.

const arr = [1, 2, 3];
const result = await Promise.all(arr.map(async (x) => {
  const response = await fetch(`https://api.example.com/data/${x}`);
  return response.json();
}));

14. What are some real-world use cases of the map() method?

• Transforming data: Applying a function to modify each element in an array (e.g., formatting numbers or strings).
• Extracting values: Creating a new array of specific properties from an array of objects.
• Rendering UI elements: For example, in React, map() is commonly used to render lists of components.