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.
3 Answers
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);
}();
4 Comments
karoge
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
Quentin
@karoge — Well that's nonsense.
Promise.all needs to be passed an array of promises, not an array of numbers.karoge
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].Quentin
Yes. It's pointless nonsense, not error throwing nonsense.
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;
}
Comments
const checkedArray = await Promise.all(
originalArray.map(async (elem) => {
const someCheck = await myAsyncCheckingMethod(elem);
return someCheck ? elem : null;
})
);
const finalArray = checkedArray.filter((elem) => elem !== null);
Works if you are not expecting nulls as a regular elements in original array
Comments
async?Function.call()under the hood to execute your filter function. That seems likely to break theasync.