What does it mean equal and greater-than sign (=>) in Javascript?

Question

In Meteor Whatsapp example project is file where "=>" is used, but my WebStorm IDE detect it as error. I can't find any docs about this syntax.

chats.forEach( chat => {
  let message = Messages.findOne({ chatId: { $exists: false } });
  chat.lastMessage = message;
  let chatId = Chats.insert(chat);
  Messages.update(message._id, { $set: { chatId: chatId } })
});

GitHub repository for bootstrap.js file is here

What is "=>" ?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — elclanrs, Oct 27 '15 at 18:40
That is a JavaScript lambda. Check this link out: http://www.codeproject.com/Tips/729737/JavaScript-Lambda-Expressions — ChaseHardin, Oct 27 '15 at 18:43

Jared Smith · Accepted Answer · 2016-04-06T18:13:50.187

6

I was actually about to downvote this question, but googling the answer proved surprisingly difficult if you don't already know what its called. As you can see in the links in the comments, that's a fat arrow function (sometimes referred to as just an arrow function).

There are some confusing aspects of arrow functions, so I'll hit some highlights:

Normal functions have a this pointer set depending on the context: functions called with new have it set to the newly-created object, functions called as methods have it bound to the object the method was called from, its otherwise bound to undefined or the global object (depending on the 'strict mode' pragma), and can of course be set with Function.prototype.bind et al.

But arrow functions have no binding for the this pointer created by the runtime (nor can it be specified via Function.prototype.bind), meaning it gets lexically looked up through scope chain resolution just like any other var. The MDN article is at best slightly confusing on this point (see link above).

Additionally, arrow functions have an implicit return, the return value will automatically be the last evaluated expression in the function body.

Arrow functions have no arguments psuedo-array. You can use ES 6 rest parameters instead.

For functions of arity 1, the parens around the parameter may be omitted.

edited Apr 06 '16 at 18:13

answered Oct 27 '15 at 18:47

Jared Smith

19,721
5
45
83

*"Although potentially a source of error, it enables getting a hold of the global object in any environment with native arrow function support"* I don't believe this to be true. Since `this` is lexically resolved, as you said, you would only get the global object if `this` in the current environment already resolves to the global object. I.e. `function foo() { 'use strict'; let _global = (() => { return this })(); }; foo();` will set `_global` to `undefined`. – Felix Kling Apr 06 '16 at 18:03
@FelixKling I am unaware of an environment where `this` in a top-level function does not reference the global object (for that environment) in non-strict mode. Strict mode is the problem, and AFAIK the reason for the System.global proposal. https://github.com/tc39/proposal-global – Jared Smith Apr 06 '16 at 18:06
Wait, did you mean that `let _global = (() => { return this })();` is executed in global scope? *"Strict mode is the problem"* Well, in global scope, `this` will always refer to the global object, even in strict mode. That has nothing to do with arrow functions. – Felix Kling Apr 06 '16 at 18:07
Correct. Defining it inside a function like that will obviously make it `undefined` because `this` is being set to undefined higher in the scope chain, but if the strict mode pragma is globally set (like say, in another file), that method I outlined should still work AFAIK. – Jared Smith Apr 06 '16 at 18:09
But again, since `this` inside the arrow function will resolve to whatever value `this` has in the environment the function was defined (and executed in this case), you could just do `let _global = this;`. Maybe not using `this` makes it clearer: `let x = 42; let y = (() => { return x })();` is the same as `let x = 42; let y = x;`. – Felix Kling Apr 06 '16 at 18:10
@FelixKling you're right, I'll fix. – Jared Smith Apr 06 '16 at 18:13

score 2 · Answer 2 · answered Oct 27 '15 at 18:46

2

That's an es6 arrow function. If you switch to WebStorms settings:

you can switch your javascript version to ecmascript 6 like shown in the picture to make WebStorm recoginze them properly.

answered Oct 27 '15 at 18:46

baao

71,625
17
143
203

What does it mean equal and greater-than sign (=>) in Javascript?

2 Answers2

Linked