0

I am studying JavaScript syntax. I occasionally see a pattern that confuses me: an equals sign on the right hand side of the arrow. For example, something like this:

.then(data => myVariable = data)

I don't know what is going on in that syntax. It looks like it is taking the value of data and assigning it to the variable named myVariable. Can somebody explain this?

Floern
  • 33,559
  • 24
  • 104
  • 119
code beginner
  • 285
  • 3
  • 14

2 Answers2

3

You're right. It's an arrow function (without an accompanying block) that "returns" an assignment expression - in effect doing an assignment of data's value to myVariable and returning the right hand side, though that might not be utilized in this case.

In a more simplified case:

let foo = 3;
function foobar(callback) {
  const result = callback(5); //call callback with 5 as argument
  console.log(result); //5
}
foobar(five => foo = five); //assigns 5 to foo
console.log(foo); //5

This is generally not the most readable option and your question proves this. I would recommend adding a block like so (if you don't intend on actually returning the right hand side value):

myPromise.then(data => {
  myVariable = data;
});

In which case there is no implicit return of the assignment expression's right hand side and makes the intent clearer. Also, assignments such as what you're doing right with what I assume to an asynchronous promise are not encouraged.

Maybe look into async/await or other new ES features to deal with asynchronous code other than using variable assignments which may run into some problems if not used correctly.

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
  • Thanks. It seems like arrow syntax makes things clearer to a point, but then the syntax gets less clear if it becomes too terse. Probably a medium amount of conciseness is optimal for readability. – code beginner May 05 '18 at 01:27
  • @codebeginner Yes. My rule of thumb is to never sacrifice readability for brevity. If a team member or coworker has to spend more than a few seconds trying to understand what the code syntactically does, then you might want to reconsider your terseness. – Andrew Li May 05 '18 at 01:31
  • @codebeginner to be honest, this isn't too obscure. Assignment (`=`) always returns the value assigned. So, in terms of pure operation, the function should be clear. The problem is *why* you'd do that. I did have to read your example a couple of times because it just makes little sense. So, it's a lack of clarity of purpose. It seems to be more or less [covering this](https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function?rq=1) old chestnut but in a roundabout way as it uses a promise to take the variable outside the promise. – VLAZ May 05 '18 at 01:55
0
This is called fat arrow function in ES 6 . It is used for many purposes like
1.Arguments
If we want to pass and argument to a function.
Old Syntax :
let sum = function(x,y){ 
                return x+y;
          }
New Syntax with fat arrow 
let sum = (x,y) => x+y; 

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });
console.log(setNameIdsEs6 (4, "Kyle"));   // Object {id: 4, name: "Kyle"}

Note : Return statement is not required in fat arrow of it is only one line .

2. Anonymous Function.

// ES5
API.prototype.get = function(resource) {
  var self = this;
  return new Promise(function(resolve, reject) {
    http.get(self.uri + resource, function(data) {
      resolve(data);
    });
  });
};
Using an arrow function, the same result can be achieved more concisely and clearly:

// ES6
API.prototype.get = function(resource) {
  return new Promise((resolve, reject) => {
    http.get(this.uri + resource, function(data) {
      resolve(data);
    });
  });
};
Prakash
  • 1
  • 1
  • 3