What Do Multiple Arrow Functions Mean in JavaScript

Confusion about multi-parameter multi-arrow functions in JS

addLead is a function that returns a function. Here's the same thing using function body syntax instead of concise body syntax, which may be clearer:

export const addLead = (lead) => {
    return (dispatch, getState) => {
        axios
            .post('/api/leads/', lead, tokenConfig(getState))
            .then(........)
    };
}

So you'd call addLead to get a function with lead bound to it:

const f = addLead("some lead");

...and then call that with dispatch and state as appropriate:

f("dispatch", "state");

---

Side note: It's a bit odd (without more context) that the function addLead returns doesn't return the result of calling axios. I would have expected it to be:

export const addLead = (lead) => (dispatch, getState) => 
    axios
        .post('/api/leads/', lead, tokenConfig(getState))
        .then(........);

which is:

export const addLead = (lead) => {
    return (dispatch, getState) => {
        return axios
            .post('/api/leads/', lead, tokenConfig(getState))
            .then(........);
    };
};

javascript es6 double arrow functions

The answer to your first question is more or less (see my comment). The answer to your second question is that the pattern you are seeing is a combination of using a closure and currying. The original parameters to the exported function get gathered into an array called 'middlewares' that the returned functions close over (i.e. have access to). The function then can be called again with yet another parameter 'createStore' then another function is returned that can accept even more parameters. This allows one to partially apply the parameters. For a more trivial (and perhaps more easily comprehended) example, lets take a function called 'add' that adds two numbers:

let add = (x, y) => x + y;

Not very interesting. But lets break it up so it can take the first number and return a function that takes the second:

let add = x => y => x + y;
let add3 = add(3);
let seven = add3(4); // 7

This may not seem like a big win for our add function, but you started with a much more reasonable real-world example. Additionally, rather than currying manually it is possible (and desirable) to use a curry function that does it for you, many popular libraries (lodash, underscore, ramda) implement curry for you. An example using Ramda:

let add = R.curry((x, y) => x + y);
let add3 = add(3);
let five = add3(2);
let also5 = add(3, 2);
let still5 = add(3)(2); // all are equivalent.

Understanding nested arrow functions ES6

The code below:

const logger = store => next => action => { return 'something'; }

Is the equivalent of:

const logger = function(store) { 
    return function(next) {
        return function(action) {
            return 'something';
        }
    }
}

And it can be called like below:

var something = logger(store)(next)(action);

Arrow function with multiple statements in one line

Essentially it allows you to do multiple operations in a single statement. It's used commonly in for loops and to assign multiple variables in a single statment, eg.: var a = 1, b = 2;.

Just because it works though, doesn't mean it's a good idea. It makes your code less readable and harder to debug.

See the MDN docs on the Comma Operator.

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a for loop.

What does double arrow function mean in Javascript?

This has nothing to do with arrow functions. It has to do with the then method on promises.

With a promise's then method, the first argument is a fulfillment handleer and the second is a rejection handler. If the promise is fulfilled, the first is called with the fulfillment value. If the promise is rejected, the second is called with the rejection reason. Only one or the other (if either) will be called, never both (for the same promise).

Here's a slightly edited version of the function partially shown in the qusetion, with some names changed and the return true; removed (because I couldn't figure out where it was meant to be):

async check({ commit }) {
    await axios.get('check')
    .then(
        (value) => {                       // ***
            // Use the fulfillment value   // *** fulfillment handler
        },                                 // ***

        (reason) => {                      // ***
            // Deal with the rejection     // *** rejection handler
        }                                  // ***
    );
});

See MDN or the Promises A+ specification that JavaScript's promises are based on.

---

It's probably worth noting that there's no particular reason to make this specific function an async function unless the goal is specifically to hide any fulfillment value the promise may have (or the rejection handler may supply). It does that, though, so perhaps that's the purpose.

How to combine two arrow function?

onClick = {(e) => { setSelectedItem("List A"); e.stopPropagation() }}

---

Related Topics