A Javascript Mystery...

arrows-and-literals.js

var inlineArrowFunc = (x, y) => true;

var multilineArrowFunc = (x, y) => {
  console.log(x);
  return x + y;
};

var objectLiteral = { content: true };

gotoLabel:

// Now here's the puzzle: What is this?

var mysteryBox = (x, y) => { content: x + y };

// If you guessed 'a function that returns an object literal', you're wrong!
// If you guessed 'syntax error', you're wrong!
// If you guessed 'linter error', you're wrong!
// If you guessed 'a function that has a label with the symbol `content`,
//   evaluates and discards the expression `x + y`, and then returns `undefined`,
//   you're right and also probably suicidal by this point.
// Syntax overloading kills, folks!

// Oh, and object literals with multiple properties?
var brokenMysteryBox = (x, y) => { a: x, b: y };
// --> Uncaught SyntaxError: Unexpected token :

// Wrapping the literal in parentheses forces it to be parsed as an expression.
var wrappedLiteral = (x, y) => ({ content: x + y });

// Using block syntax explicitly prevents the inner object's braces
//   from being parsed as a block.
var blockArrowLiteral = (x, y) => { return { content: x + y }; };

// Thanks to Luke Willis: ESLint rules to help catch this when it occurs
{
  "rules": {
    "no-labels": ["error", { "allowSwitch": true }],
    "semi": "error" // optional, my preference
  }
}