bind arguments to function javascript

Question

i'm trying to run second query when first was resolved like so:

const fn1 = secondQuery => $.get('1.json', data => secondQuery());
const fn2 = secondQuery => $.get('2.json', data => secondQuery());
const fn3 = secondQuery => $.get('3.json', data => secondQuery());
const fn4 = secondQuery => $.get('4.json', data => secondQuery());

const queries = [fn1, fn2, fn3, fn4];

const queriesWithArgs = queries.map((queryFn, index, arr) => {
    const nextQuery = arr[index + 1];

    if (!nextQuery) {
        return
    }

    return queryFn.bind(queryFn, nextQuery);
});

queriesWithArgs[0]();

but still getting error TypeError: secondQuery is not a function, while requests to 1.json and 2.json works fine fn2 seems to not receive fn3 as argument. Can you explain how it works ?

What is queryFn.bind(queryFn, nextQuery); supposed to achieve? — Bergi
– Bergi, Commented Mar 16, 2019 at 10:46
Ah, I guess you meant queryFn.bind(null, nextQuery); or simply () => queryfn(nextQuery)? — Bergi
– Bergi, Commented Mar 16, 2019 at 10:46
^^ null would make more sense as the first argument to bind there. — T.J. Crowder
– T.J. Crowder, Commented Mar 16, 2019 at 10:46

Bergi · Accepted Answer · 2019-03-16 10:51:25Z

2

You seem to think that the arr argument refers to the queriesWithArgs array, so that you can take your nextQuery from there. It doesn't, it refers to the original queries array and you are calling those nextQuery functions without a further argument.

Instead, the proper tool to use here is reduceRight, not map, where nextQuery accumulator will indeed refer to the previous result (or the initial value, here the last callback):

const queries = [fn1, fn2, fn3, fn4];

const run = queries.reduceRight((nextQuery, queryFn) => {
    return queryFn.bind(null, nextQuery);
}, function last() {
    console.log("done");
});

run();

answered Mar 16, 2019 at 10:51

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

6 Comments

VLAZ Over a year ago

This must be the first time I've seen a reduceRight being used actually for purpose here. Just an odd observation, I suppose.

T.J. Crowder Over a year ago

The callback version of the classic promise reduce trick. :-)

T.J. Crowder Over a year ago

In fact, assuming this $.get is jQuery as seems likely, you could use the promise reduce trick for something a bit more idiomatic (to my mind).

Евгений Литвиненко Over a year ago

oh got it, thanks. it's just a synthetic training task, so my purpose was dynamically create somehtnig like fn1.bind(fn2.bind(fn3.bind(fn4))) and then call fn1()

Bergi Over a year ago

@ЕвгенийЛитвиненко That run = fn1.bind(null, fn2.bind(null, fn3.bind(null, fn4.bind(null, last)))) is exactly what reduceRight is doing.

|

Collectives™ on Stack Overflow

bind arguments to function javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related