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.

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.

• javascript
• asynchronous
• filter

• What is the use case of using async ? – Rohìt Jíndal Commented Mar 24, 2022 at 10:29
• Does this answer your question? Using async/await with a forEach loop – evolutionxbox Commented Mar 24, 2022 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. – Rohìt Jíndal Commented Mar 24, 2022 at 10:30
• 4 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 Commented Mar 24, 2022 at 10:31

2 Answers 2

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

}();

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;
}

Or parallel filtering:

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

    await Promise.all(
        arr.map(async (element) => {
            const needAdd = await cb(element);

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

    return filtered;
}