92

I recently switched to es6 and started using arrow functions all over my code. While refactoring I came across below code

data.map(function(d) {
   return {id: d.id, selected: bool};
});

I changed above code to this -

data.map((d) => {id: d.id, selected: bool});

But I was getting error from above code. I don't know what is wrong here? I know that If there is no block of code then there is implicit return provided by arrow function.

But don't know how to return empty object or anonymous object with some properties initialized ?

Edit:

What is wrong if I do it in this way? Just for curiosity sake.

data.map((d) => new {id: d.id, selected: bool});
WitVault
  • 23,445
  • 19
  • 103
  • 133
  • 2
    here's an interesting slightly related read which I found while studying this topic https://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ (especially points 2 and 4) – cregox Apr 05 '17 at 03:20
  • Regarding your edit, this will throw a TypeError. The `new` keyword requires a constructor. You could do `new Object({id: d.id, selected: bool})`, but this would first create the literal object (using `{...}` syntax) and then copy it to another object (using the `new Object(...)` constructor). Better to use parentheses as in Pointy's answer – Quantum7 May 16 '18 at 09:32

3 Answers3

190

Put parens around the object initializer:

data.map((d) => ({id: d.id, selected: bool}) );

Parentheses have no effect on the value of the expression inside them, but they do have the syntactic effect of eliminating the ambiguity of the first token of the contained expression. Without the parentheses, the JavaScript parser has to decide whether the { token means "Here starts a function body" or "Here starts an object initializer." It always chooses the former (that is, a block of code).

Introducing the parentheses, therefore, eliminates the confusion: the only thing that a leading ( can mean is "here comes an expression", so that { inside the parentheses can only be "here comes an object initializer." (You can't drop a block of code in the middle of an expression, in other words; if you try, then you'll get a syntax error.)

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 2
    Will you please explain edited part as well? – WitVault Jun 24 '16 at 14:19
  • 1
    @WitVault it's wrong to use `new` because `new` only works when what comes after it is a reference to a function. If you tried that, you'd also get an error. – Pointy Jun 24 '16 at 14:22
  • 1
    You are right I got the error. But just wanted to understand what is happening underhood. – WitVault Jun 24 '16 at 14:31
  • @WitVault there are other things you could do to disambiguate the `{`, but parentheses are the least "weird" thing probably. – Pointy Jun 24 '16 at 19:54
  • Hmm. I don't like it, but fine. I also think it should be `new { ... }`. – Josh M. Oct 05 '16 at 13:33
  • 1
    @JoshM. well in JavaScript `new` followed by an object literal or object reference *never* makes sense. The `new` operator only works with functions. – Pointy Oct 05 '16 at 13:38
  • 1
    I understand that's how it works _now_, but when arrow functions/lambdas were introduced, it seems the purpose of `new` could have been extended to make this a bit more clean. – Josh M. Oct 05 '16 at 13:39
  • 1
    is there any reason to keep the parenthes[e](http://english.stackexchange.com/questions/130219/parentheses-vs-parenthesis)s in `(d)` though? – cregox Apr 05 '17 at 03:12
  • @cregox no those are optional. I'm old-fashioned :) – Pointy Sep 10 '18 at 20:16
  • 1
    Ok, but why using the parentheses for input parameter? It works without it as well. – Alexander Jul 28 '20 at 17:57
  • @Alexander habit – Pointy Jul 28 '20 at 18:53
2

Hi I think you need to add paranthesis to return object literal

// Parenthesize the body to return an object literal expression: params => ({foo: bar})

from https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

saurabh vyas
  • 115
  • 1
  • 10
  • +1; Specifically under the section [Advanced Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Advanced_syntax). – AnorZaken Oct 13 '20 at 12:39
1

You can also use 

data.map((d) => {
    return {id: d.id, selected: bool}
} );
Piyush.kapoor
  • 6,715
  • 1
  • 21
  • 21