12

I initiated a JavaScript/jQuery click listener like this:

$("#test").on("click", () => {
   console.log("test");
});

This piece of code works perfectly fine in Firefox but in Chrome this seems to give me a Syntax error. Why is this, since this looks like 'ok' syntax to me.

You can test this quickly in the console by doing

 var a = () => {return 0;}
 a();

In Firefox 27.0.1 this returns 0 In Chrome it returns SyntaxError: Unexpected token )

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Biketire
  • 2,019
  • 1
  • 23
  • 41
  • 4
    What background you have so that lambda expressions are "ok syntax to you"? Everyone is excited to have it finally in the draft but it takes time until the draft is accepted and the feature is implemented. There were never lambdas in javascript before. – Wiktor Zychla Feb 18 '14 at 14:32
  • @WiktorZychla - Perhaps he got it [from CoffeeScript](http://coffeescript.org/#fat-arrow)? Just a guess though. – James Allardice Feb 18 '14 at 14:44
  • @JamesAllardice: or TypeScript, that's why I am curious. – Wiktor Zychla Feb 18 '14 at 14:50
  • @WiktorZychla no, lambdas have been there for ages - this is just a new syntax ;-) eg:var a = function(){return 0;}; ... also $("#test").on("click", function(){ console.log("test"); }); – imma Jul 28 '14 at 10:06
  • 2
    @imma: most people asked what is the difference will not recognize anonymous functions as "lambdas" just because "lambda" commonly refers to the new "arrow syntax". Technically then you wre right but the question is specifically about the new syntax. – Wiktor Zychla Jul 28 '14 at 10:18

1 Answers1

33

The fat arrow is a feature of ES6 (now officially called ECMAScript 2015). It's been introduced in Firefox but not yet in other browsers (and especially not completely in V8 which would be interesting for nodejs/iojs development).

As it's mostly sugar, you'd better wait before using it.

If you need the scope binding (this is the same in the function call and in the scope in which the function was defined, we speak of "lexical this"), then instead of

$("#test").on("click", () => {
   some code
});

you can simply do

$("#test").on("click", (function() {
   some code
}).bind(this));

If you don't (as in your example), then simply do

$("#test").on("click", function() {
   console.log("test");
});
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • In the second sample you don't need the parenthesis around the function. `$("#test").on("click", function() { some code }.bind(this));` Is valid – plus- Dec 10 '14 at 08:44
  • @plus- right, but it's only because it's in a place where an expression is expected (you couldn't have `function() { some code }.bind(this)` outside, or in the console). Just like with semicolon, I prefer to keep one always working syntax. It's also easier to read in my opinion. – Denys Séguret Dec 10 '14 at 09:31
  • Functions defined with arrow syntax are bound to window by default. Their equivalent would be `function() { some code }.bind(Window)` – Marco Luglio Feb 03 '15 at 17:10
  • 3
    @MarcoLuglio You got it wrong. Please have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this – Denys Séguret Feb 03 '15 at 17:16
  • so please clarify how is `this` getting defined in fat arrow function, im having javascript crisis – Muhammad Umer Jul 05 '15 at 18:54
  • 1
    Awesome !!. I tried it in Chrome (Version 48.0.2564.97 (64-bit) ) recently and found it working. Have a look. – Raju Singh Feb 05 '16 at 19:17
  • Yes it's working in all major browsers now (this answer is one year old). – Denys Séguret Feb 05 '16 at 19:23