Using an async function in Array.find()

Question

It seems I'm unable to use an async function as the first argument to Array.find(). I can't see why this code would not work what is happening under the hood?


function returnsPromise() {
  return new Promise(resolve => resolve("done"));
}

async function findThing() {
  const promiseReturn = await returnsPromise();
  return promiseReturn;
}

async function run() {
  const arr = [1, 2];
  const found = await arr.find(async thing => {
    const ret = await findThing();
    console.log("runs once", thing);
    return false;
  });
  console.log("doesn't wait");
}

run();

https://codesandbox.io/s/zk8ny3ol03

You've marked the predicate `async`, but that doesn't mean that `Array.find()` is asynchronous. — Tyler Roper, Apr 09 '19 at 20:48
@obermillerk That will not work. Not only is that syntactically incorrect, `find` is not asynchronous so in no circumstance can you "wait" for it to complete. — Tyler Roper, Apr 10 '19 at 13:54

Nicholas Tower · Accepted Answer · 2019-04-09T20:58:34.070

35

Simply put, find does not expect a promise to be returned, because it is not intended for asynchronous things. It loops through the array until one of the elements results in a truthy value being returned. An object, including a promise object, is truthy, and so the find stops on the first element.

If you want an asynchronous equivalent of find, you'll need to write it yourself. One consideration you'll want to have is whether you want to run things in parallel, or if you want to run them sequentially, blocking before you move on to the next index.

For example, here's a version that runs them all in parallel, and then once the promises are all resolved, it finds the first that yielded a truthy value.

async function findAsync(arr, asyncCallback) {
  const promises = arr.map(asyncCallback);
  const results = await Promise.all(promises);
  const index = results.findIndex(result => result);
  return arr[index];
}

//... to be used like:

findAsync(arr, async (thing) => {
  const ret = await findThing();
  return false;
})

edited Apr 09 '19 at 20:58

answered Apr 09 '19 at 20:46

Nicholas Tower

72,740
7
86
98

Ok that's what I suspected. I googled a lot and couldn't find anything about this anywhere. Is it documented that find works with async functions like this? – Laurie Poulter Apr 09 '19 at 20:48
1

It's documented that `.find` loops through the array until an element returns a truthy value, and it's documented that async functions return promises. This is just the interaction of those two things. – Nicholas Tower Apr 09 '19 at 20:49
1

@LauriePoulter nothing in Array.protoype is asynchronous – charlietfl Apr 09 '19 at 20:50
`Promise.all` will wait for every promise to resolve. It would be nice to wait until a promise resolves truthy. – Gherman Dec 21 '19 at 14:55
4

Might be helpful to use `Promise.race`, which would help finish this quicker than `Promise.all` if you're looking for a singular match. – Jacob Morrison Jan 29 '20 at 17:45
@JacobMorrison `Promise.race` will finish quicker, but could finish without a match. – Roberto Damian Alfonso May 12 '20 at 21:46
1

What's `findThing` in your example? – connexo Jul 06 '22 at 13:57
@connexo see the original question for what `findThing` is. I did not modify it. – Nicholas Tower Jul 06 '22 at 19:14

score 16 · Answer 2 · answered Sep 08 '20 at 13:42

Here is a TypeScript version that runs sequentially:

async function findAsyncSequential<T>(
  array: T[],
  predicate: (t: T) => Promise<boolean>,
): Promise<T | undefined> {
  for (const t of array) {
    if (await predicate(t)) {
      return t;
    }
  }
  return undefined;
}

score 0 · Answer 3 · answered Apr 09 '19 at 20:57

0

It might help you to note that Array.prototype.filter is synchronous so it doesn't support async behaviour. I think that the same applies to the "find" property. You can always define your own async property :) Hope this helps!

answered Apr 09 '19 at 20:57

Zangetsu Ichirin

1
1

score 0 · Answer 4 · answered May 02 '22 at 15:50

The other answers provide two solutions to the problem:

Running the promises in parallel and awaiting all before returning the index
Running the promises sequencially, so awaiting every single promise before moving on to the next one.

Imagine you have five promises that finish at different times: The first after one second, the second after two seconds, etc... and the fifth after five seconds.

If I'm looking for the one that finished after three seconds:

The first solution will wait 5 seconds, until all promises are resolved. Then it looks for the one that matches.
The second one will evaluate the first three matches (1 + 2 + 3 = 6 seconds), before returning.

Here's a third option that should usually be faster: Running the promises in parallel, but only waiting until the first match ("racing them"): 3 seconds.

function asyncFind(array, findFunction) {
  return new Promise(resolve => {
    let i = 0;
    array.forEach(async item => {
      if (await findFunction(await item)) {
        resolve(item);
        return;
      }
      i++;
      if (array.length == i) {
        resolve(undefined);
      }
    });
  });
}

//can be used either when the array contains promises
var arr = [asyncFunction(), asyncFunction2()];
await asyncFind(arr, item => item == 3);

//or when the find function is async (or both)
var arr = [1, 2, 3];
await asyncFind(arr, async item => {
    return await doSomething(item);
}

When looking for a non-existant item, solutions 1 and 3 will take the same amount of time (until all promises are evaluated, here 5 seconds). The sequencial approach (solution 2) would take 1+2+3+4+5 = 15 seconds.

Demo: https://jsfiddle.net/Bjoeni/w4ayh0bp

score 0 · Answer 5 · answered Jun 06 '22 at 14:14

I came up with a solution that doesn't appear to be covered here, so I figured I'd share. I had the following requirements.

Accepts an async function (or a function that returns a promise)
Supplies item, index, and array to the function
Returns the item with the fastest resolved promise (all are evaluated in parallel)
Does not exit early if the async function rejects (throws an error)
Supports generic types (in TypeScript)

With those requirements, I came up with the following solution using Promise.any. It will resolve with the first fulfilled value or reject with an AggregateError if none of the promises are fulfilled.

type Predicate<T> = (item: T, index: number, items: T[]) => Promise<boolean>

export const any = async <T>(array: T[], predicate: Predicate<T>): Promise<T> => {
  return Promise.any(
    array.map(async (item, index, items) => {
      if (await predicate(item, index, items)) {
        return item
      }

      throw new Error()
    })
  )
}

Now we can search an array in parallel with async functions and return the fastest resolved result.

const things = [{ id: 0, ... }, { id: 1, ... }]
const found = await any(things, async (thing) => {
  const otherThing = await getOtherThing()

  return thing.id === otherThing.id
})

Enumerate the array sequentially

If we want to enumerate the array in sequence, as Array.find does, then we can do that with some modifications.

export const first = async <T>(array: T[], predicate: Predicate<T>): Promise<T> => {
  for (const [index, item] of array.entries()) {
    try {
      if (await predicate(item, index, array)) {
        return item
      }
    } catch {
      // If we encounter an error, keep searching.
    }
  }

  // If we do not find any matches, "reject" by raising an error.
  throw new Error()
}

Now, we can search an array in sequence and return the first resolved result.

const things = [{ id: 0, ... }, { id: 1, ... }]
const found = await first(things, async (thing) => {
  const otherThing = await getOtherThing()

  return thing.id === otherThing.id
})

score 0 · Answer 6 · answered Mar 09 '23 at 13:11

All suggestions so far are missing the second parameter of find. Therefore I provide two further suggestions:

Array.prototype.asyncFind = function (predicate, thisArg=null) {
    return Promise.any(this.map(async (value, index, array) =>
        new Promise(async (resolve, reject) => 
            await predicate.bind(thisArg)(value, index, array) ? resolve(value) : reject()
        )
    )).catch(() => undefined)
}

The first one runs in parallel and returns (just like the original) the first value (with respect to time) that satisfies the provided testing function or undefined if none is found.

Array.prototype.asyncFind = async function (predicate, thisArg=null) {
    const boundPredicate = predicate.bind(thisArg)

    for (const key of this.keys()) {
        if (await boundPredicate(this[key], key, this)) return this[key]
    }

    return undefined
}

The second one runs one after another (taking sorting into account) and returns (just like the original) the first value (with respect to sorting) that satisfies the provided testing function or undefined if none is found.

Using an async function in Array.find()

6 Answers6

Enumerate the array sequentially

Linked