Ecmascript 6 Arrow Function That Returns an Object

ECMAScript 6 arrow function that returns an object

You must wrap the returning object literal into parentheses. Otherwise curly braces will be considered to denote the function’s body. The following works:

p => ({ foo: 'bar' });

You don't need to wrap any other expression into parentheses:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

and so on.

Reference: MDN - Returning object literals

Arrow Function Created In An Object Returns undefined When Called Using .call() Method

Arrow functions don't bind to this as function do. That's one of the main reason they were introduced (probably the most important one).

You cannot even bind them.

Return object from arrow function

somemethod(item => ({ id: item.id }))

Test:

> a = item => ({id: item.id})
< function item => ({id: item.id})
> a({ id: 5, name: 7 });
< Object {id: 5}

Returning Object Literals from ES6 arrow function

This piece of code const updatedPosts = posts.map(data => { ...data, author : 'Leo' } ) is actually possible but you have to put parenthesis around the object which gives you

const updatedPosts = posts.map(data => ({ ...data, author : 'Leo' }))

You can find the explanation in the Returning Object Literals section of this documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

How to return anonymous object from one liner arrow function in javascript?

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.)

Arrow Function returns undefined when called from an object but returns a string when called from a class instance

In your first example, there is no parent function around the arrow function definition, so it does indeed bind to the global this. An arrow function is not a method of the object.

In your second example, you are using class field syntax. This is actually syntactic sugar for

class Student {
  constructor() {
    this.name = 'abc'
    this.myDes = () => {
      console.log(this.name)
    }
  }
}

where the parent function is the constructor of the class, whose this value refers to the instance. This is also the value that the this inside the arrow function will refer to.

---

Related Topics