0

I tried looking at MDN on arrow functions, that links to an article ES6 In Depth: Arrow functions and the ECMAScript grammar. I didn't find an example of this style of function body.

See takeStockForBowl in example code below.

Question, what would this style of function definition be called?

Maybe it's a repurposing of a more basic JavaScript syntax and I just don't see it. Apologies if it's obvious.

const takeStockForBowl = bowl => ( // open paren
  takeForBowl('protein', bowl),    // side effect 1
  takeForBowl('grain', bowl),      // side effect 2
  takeForBowl('veg', bowl),        // ...
  bowl.supplied = true,            // side effect n
  bowl                             // result
)                                  // close paren
user3840170
  • 26,597
  • 4
  • 30
  • 62
Chuck Waggon
  • 77
  • 7
  • 2
    Damn that's a really hard abuse of the comma operator lol – kelsny May 22 '22 at 13:44
  • 1
    Writing comma separated expressions in order to avoid braces and an explicit `return` statement does not have a special name. I also would not encourage this kind of style for a multiline function body ... such results should be left to minifier tasks within build proccesses. – Peter Seliger May 22 '22 at 13:50

1 Answers1

3

First of all, takeStockForBowl is really hard to read.

To understand what's happening here, we need to understand two things:

Basically what the author has done here is avoided writing the following:

  • Explicit return statement
  • Curly braces for the function body

by taking advantage (or abusing) of implicit return in arrow function and the comma operator.

What comma operator does is it evaluates each of its operands from left to right and returns the value of the last operand which in this case is bowl.

More readable version of this function is:

const takeStockForBowl = bowl => {
  takeForBowl('protein', bowl);
  takeForBowl('grain', bowl);
  takeForBowl('veg', bowl);
  
  bowl.supplied = true;
  
  return bowl;                
}
Yousaf
  • 27,861
  • 6
  • 44
  • 69
  • Thank you, your answer is very informative, I'll select it. I would say though, the closest I got to a name for this was the link on Comma operator, but that's not the name of the result of using the operator, in that link they say the result is _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_ - that is a very long winded way to avoid using the name for this construct if it has one. – Chuck Waggon May 22 '22 at 13:57
  • This syntax has no official name. It's just hard-to-read code written by using the language features (comma operator, implicit arrow function return) – Yousaf May 22 '22 at 14:03
  • 1
    It’s really hard to read, because it uses a comma instead of a semicolon and round brackets instead of curly ones? – user3840170 May 22 '22 at 14:13
  • 1
    @user3840170 yes. Read the comma version and the one at the end of my answer; Which version conveys its intention clearly? Note: Semi-colon is optional in this case anyways. – Yousaf May 22 '22 at 14:17