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.

CodePudding user response：

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

}();