map() method returns undefined in JavaScript [Solved]

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

map() method returns undefined in JavaScript [Solved] #

The map() method returns undefined values when we forget to explicitly return a value in the callback function we passed to the method. Make sure to return a value from the callback function to not get any undefined values in the array.

index.js
const arr = [1, 2, 3]; const newArr = arr.map(num => { if (num > 2) { return num + 1; } }); console.log(newArr); // 👉️ [undefined, undefined, 4]

The example only returns a value if the condition is satisfied and the if block runs.

In all other cases, we implicitly return undefined.

To not return undefined values from the map() method, you have to explicitly return a value from the callback function you passed to map().

index.js
const arr = [1, 2, 3]; const newArr = arr.map(num => { if (num > 2) { return num + 1; } return num; }); console.log(newArr); // 👉️ [1, 2, 4]

We return a value even if the if condition is not met. This solves the issue of the callback function returning undefined.

The function we passed to the Array.map method gets called with each element in the array.

The array the map() method returns consists of the values that are returned from the callback function.

If you don't return a value from a function in JavaScript, you implicitly return undefined.

index.js
function example() { } console.log(example()); // 👉️ undefined

This is the most common reason the map() method returns an array containing undefined values.

You might also be explicitly returning an undefined value from the function.

index.js
const arr = [1, 2, 3]; const newArr = arr.map(num => { return arr[100]; }); console.log(newArr); // 👉️ [undefined, undefined, undefined]

We returned the array element at index 100 from the callback function. The index doesn't exist in the array, so we explicitly return undefined.

Note that you don't have to use the return keyword to return a value from an arrow function. You can use the shorthand syntax.

index.js
const arr = [1, 2, 3]; const newArr = arr.map(num => num + 1); console.log(newArr); // 👉️ [2, 3, 4]
If you can compute the return value in a quick one-liner, you can return the value directly after the arrow =>.

If you use curly braces, you have to explicitly use the return keyword.

To return an object directly, wrap the object in parentheses.

index.js
const arr = [1, 2, 3]; const newArr = arr.map(num => ({myNumber: num + 1})); // 👇️ [{myNumber: 2}, {myNumber: 3}, {myNumber: 4}] console.log(newArr);

Wrapping the object in parentheses indicates to the function that we are directly returning an object, as opposed to using just curly braces, which would cause the function to implicitly return undefined.

index.js
const arr = [1, 2, 3]; const newArr = arr.map(num => { myNumber: num + 1; }); // 👇️ [undefined, undefined, undefined] console.log(newArr);

Conclusion #

The map() method returns undefined values when we forget to explicitly return a value in the callback function we passed to the method. Make sure to return a value from the callback function to not get any undefined values in the array.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.