Functional programming and async in action within a while loop implemented in JavaScript

Question

Functional programming and async in action within a while loop implemented in JavaScript

Searching for a way to implement the following code using functional programming techniques.

let membersFound = [];

// Iterate through 50 or more pages until we find 5 members.
while (membersFound.length < 5) {
  let member = findMember(/* Invoke Selenium commands to navigate to next page */);
  if (member !== undefined) {
      membersFound.push(member);
  }
}

console.log(membersFound); // Expected: 5 values, Actual: 0

At present, this code leads to an infinite loop due to the asynchronous nature of JavaScript.

javascript arrays asynchronous while-loop functional-programming

Answer 1

Answer №1

If you modify findMember to return a promise, you can take advantage of ES6 async\await functionality for more streamlined code:

Assuming you currently have a function called findMember(cb), you would transform it into:

function promiseFindMember() {
    return new Promise((resolve, reject) => findMember(member => resolve(member)))
}

With this approach, you can structure your function like so:

async function foo() {
    let members = []
    while(members.length < 5) {
        let member = await promiseFindMember()
        if(member !== undefined) {
            members.push(member)
        }
    }
}

To help grasp the concept and see a comparison between ideas, here's an example:

function dummyCb(cb){
  console.log("Dummy run!")
  setTimeout(cb, 1000)
}

function promiseDummyCb(){
  return new Promise((resolve, reject) => dummyCb(() => resolve()))
}


async function async_hello() {
  cb_count = 0
  while(cb_count < 5) {
    await promiseDummyCb()
    cb_count += 1
  }
}

async function hello() {
  cb_count = 0
  while(cb_count < 5) {
    dummyCb()
    cb_count += 1
  }
}



hello()

Answer 2

If you modify findMember to return a promise, you can take advantage of ES6 async\await functionality for more streamlined code:

Assuming you currently have a function called findMember(cb), you would transform it into:

function promiseFindMember() {
    return new Promise((resolve, reject) => findMember(member => resolve(member)))
}

With this approach, you can structure your function like so:

async function foo() {
    let members = []
    while(members.length < 5) {
        let member = await promiseFindMember()
        if(member !== undefined) {
            members.push(member)
        }
    }
}

To help grasp the concept and see a comparison between ideas, here's an example:

function dummyCb(cb){
  console.log("Dummy run!")
  setTimeout(cb, 1000)
}

function promiseDummyCb(){
  return new Promise((resolve, reject) => dummyCb(() => resolve()))
}


async function async_hello() {
  cb_count = 0
  while(cb_count < 5) {
    await promiseDummyCb()
    cb_count += 1
  }
}

async function hello() {
  cb_count = 0
  while(cb_count < 5) {
    dummyCb()
    cb_count += 1
  }
}



hello()

Answer 3

Answer №2

To start off, make sure that the function findMember always returns a value by retrying if necessary:

const find = cb => findMember(res => res ? cb(res) : find(cb));

Next, if you want an array of a specific length from a callback function, you can use a similar approach:

const fromAsync = (fn, length, cb, arr = []) => arr.length >= length 
   ? cb(arr)
   :  fn(res => fromAsync(fn, length, cb, arr.concat(res)));

Finally, you can implement it like this:

fromAsync(find, 10, result => {
  console.log(result);
});

Note: There may be simpler ways to achieve the same result, but if you prefer a functional approach, this is one way to go about it...

Answer 4

To start off, make sure that the function findMember always returns a value by retrying if necessary:

const find = cb => findMember(res => res ? cb(res) : find(cb));

Next, if you want an array of a specific length from a callback function, you can use a similar approach:

const fromAsync = (fn, length, cb, arr = []) => arr.length >= length 
   ? cb(arr)
   :  fn(res => fromAsync(fn, length, cb, arr.concat(res)));

Finally, you can implement it like this:

fromAsync(find, 10, result => {
  console.log(result);
});

Note: There may be simpler ways to achieve the same result, but if you prefer a functional approach, this is one way to go about it...

Functional programming and async in action within a while loop implemented in JavaScript

Answer №1

Answer №2

Similar questions

Simple yet perplexing JavaScript within an Angular directive

How can you ensure that it selects a random number to retrieve items from an array?

What is the best method for transferring formatted text from the clipboard to an HTML textarea?

Utilize React Hook Form to easily reset the value of an MUI Select component

What is the best way to shrink or enlarge individual sections of the accordion?

Typescript Routing Issue - This call does not match any overloads

How can I identify the nearest ancestor based on a specific class in Angular 8?

Error encountered: Jquery counter plugin Uncaught TypeError

Utilizing Promise.all to update subdocuments with Mongoose

What is the best way to iterate through multiple iframes?

An issue arose in Leaflet where drawing on the map became impossible after making an update to a marker's position

Issue with JQuery Event Listener on Canvas Subelement not functioning

Issue with AddToAny plugin not functioning properly on FireFox

What is the best way to pinpoint a specific Highcharts path element?

Maintain original image file name when downloading

Having difficulty processing information retrieved from an ajax request in jQuery

Authenticating with passportjs using a Google Apps email address for verification

Guide to printing elements from an ArrayList in Java

The 'Cross domain jQuery Ajax request using JSONP' triggered an error: SyntaxError - Unexpected token : appeared on the screen

Unable to see the column filter in the data table