Async inside filter function in JavaScript

Question

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.

Answer 1

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

}();

Answer 2

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