Javascript Newbie Question: What is This Syntax?

react
1

I’ve written tons of jQuery code, but of course jQuery insulates you from Javascript.

In learning Meteor/Mantra/React, I often see things like this:

const Clock = compose(composerFunction)(Time);

If it were just:

const Clock = compose(composerFunction);

…I would expect composerFunction to be a parameter passed to a function named compose. But what’s that (Time) doing at the end of it? I’m reading lots of articles about React composers, containers and components, but I haven’t found out what this is yet. Is it another parameter? A callback? Some sort of function or method chaining?

If I just get the name of it I can look it up and find out all about it.

Thanks very much in advance to all for any info.

2

compose (in that context) is defined here:

https://github.com/kadirahq/react-komposer/blob/master/lib/index.js

That function takes a function that creates a higher order component. It returns a function which accepts a child component and returns the composed component.

so const Clock = compose(composerFunction)(Time); is two steps.

  1. const composed = compose(composerFunction); composed is a function that takes a child component (among other things).
  2. const Clock = composed(Time); which returns a complete higher order component.

This just might be a little too abstracted but for sure those snippets just don’t have enough context to comprehend on their own. I had to follow the link and do some hunting after that to figure out what that function was and what it did.

1 Like
3

Try looking up self-invoking functions.

1 Like
4

So compose(composerFunction) returns a function, which is then called with the parameter (Time). Is that correct?

2 Likes
5

Yes, and in this case, Time is actually another component class. Thus when Time is passed in, it returns a composed higher order function. which wraps Time and does something with it (or to it)

1 Like
6

Thanks very much, @lassombra!