Creating a Promise.race() polyfill

Photo by Luca Bravo on Unsplash

Creating a Promise.race() polyfill

A comprehensive explanation to the BigFrontEnd - 35. Implement Promise.race()

Problem Link: bigfrontend.dev/problem/implement-Promise-r..

Continuing the Knowing JS series, with a new question!

First things first, as usual :)

What is a Promise?

An object that represents an eventual completion of failure of an asynchronous operation

What is a polyfill?

A function or a snippet of code that mimics a particular functionality. Created majorly to provide desired functionality in older browsers which don’t support latest, usually higher order operations

What is Promise.race() ?

A static method that takes an iterable of Promises and resolves to the first resolved value of the promise or rejects with the first rejection of the promise. As the name suggests, it races to the first resolution or rejection

Approach

  • Return a Promise

  • Iterate over the given promises array

    • Resolve when any of the promise resolves

    • Reject when any of the promise rejects

Code Breakdown and explanation

function race(promises) {
// Return a Promise
  return new Promise((resolve,reject) => {
// Iterate over the given promises array
    promises.forEach((promise) => {
// Resolve the main promise when any of the promise from the array resolved
// Same for reject
      Promise.resolve(promise).then(resolve).catch(reject)
    })
  })
}

And that’s it, race is often the easiest and the most straightforward Promise polyfill to implement, as we just saw, the better we understand the concept, easier it is to implement it

No quotes for such an easy question :)