Search code examples
javascriptobjectarrow-functions

Anonymous arrow functions in objects

How is it that this syntax works:

let foo = 0; // or 1
let bar = {
   foo: foo || function (x) { return 'foo ' + x; }
};

// If foo is 0
bar.foo('bar'); // Returns 'foo bar'
// If foo is 1
bar.foo; // Returns 1

and this one doesn't:

let foo = 0; // or 1
let bar = {
   foo: foo || (x) => { return 'foo ' + x; }
};

If I try to run the bottom example, I get the Malformed arrow function parameter list error in the console. How is it Malformed, and what would the correct syntax be to get the same functionality as the top example?

Solution

  • The issue is that the arrow function doesn't know how to group the parameters. You should wrap the function in parenthesis as such:

    let foo = 1
let bar = {
   foo: foo || (x => { return 'foo ' + x; })
};