What do the parentheses wrapping the object literal in an arrow function mean? [duplicate]

No. Those parentheses produce an object literal. Arrow functions have many syntaxes, one of which is:

( … ) => expression

This will implicitly return an expression, for example:

() => 1 + 1

This function will implicitly return 1 + 1, which is 2. Another one is this:

( … ) => { … }

This will create a block to house multiple statements if you don’t want to implicitly return an expression, and if you want to do intermediate calculations or not return a value at all. For example:

() => {
  const user = getUserFromDatabase();
  console.log(user.firstName, user.lastName);
}

The problem arises when you want to implicitly return an object literal. You can’t use ( … ) => { … } because it’ll be interpreted as a block. The solution is to use parentheses.

The parentheses are there for the { … } to be interpreted an object literal, not a block. In the grouping operator, ( … ), only expressions can exist within them. Blocks are not expressions but object literals are, thus an object literal is assumed. Thus, instead of creating a block, it will use this syntax:

( … ) => expression

And implicitly return an object literal. Without the parentheses, it will be interpreted as labels and strings, not keys and values of an object literal.

let a = () => { 
  id: 'abc', //interpreted as label with string then comma operator
  name: 'xyz' // interpreted as label (throws syntax error)
}

The comma here would be interpreted as the comma operator, and since the operands must be expressions, and labels are statements, it will throw a syntax error.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)