I want to transform this code:

    var formatQuoteAmount = function (tx) {
        return Currency.toSmallestSubunit(tx.usd, &#39;USD&#39;);
    };
    var quoteAmounts = res.transactions.map(formatQuoteAmount);


into an anonymous arrow function. I&#39;ve written this:
    
    var quoteAmounts = res.transactions.map(tx =&gt; Currency.toSmallestSubunit(tx.usd, &#39;USD&#39;));

I get `expression expected` syntax error at the arrow. I looked up [the default syntax here][1] and seems like the syntax of my code is correct. Any ideas what the problem might be?

I have it working with this syntax:
    
        var quoteAmounts = res.transactions.map(function (tx) {
            return Currency.toSmallestSubunit(tx.usd, &#39;USD&#39;)
        });

but I want to make it a one-liner, with an arrow-function.

Running on `node v5.3.0`

  [1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Shorter_functions

Arrow function &quot;expression expected&quot; syntax error

I am using ReactJS with Babel and Webpack and using ES6 as well as the [proposed class fields][1] for arrow functions. I understand that arrow functions make things more efficient by [not recreating the functions each render][2] similar to how binding in the constructor works. However, I am not 100% sure if I am using them correctly. The following is a simplified section of my code in three different files.

**My code:**

Main.js

    prevItem = () =&gt; {
	    console.log(&quot;Div is clicked&quot;)
    }
    
    render(){
        return (
             &lt;SecondClass prevItem={this.prevItem} /&gt;
        )
    }

SecondClass.js

    &lt;ThirdClass type=&quot;prev&quot; onClick={()=&gt;this.props.prevItem()} /&gt;

ThirdClass.js

	&lt;div onClick={()=&gt;{this.props.onClick()}}&gt;Previous&lt;/div&gt;

**Question:**

Is my code above using the arrow functions correctly? I noticed that for SecondClass.js I could have also used:

    &lt;ThirdClass type=&quot;prev&quot; onClick={this.props.prevItem} /&gt;

Is there a difference between one method or the other since I used an ES6 arrow function in my original function definition? Or should I be using the arrow syntax all the way through until my last div?


  [1]: https://github.com/tc39/proposal-class-fields
  [2]: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

Correct use of arrow functions in React

It seems to me that, in ES6, the following two functions are very *nearly* identical:

    function () {
      return this;
    }.bind(this);

    () =&gt; {
      return this;
    };

The end result seems the same: arrow functions produce a JavaScript function object with their `this` context bound to the same value as the `this` where they are created.

Obviously, in the general sense, `Function.prototype.bind` is more flexible than arrow functions: it can bind to values other than the local `this`, and it can bind any function&#39;s `this` at any point in time, potentially long after it is initially created. However, I&#39;m not asking how `bind` itself is different from arrow functions, I&#39;m asking how arrow functions differ from immediately calling `bind` with `this`.

Are there any differences between the two constructs in ES6?

What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

    (() =&gt; console.log(arguments))(1,2,3);

    // Chrome, FF, Node give &quot;1,2,3&quot;
    // Babel gives &quot;arguments is not defined&quot; from parent scope

According to Babel (and from what I can tell initial TC39 recommendations), that is &quot;invalid&quot; as arrow functions should be using their parent scope for arguments.  The only info I&#39;ve been able to find that contradicts this is a single comment saying this was rejected by TC39, but I can&#39;t find anything to back this up.

Just looking for official docs here.

Official information on `arguments` in ES6 Arrow functions?

When ES6 Arrow functions don&#39;t seem to work for assigning a function to an object with prototype.object. Consider the following examples:

    function Animal(name, type){
     this.name = name;
      this.type = type;
      this.toString = () =&gt; `${this.name} is a ${this.type}`;
      
    }
    var myDog = new Animal(&#39;Max&#39;, &#39;Dog&#39;);
    console.log(myDog.toString()); //Max is a Dog

Using the arrow function explicitly in the object definition works, but using the arrow functions with the Object.prototype syntax does not:

    function Animal2(name, type){
      this.name = name;
      this.type = type;
    }
    Animal2.prototype.toString = () =&gt; `${this.name} is a ${this.type}`;
    
    var myPet2 = new Animal2(&#39;Noah&#39;, &#39;cat&#39;);
    console.log(myPet2.toString()); //is a undefined

Just as a proof of concept, using the Template string syntax with Object.prototype syntax does work:

    function Animal3(name, type){
      this.name = name;
      this.type = type;
    }
    Animal3.prototype.toString = function(){ return `${this.name} is a ${this.type}`;}
    
    var myPet3 = new Animal3(&#39;Joey&#39;, &#39;Kangaroo&#39;);
    console.log(myPet3.toString()); //Joey is a Kangaroo

Am I missing something obvious? I feel that example 2 should work logically, but I am puzzled by the output. I&#39;m guessing it is a scoping issue, but I am thrown off by the output &#39;is a undefined&#39;.

[ES6 Fiddle][1]


  [1]: http://www.es6fiddle.net/ics4dh0m/

ES6 arrow functions not working on the prototype?

I have a function that I am trying to convert to the new arrow syntax in **ES6**.  It is a named function:

    function sayHello(name) {
        console.log(name + &#39; says hello&#39;);
    }
Is there a way to give it a name without a var statement:

    var sayHello = (name) =&gt; {
        console.log(name + &#39; says hello&#39;);
    }

Obviously, I can only use this function after I have defined it.  Something like following:

    sayHello = (name) =&gt; {
            console.log(name + &#39; says hello&#39;);
        }


Is there a new way to do this in **ES6**?



How do I write a named arrow function in ES2015?

I&#39;m new to using ES6 classes with React, previously I&#39;ve been binding my methods to the current object (show in first example), but does ES6 allow me to permanently bind a class function to a class instance with arrows? (Useful when passing as a callback function.) I get errors when I try to use them as you can with CoffeeScript:

    class SomeClass extends React.Component {
    
      // Instead of this
      constructor(){
        this.handleInputChange = this.handleInputChange.bind(this)
      }
    
      // Can I somehow do this? Am i just getting the syntax wrong?
      handleInputChange (val) =&gt; {
        console.log(&#39;selectionMade: &#39;, val);
      }


So that if I were to pass `SomeClass.handleInputChange` to, for instance `setTimeout`, it would be scoped to the class instance, and not the `window` object.

How to use arrow functions (public class fields) as class methods?

The new [ES6 arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) say `return` is implicit under some circumstances:

&gt; The expression is also the implicit return value of that function.

In what cases do I need to use `return` with ES6 arrow functions?

When should I use a return statement in ES6 arrow functions

Why does this work in a Node.js console (tested in 4.1.1 and 5.3.0), but doesn&#39;t work in the browser (tested in Chrome)?

This code block should create and invoke an anonymous function that logs `Ok`.

    () =&gt; {
      console.log(&#39;Ok&#39;);
    }()

Also, while the above **works** in Node.js, this does not work:

    n =&gt; {
      console.log(&#39;Ok&#39;);
    }()

Nor this:

    (n) =&gt; {
      console.log(&#39;Ok&#39;);
    }()


It is odd that when the parameter is added, it actually throws a `SyntaxError` at the immediately-invoking part.





ES6 immediately invoked arrow function

I can mark a JavaScript function as &quot;async&quot; (i.e., returning a promise) with the `async` keyword. Like this:

    async function foo() {
      // Do something
    }

What is the equivalent syntax for arrow functions?



Syntax for an async arrow function

When returning an object from an arrow function, it seems that it is necessary to use an extra set of `{}` and a `return` keyword because of an ambiguity in the grammar.

That means I can’t write `p =&gt; {foo: &quot;bar&quot;}`, but have to write `p =&gt; { return {foo: &quot;bar&quot;}; }`.

If the arrow function returns anything other than an object, the `{}` and `return` are unnecessary, e.g.: `p =&gt; &quot;foo&quot;`.

`p =&gt; {foo: &quot;bar&quot;}` returns `undefined`.

A modified `p =&gt; {&quot;foo&quot;: &quot;bar&quot;}` throws _“`SyntaxError`: unexpected token: &#39;`:`&#39;”_.

Is there something obvious I am missing?

ECMAScript 6 arrow function that returns an object

Arrow functions in ES2015 provide a more concise syntax. 

- Can I replace all my function declarations / expressions with arrow functions now? 
- What do I have to look out for?

Examples:

Constructor function

    function User(name) {
      this.name = name;
    }

    // vs

    const User = name =&gt; {
      this.name = name;
    };

    
Prototype methods

    User.prototype.getName = function() {
      return this.name;
    };

    // vs

    User.prototype.getName = () =&gt; this.name;

Object (literal) methods

    const obj = {
      getName: function() {
        // ...
      }
    };

    // vs

    const obj = {
      getName: () =&gt; {
        // ...
      }
    };
    

Callbacks

    setTimeout(function() {
      // ...
    }, 500);

    // vs

    setTimeout(() =&gt; {
      // ...
    }, 500);


Variadic functions

    function sum() {
      let args = [].slice.call(arguments);
      // ...
    }

    // vs
    const sum = (...args) =&gt; {
      // ...
    };

Are &#39;Arrow Functions&#39; and &#39;Functions&#39; equivalent / interchangeable?

I came across this construct in an Angular example and I wonder why this is chosen:

    _ =&gt; console.log(&#39;Not using any parameters&#39;);

I understand that the variable `_` means don&#39;t care/not used but since it is the only variable is there any reason to prefer the use of `_` over:

    () =&gt; console.log(&#39;Not using any parameters&#39;);

Surely this can&#39;t be about one character less to type. The `()` syntax conveys the intent better in my opinion and is also more type specific because otherwise I think the first example should have looked like this:

    (_: any) =&gt; console.log(&#39;Not using any parameters&#39;);

In case it matters, this was the context where it was used:

    submit(query: string): void {
        this.router.navigate([&#39;search&#39;], { queryParams: { query: query } })
          .then(_ =&gt; this.search());
    }

Using _ (underscore) variable with arrow functions in ES6/Typescript

The export statement below gives a syntax error 

    export default const hello = () =&gt; console.log(&quot;say hello&quot;)

why ?

I&#39;m only able to export named functions

    export function hello() {
      console.log(&quot;hello&quot;)
    }

What is the reason?



Is it possible to export Arrow functions in ES6/7?

Using ES6 arrow functions with lexical `this` binding is great.

However, I ran into an issue a moment ago using it with a typical jQuery click binding:

    class Game {
      foo() {
        self = this;
        this._pads.on(&#39;click&#39;, function() {
          if (self.go) { $(this).addClass(&#39;active&#39;); }
        });
      }
    }

Using an arrow function instead:


    class Game {
      foo() {
        this._pads.on(&#39;click&#39;, () =&gt; {
          if (this.go) { $(this).addClass(&#39;active&#39;); }
        });
      }
    }

And then `$(this)` gets converted to ES5 (self = this) type closure.

Is a way to have Traceur ignore &quot;$(this)&quot; for lexical binding?


Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

I have been reading a bunch of [React][1] code and I see stuff like this that I don&#39;t understand:

    handleChange = field =&gt; e =&gt; {
      e.preventDefault();
      /// Do something here
    }

  [1]: https://en.wikipedia.org/wiki/React_(web_framework)


What do multiple arrow functions mean in JavaScript?

I&#39;m running lint with my React app, and I receive this error:

    error    JSX props should not use arrow functions        react/jsx-no-bind

And this is where I&#39;m running the arrow function (inside `onClick`):

    {this.state.photos.map(tile =&gt; (
      &lt;span key={tile.img}&gt;
        &lt;Checkbox
          defaultChecked={tile.checked}
          onCheck={() =&gt; this.selectPicture(tile)}
          style={{position: &#39;absolute&#39;, zIndex: 99, padding: 5, backgroundColor: &#39;rgba(255, 255, 255, 0.72)&#39;}}
        /&gt;
        &lt;GridTile
          title={tile.title}
          subtitle={&lt;span&gt;by &lt;b&gt;{tile.author}&lt;/b&gt;&lt;/span&gt;}
          actionIcon={&lt;IconButton onClick={() =&gt; this.handleDelete(tile)}&gt;&lt;Delete color=&quot;white&quot;/&gt;&lt;/IconButton&gt;}
        &gt;
          &lt;img onClick={() =&gt; this.handleOpen(tile.img)} src={tile.img} style={{cursor: &#39;pointer&#39;}}/&gt;
        &lt;/GridTile&gt;
      &lt;/span&gt;
    ))}

Is this a bad practice that should be avoided? And what&#39;s the best way to do it?

Why shouldn&#39;t JSX props use arrow functions or bind?

When building a class in CoffeeScript, should all the instance method be defined using the `=&gt;` (&quot;fat arrow&quot;) operator and all the static methods being defined using the `-&gt;` operator?

CoffeeScript, When to use fat arrow (=&gt;) over arrow (-&gt;) and vice versa

I&#39;m new to both ES6 and React and I keep seeing arrow functions. Why is it that some arrow functions use curly braces after the fat arrow and some use parentheses?
For example:

    const foo = (params) =&gt; (
        &lt;span&gt;
            &lt;p&gt;Content&lt;/p&gt;
        &lt;/span&gt;
    );
vs.

    const handleBar = (e) =&gt; {
        e.preventDefault();
        dispatch(&#39;logout&#39;);
    };


Arrow function without curly braces

I know that the `&gt;=` operator means more than or equal to, but I&#39;ve seen `=&gt;` in some source code. What&#39;s the meaning of that operator?

Here&#39;s the code:

&lt;!-- language: lang-js --&gt;

    promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted =&gt; {
        if (!aDialogAccepted)
            return;
    
        saveAsType = fpParams.saveAsType;
        file = fpParams.file;
    
        continueSave();
    }).then(null, Components.utils.reportError);

What&#39;s the meaning of &quot;=&gt;&quot; (an arrow formed from equals &amp; greater than) in JavaScript?

With `() =&gt; {}` and `function () {}` we are getting two very similar ways to write functions in ES6. In other languages lambda functions often distinguish themselves by being anonymous, but in ECMAScript any function can be anonymous. Each of the two types have unique usage domains (namely when `this` needs to either be bound explicitly or explicitly not be bound). Between those domains there are a vast number of cases where either notation will do.

Arrow functions in ES6 have at least two limitations:

- Don&#39;t work with `new` and cannot be used when creating `prototype` 
- Fixed `this` bound to scope at initialisation

These two limitations aside, arrow functions could theoretically replace regular functions almost anywhere. What is the right approach using them in practice? Should arrow functions be used e.g.:

- &quot;everywhere they work&quot;, i.e. everywhere a function does not have to be agnostic about the `this` variable and we are not creating an object.
- only &quot;everywhere they are needed&quot;, i.e. event listeners, timeouts, that need to be bound to a certain scope
- with &#39;short&#39; functions, but not with &#39;long&#39; functions
- only with functions that do not contain another arrow function

I am looking for a guideline to selecting the appropriate function notation in the future version of ECMAScript. The guideline will need to be clear, so that it can be taught to developers in a team, and to be consistent so that it does not require constant refactoring back and forth from one function notation to another.

&lt;sub&gt;The question is directed at people who have thought about code style in the context of the upcoming ECMAScript 6 (Harmony) and who have already worked with the language.&lt;/sub&gt;


When should I use arrow functions in ECMAScript 6?

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) =&gt; {id: d.id, selected: bool});

But I was getting error from above code. I don&#39;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&#39;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) =&gt; new {id: d.id, selected: bool});



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

I&#39;ve read in several places that the key difference is that `this` is lexically bound in arrow functions. That&#39;s all well and good, but I don&#39;t actually know what that means.

I know it means it&#39;s unique within the confines of the braces defining the function&#39;s body, but I couldn&#39;t actually tell you the output of the following code, because I have no idea what `this` is referring to, unless it&#39;s referring to the fat arrow function itself....which doesn&#39;t seem useful.

    var testFunction = () =&gt; { console.log(this) };
    testFunction();

What does &quot;this&quot; refer to in arrow functions in ES6?

So we can do:

    export function myMethod (param: number) :number
    export function myMethod (param: string) :string
    
    export function myMethod (param: string | number): string | number {
      if (typeof param === &#39;string&#39;) {
        return param.toUpperCase()
      } else {
        return param + 1
      }
    }



Can I declare and implement it with arrow function?

    export var myMethodArror = (param: string): string
    export var myMethodArror = (param: number): number
    
    export var myMethodArror = (param: string | number): string | number =&gt; {
    ..
    }

I am aware of that it is not possible to duplicate the variables declaration, but my question is: is it possible to make function overload using arrow notation?



Typescript overload arrow functions

That is, how do I express

    function *(next) {}

with arrow syntax? I&#39;ve tried all the combinations I could think of, and I can&#39;t find any documentation on it.

(I am currently using Node.js v0.11.14.)




All Arrow Functions Solutions on Gang of Coders

Total of 25 Arrow Functions Solutions

Arrow function "expression expected" syntax error