How do understand a function that immediately returns another function [duplicate]

Question

export const createProject = (project) => {
  return (dispatch, getState, {getFirestore}) => {
    // make async call to database
    const firestore = getFirestore();
    firestore.collection('projects').add({
      ...project,
      authorFirstName: 'Net',
      authorLastName: 'Ninja',
      authorId: 12345,
      createdAt: new Date()
    }).then(() => {
      dispatch({ type: 'CREATE_PROJECT_SUCCESS' });
    }).catch(err => {
      dispatch({ type: 'CREATE_PROJECT_ERROR' }, err);
    });
  }
};

My question is about this line.

return (dispatch, getState, {getFirestore}) => {...

What makes this work? Where do the arguments come from? What calls them? Aren't all these arguments already in scope? Why do we need createProject to return a second function? Is createProject returning a second function? Or is it immediately invoking an inline function? What triggers the return function to run?

I'm just generally very confused by this pattern. Can someone please break it down for me?

Presumably the caller of createProject is expecting a function returned and will call the returned function with the dispatch, getState, {getFirestore} arguments. createProject looks like a function factory (ish). — Carcigenicate
– Carcigenicate, Commented Apr 18, 2019 at 19:31
@VLAZ Isn't it only classified as currying if each function in turn only takes 1 argument itself? This doesn't strike me as currying, just a typical higher order function. — Carcigenicate
– Carcigenicate, Commented Apr 18, 2019 at 19:32
@Carcigenicate technically yes, but it's more formally tranforming f(a, b, c) into being evaluated into steps where each satisfies the parameter. Some implementations do only allow you to turn the steps into f(a) -> g(b) -> h(c) while others make it also possible to go with f(a) -> g(b, c). Besides, I can't really find a better duplicate than the concept of currying. Surely once one has that down, the arity of the functions is irrelevant to the result. — VLAZ
– VLAZ, Commented Apr 18, 2019 at 19:37

Jarek Kulikowski · Accepted Answer · 2019-04-18 19:41:45Z

2

Starting with the simplest pattern:

function outter(outterArg) {
  return function(innerArg) {
     console.log(outterArg, innerArg  )
  }
}
let retFunction = outter('outterValue')
// retFunction is that function returned from outter
// now call the retFunction
retFunction('innerValue')

// or call them on one line
outter('oneLineOutter')('oneLineInner')

edited Apr 18, 2019 at 19:41

answered Apr 18, 2019 at 19:38

Jarek Kulikowski

1,3898 silver badges9 bronze badges

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

3 Comments

Carcigenicate Over a year ago

I'm personally hesitant to mark this as a duplicate of the currying post, but if you're just going to post a simple example of currying, it would have been better to just vote on VLAZ's dupe post which contains far more information.

MKougiouris Over a year ago

close and redirect to stackoverflow.com/questions/36314/what-is-currying ? All this lad needed was that this method is called "currying", now he can do some proper googling!

Jarek Kulikowski Over a year ago

@Carcigenicate, Technically it is a duplicate, but this one is so quick and simple, some folks might like it.

Code-Apprentice · Accepted Answer · 2019-04-18 21:18:00Z

1

Where do the arguments come from?

Just like any other function, arguments are passed in when you call the function.

What calls them?

The returned function is called elsewhere. In this case, redux or react will call your createProject() function and get its return value. Then it will call the returned function with the appropriate parameters.

Why do we need createProject to return a second function?

Redux is full of this pattern where you have a function which returns another function.

Is createProject returning a second function?

Yes it is.

Or is it immediately invoking an inline function?

No it is invoked later.

What triggers the return function to run?

Redux eventually calls the returned function to run it.

edited Apr 18, 2019 at 21:18

answered Apr 18, 2019 at 19:44

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

2 Comments

Let Me Tink About It Over a year ago

+1 but where, in the source code linked here does Redux call the inner function to run it?

Code-Apprentice Over a year ago

@Mowzer The inner function is not called anywhere in that code which you linked because it isn't the source code for redux. Rather it is a library which uses redux to connect to firebase.

Collectives™ on Stack Overflow

How do understand a function that immediately returns another function [duplicate]

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related