What is the meaning or interpretation of this ES6 function

Question

The title is not good and I'll edit it as soon as I find out a name for this.

I've been learning Redux and it's the first place I've seen this kind of function.

export default connect(null, actionCreators)(TodoApp)

I can't get my head around, clearly "null" and "actionCreators" are params passed to the connect function, but what is "(TodoApp)" doing?

`connect(null, actionCreators)` returns an anonymous function to which `TodoApp` is passed to. — , Jul 13 '16 at 06:58

score 2 · Accepted Answer · edited Jul 13 '16 at 07:11

2

Javascript supports first class functions this is, they can be passed around like normal data. So connect(null, actionCreators) returns an anonymous function to which TodoApp is passed to.

A simple understandable example would be:

var obj = {
  name: "Test",
  age: 10
}

var f = () => {
  // Do whatever f function should do
  
  // Return an anonymous function that takes in an object as parameter
  return (obj) => {
    
    // Do whatever we want to to with the object
    console.log(obj.name)
  }
}

// These two methods are equivalent
  // 1.- 
  f()(obj);

  // 2.-
  var f2 = f();
  f2(obj);

edited Jul 13 '16 at 07:11

Borjante

9,767
6
35
61

answered Jul 13 '16 at 07:07

2

@Borjante You've explained it yourself somehow :D – Jul 13 '16 at 07:12
Well, tanks to your initial comment I have done some tests to make sure I get the idea behind correctly – Borjante Jul 13 '16 at 07:14

Himanshu Tyagi · Answer 2 · 2016-07-13T07:12:13.497

connect(null, actionCreators)(TodoApp);

is as good as :

var fun = connect(null, actionCreators);
fun(TodoApp);

Its something like this :

function connect(val1,val2){
  console.log(val1,val2);
  return function(val3){
    console.log(val3);  
  }
}

var actionCreators = "X";
var TodoApp = "Some Object";

connect(null, actionCreators)(TodoApp);

As you can see, connect takes two inputs,

Returns an anonymous method, which takes one input.

What is the meaning or interpretation of this ES6 function

2 Answers2