Lambda functions in short-circuits throw syntax-errors at build time

[joelgriffith]

let percentFormatter = this.props.percentFormatter || (val) => {
  return Math.floor(val * 100) + '%';
};

This chunk of code will throw an error on build (I'm using gulp, browserify, and gulp-babel):

SyntaxError: myFile.jsx: Unexpected token (50:1)
  48 |  }
  49 |
> 50 |  render() {
     |  ^
  51 |      let percentDelivered = this.percentFormatter(this.props.numerator/ this.props.denominator);
  52 |      let percentIntoFlight = this.percentFormatter(this.props.percentComplete);
  53 |
    at Parser.pp.raise (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/location.js:73:13)
    at Parser.pp.unexpected (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/parseutil.js:87:8)
    at Parser.pp.expect (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/parseutil.js:81:26)
    at Parser.pp.parseObj (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/expression.js:555:12)
    at Parser.pp.parseExprAtom (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/expression.js:369:19)
    at Parser.parseExprAtom (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/node_modules/acorn-jsx/inject.js:624:24)
    at Parser.pp.parseExprSubscripts (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/expression.js:217:19)
    at Parser.pp.parseMaybeUnary (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/expression.js:199:19)
    at Parser.pp.parseExprOps (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/expression.js:155:19)
    at Parser.pp.parseMaybeConditional (/Users/jgriffith/Projects/anx-react/node_modules/babelify/node_modules/babel-core/lib/acorn/src/expression.js:138:19)

Could be an issue in babelify, but wanted to check here to see if this is an issue anyone else has encountered, not seeing it in any previous issues.

I'm fairly certain that this is syntax is valid, but this may not be possible. Handing it an anonymous function works at build time, so I imagine lambda functions would work as well.

[fkling]

|| has a higher precedence than =>, i.e. this is evaluated as

(this.props.percentFormatter || (val)) => {...}

which is clearly an error.

Use the grouping operator:

this.props.percentFormatter || ((val) => {...})

Source: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-expressions

[joelgriffith]

TIL!

Very good, thanks for the info.