I've seen JavaScript code such as this:
let a = () => ({ id: 'abc', name: 'xyz' })
What do the parentheses ( … )
wrapping the object refer to in this instance? Is it a shorthand for return
?
The solution is to use parentheses. 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.
It's a new feature that introduced in ES6 and is called arrow function. The left part denotes the input of a function and the right part the output of that function.
Arrow functions can omit parentheses when they have exactly one parameter. In all other cases the parameter(s) must be wrapped in parentheses. This rule enforces the consistent use of parentheses in arrow functions.
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever. With arrow functions the this keyword always represents the object that defined the arrow function.
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.
It allows you to create an expression, so
let a = () => ({ id: 'abc', name: 'xyz' })
specifies that a
when invoked, returns the enclosed object
If you remove the ()
in this case, it will throw an error because it is not a valid function body statement, because the {}
in let a = () => { id: 'abc', name: 'xyz' }
are interpreted as the boundaries of a statement, but the content inside is not valid if you look at it.
let a = () => { id: 'abc', /* Not valid JS syntax */ name: 'xyz' }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With