Why flatMap doesn't remove empty arrays?

Question

I have a flatMap function that fetch and return data for each item in array. It also returns an empty array if item doesn't have certain informations. Since I'm using flatMap I was expecting that it will remove all the empty arrays, but the finished array still have them included.

Function:

 Promise.all(
        array.flatMap(async (item) => {
        const fetchedData = await fetch(`${item.url}`)
            .then(response => response.json())
            .then(data => data.stats.length ? data : null);
        return fetchedData ? { ...fetchedData } : [];
    })).then(data => console.log(data));

Also when I log the data using console.log(data.flat()) instead of console.log(data) all the empty arrays are removed, but it would require iterating through array one more time. Any ideas why flatMap isn't doing it by itself?

Answer 1

It's because your callback inside of flatMap is an async function, so it always returns a Promise no matter what. Let's say array has two items, the first which will have fetchedData and the second which will not, here's an example of what will happen:

array is: [item1, item2]

After the map part of flatMap you get [Promise(pending), Promise(pending)] (note that the mapping is instantaneous, it doesn't wait for the async functions to complete, it just gets the promise returned from them).

After the flattening part you get [Promise(pending), Promise(pending)] (note that this is the same as the above line - promises can't be flattened.).

Promise.all.then() waits for each promise to resolve and passes the result as data which you log and is [someObject, emptyArray].