TypeError: flatMap is not a function in JavaScript

avatar

Borislav Hadzhiev

3 min

banner

Photo from Unsplash

# TypeError: flatMap is not a function in JavaScript

The "TypeError: flatMap is not a function" error occurs for two main reasons:

  • Using the flatMap method in a browser that doesn't support it.
  • Using the flatMap method on a value that is not an array.

typeerror flatmap is not a function

Here is an example of how the error occurs.

index.js
const arr = {}; // โ›”๏ธ TypeError: arr.flatMap is not a function const result = arr.flatMap(str => str.split(' '));

We called the Array.flatMap() method on an object and got the error back.

To solve the "TypeError: flatMap is not a function" error, make sure to only call the flatMap method on arrays and in browsers that support it.

The flatMap method returns a new array where each element is the result of the callback function flattened to a depth of 1.

index.js
const arr = ['one two', 'three four']; const result = arr.flatMap(str => str.split(' ')); // ๐Ÿ‘‡๏ธ ['one', 'two', 'three', 'four'] console.log(result);
The flatMap method is not supported in Internet Explorer. If you have to support the browser, you can use the combination of reduce and concat.
index.js
// โœ… Supported in Internet Explorer const arr = ['one two', 'three four']; const result = arr.reduce((acc, curr) => acc.concat(curr.split(' ')), []); // ๐Ÿ‘‡๏ธ ['one', 'two', 'three', 'four'] console.log(result);
However, note that when it comes to large arrays (thousands of values), calling the two functions is a bit slower than using flatMap directly.

# Check if the value is an array before calling flatMap()

You can conditionally check if the value is an array by using the Array.isArray method.

index.js
const arr = null; const result = Array.isArray(arr) ? arr.flatMap(str => str.split(' ')) : []; console.log(result); // ๐Ÿ‘‰๏ธ []

We used the ternary operator, which is very similar to an if/else statement.

If the value is an array, we return the result of calling the flatMap method, otherwise, we return an empty array. This way, you won't get an error even if the value is not an array.

You can also use a simple if statement to achieve the same result.

index.js
const arr = null; let result = []; if (Array.isArray(arr)) { result = arr.flatMap(str => str.split(' ')); } console.log(result); // ๐Ÿ‘‰๏ธ []

If the value is an array, we call the flatMap() method on it and set the result variable to the output.

# Convert the value to an Array before using flatMap()

If you have an array-like object, use the Array.from() method to convert it to an array before calling flatMap.

index.js
const set = new Set(['one two', 'three four']); const result = Array.from(set).flatMap(str => str.split(' ')); console.log(result); // ๐Ÿ‘‰๏ธ ['one', 'two', 'three', 'four']

We converted the value to an array before calling the flatMap method.

You could also use the spread syntax (...) to achieve the same result.

index.js
const set = new Set(['one two', 'three four']); const result = [...set].flatMap(str => str.split(' ')); console.log(result); // ๐Ÿ‘‰๏ธ ['one', 'two', 'three', 'four']

If the error persists, console.log the value you're calling the flatMap method on and make sure it's a valid array.

If you have an object that has an array property, access the relevant property before calling flatMap().

index.js
const obj = { example: ['one two', 'three four'], }; const result = obj.example.flatMap(str => str.split(' ')); console.log(result); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 'three', 'four' ]

We accessed a property on the object that points to an array before calling the Array.flatMap() method.

If the value is fetched from a remote server, make sure it is of the type you expect it to be by logging it to the console.

Ensure you have parsed the value to a native JavaScript array before calling the `flatMap`` method.

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.

Copyright ยฉ 2023 Borislav Hadzhiev