Solve - map() method returns undefined in JavaScript

avatar

Borislav Hadzhiev

Sun Nov 21 20212 min read

banner

Photo by Mika Matin

Solve - map() method returns undefined #

The map() method returns undefined values when we forget to explicitly return a value in the callback function we passed to the method.

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 above 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 a map() method, you have to explicitly return a value from the callback function you passed to the map() method.

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]

In the example, 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 you return from the callback function.

If you never 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.

A rare, but also possible problem might be that you explicitly return 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]

Inside of the callback function we passed to the map() method, we return the array element at index 100. Because the index does not exist in the array, we explicitly return undefined back.

Note that you don't have to use the return keyword to return a value from an array 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 however use curly braces, you have to explicitly use the return keyword.

To return an object directly, you can wrap the object in parenthesis.

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 parenthesis 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);

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee