javascript - reduce array of async and sync functions

Question

I am trying to reduce an array of both asynchronous and synchronous methods. I have two synchronous methods and one asynchronous methods that does some basic formatting an object. Since I have a mix of asynchronous and synchronous methods, I am using async/await with my reduce. The problem is my formatName method returns the error Cannot read property 'toUpperCase' of undefined because the person parameter passed in is a promise. I thought that since i use await in my reduce, the callback should return the actual value instead of a promise:

const results = await fn(finalResult);

My code works fine if i take out the synchronous methods from my array. But I need to reduce an array of both synchronous and asynchronous methods. Does anyone have tips on how I can get around this? My full code is below.

const formatName = (person) => {
    person.name = person.name.toUpperCase();
    return person;
}

const formatAge = (person) => {
    person.age += 10;
    return person;
}

// Async function  
const formatLocation = async (person) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    person.location = `${person.location.toLocaleLowerCase()}`
    return person;
}

const initialPerson = {
    name: "john",
    age: 35,
    location: 'USA'
}

const formattedStagesWithAsync = [
    formatLocation, // asynchronous
    formatAge, // synchronous
    formatName //synchronous
];

const process = async () => {
    const formattedPerson = await formattedStagesWithAsync.reduce(async (finalResult, fn) => {
        const results = await fn(finalResult);
        return results;
      }, initialPerson);

    console.log(`Formatted person - ${JSON.stringify(formattedPerson, null, 2)}`);
}   

process();

Don't pass an async function as the callback to reduce

Bergi
– Bergi

2021-11-07 03:51:45 +00:00
Commented Nov 7, 2021 at 3:51 — Bergi
– Bergi, Commented Nov 7, 2021 at 3:51

CertainPerformance · Accepted Answer · 2021-11-07 02:47:49Z

2

Async functions always return promises, so on subsequent iterations of the .reduce callback, the accumulator will be a Promise that you need to wait to resolve first.

While you could do

const accumVal = await finalResult

at the beginning of the callback, this would be a lot simpler by avoiding reduce entirely IMO.

const process = async () => {
  let person = initialPerson;
  for (const fn of formattedStagesWithAsync) {
    person = await fn(person);
  }

In the case that each of your functions returns the original object, like in the case here, that simplifies to:

const process = async () => {
  for (const fn of formattedStagesWithAsync) {
    await fn(initialPerson);
  }

(you're mutating the initialPerson in your original code too)

answered Nov 7, 2021 at 2:47

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Yaghoubi · Accepted Answer · 2021-11-07 02:50:04Z

-1

Promise return async value but dont use async and await option for Promise, Just return it

Promise docs

const promiseHandler = () => {
    return new Promise((done, reject) => {
        setTimeout(() => {
            done("hello");
        });
    });
}

promiseHandler().then(v => {
    console.log(v); // hello
});

answered Nov 7, 2021 at 2:50

Ali Yaghoubi

1,29010 silver badges18 bronze badges

Collectives™ on Stack Overflow

javascript - reduce array of async and sync functions

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related