5

const result = [1, 2, 3, 4, 5].filter(async (n) => n <= 3)

If you console.log(result) you get [1, 2, 3, 4, 5]. Why isn't it [1, 2, 3]?

If you remove async from the function you do get [1, 2, 3].

I just want to know why it works like that.

karoge
  • 63
  • 1
  • 5
  • What is the use case of using `async` ? – Debug Diva Mar 24 '22 at 10:29
  • Does this answer your question? [Using async/await with a forEach loop](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) – evolutionxbox Mar 24 '22 at 10:30
  • It looks like the built-in filter function uses `Function.call()` under the hood to execute your filter function. That seems likely to break the `async`. – Debug Diva Mar 24 '22 at 10:30
  • 3
    It has nothing to do with the async function contents. It's because async functions return a promise which is truthy. Therefore it will return all elements – evolutionxbox Mar 24 '22 at 10:31

2 Answers2

8

filter creates a new array with all the values from the original array where the function you pass returns a true value.

async functions return Promises. Promises are objects. Objects are true values.

If you wanted to do this with async functions, you would need to wait until you have resolved the promises before testing for truthiness.

!async function() {

  const data = [1, 2, 3, 4, 5];
  const promises = data.map(async(n) => ({
    value: n,
    include: n <= 3
  }));
  const data_with_includes = await Promise.all(promises);
  const filtered_data_with_includes = data_with_includes.filter(v => v.include);
  const filtered_data = filtered_data_with_includes.map(data => data.value);
  console.log(filtered_data);

}();

Or, in a format that doesn't explain each step:

!async function() {

  const result = (await Promise.all([1, 2, 3, 4, 5].map(async(n) => ({
    value: n,
    include: n <= 3
  })))).filter(v => v.include).map(data => data.value);

  console.log(result);

}();

You could also avoid using the functional methods in favour of mutation in a for loop

!async function() {

  const test = async(n) => n <= 3;
  const data = [1, 2, 3, 4, 5];
  const result = [];

  for (let i = 0; i < data.length; i++) {
    const value = data[i];
    if (await test(value)) result.push(value);
  }

  console.log(result);

}();
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    `const result = await Promise.all( [1, 2, 3, 4, 5].filter(async (n) => n <= 3) );` This is how the code looked in my coding interview. (Assume this is part of a bigger async function). I just got rid of Promise stuff to simplify the question and figure out why async affects it like that – karoge Mar 24 '22 at 11:03
  • 1
    @karoge — Well that's nonsense. `Promise.all` needs to be passed an array of promises, not an array of numbers. – Quentin Mar 24 '22 at 11:04
  • That's what I told them lol. I had to guess what would be inside "result" after executing the code. I said it would give an error because of Promise.all stuff but apparently I was wrong and it actually returns `[1, 2, 3, 4, 5]`. – karoge Mar 24 '22 at 11:07
  • 2
    Yes. It's pointless nonsense, not error throwing nonsense. – Quentin Mar 24 '22 at 11:09
-1

I stuck with the same issue so you can implement async filter fn:

async function asyncFilter<T>(arr: T[], cb: (el: T) => Promise<boolean>): Promise<T[]> {
    const filtered: T[] = [];

    for (const element of arr) {
        const needAdd = await cb(element);

        if (needAdd) {
            filtered.push(element);
        }
    }

    return filtered;
}
zemil
  • 3,235
  • 2
  • 24
  • 33