CODEWITHSUNDEEP
javascript
laksmi iragavarapu
laksmi iragavarapu

Reputation: 29

Why is arrow function sent as a parameter when it simply returns the value it takes as is?

I am new to JavaScript and I am learning React using the following tutorial.

It also teaches to use Alt as a state management library and my question is related to the connect method syntax. I am not explaining the problem in detail as I believe my question is only related to understanding the syntax.

I understand that here connect passes comma separated parameters as props to the component App. I however do not understand the first parameter.

The arrow functions I have come across all use {} after => such as () => {}, where parameters will be in () and body of the function will be in {}

My understanding of ({lanes}) => ({lanes}) is that this is a function that takes an array of objects named lanes and returns the same array .The code snippet is as below:

export default connect(({lanes}) => ({lanes}), {
    LaneActions
})(App)

My questions are:

  1. Am I right that the first parameter is indeed a function?
  2. is lanes enclosed in {} to specify it's an array? If no, what does it represent?
  3. If 1. is right, why pass a function that passes the parameter as is. Why not write connect as connect(lanes,LaneActions)(App) or connect({lanes},LaneActions)(App)
    Would enclosing lanes in {} make a difference and what is it?
  4. If 1. is wrong please explain what the first parameter means.

Upvotes: 0

Views: 109

Answers (1)

Soron
Soron

Reputation: 448

  1. Yes, that is indeed an arrow function.
  2. No, that is not an "array" in JS (although if you've used PHP, you might mistakenly call it that, since the PHP community often uses "(associative) array" for this concept). That's an "object" in JS jargon, i.e., a key-value data structure (whereas in JS, arrays are numerically indexed). Specifically, the left-hand side is a new feature called "destructuring arguments", which takes an object and pulls out specific keys into local variables. On the right-hand side, there's an object literal, creating a new object based on local data (note that the value is omitted, a trick possible in recent JS).
  3. Presumably because connect expects a callback as the first argument, and would break if you passed a non-function. Also, note that this isn't plain passthrough; it strips every key except lanes from the first argument, before returning it.
  4. Since (1) is right, no answer needed here.

5 & 6: These are a bit broad. I'd recommend asking a new question or checking MDN's page on arrow functions if you want to find out all there is to know. To answer for this specific case: the () on the argument is needed because the arguments are more complex than a single identifier, the {} in the arguments are for destructuring, the () on the body is to distinguish between an object literal and a block consisting only of the single statement lanes, and the {} in the body creates an object literal.

If you're wondering exactly what the (somewhat densely-coded) arrow function does, by the way, it does roughly the same thing as the following (give or take a few currently-irrelevant quirks of arrow functions):

function(obj) {
    return { lanes: obj.lanes };
}

Upvotes: 3

Related Questions