Stack Overflow
Stack Overflow

Questions tagged [arrow-functions]

Questions about the compact function syntax in ECMAScript2015 (ES6) called "arrow functions" because of their use of "=>".

"Arrow functions" are a compact syntax for function definitions in ECMAScript 2015 (ES6).

Arrow functions differ from regular functions in several ways:

  • They cannot be named. They are anonymous only.
  • They are not constructors, don't have a .prototype and cannot be instantiated by new.
  • They use lexically scoped this instead of binding this dynamically on the call

Arrow functions are also available in CoffeeScript.

1520 questions
907
votes
11 answers

Syntax for an async arrow function

I can mark a JavaScript function as "async" (i.e., returning a promise) with the async keyword. Like this: async function foo() { // Do something } What is the equivalent syntax for arrow functions?
BonsaiOak
  • 27,741
  • 7
  • 30
  • 54
837
votes
6 answers

ECMAScript 6 arrow function that returns an object

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 => {foo: "bar"}, but have to write p => { return {foo:…
Jonathan Schneider
  • 26,852
  • 13
  • 75
  • 99
799
votes
4 answers

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?

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 =…
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
733
votes
8 answers

What do multiple arrow functions mean in JavaScript?

I have been reading a bunch of React code and I see stuff like this that I don't understand: handleChange = field => e => { e.preventDefault(); /// Do something here }
jhamm
  • 24,124
  • 39
  • 105
  • 179
511
votes
14 answers

What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?

I know that the >= operator means more than or equal to, but I've seen => in some source code. What's the meaning of that operator? Here's the code: promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => { if…
rpgs_player
  • 5,369
  • 3
  • 15
  • 18
496
votes
9 answers

When should I use arrow functions in ECMAScript 6?

With () => {} 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…
lyschoening
  • 18,170
  • 11
  • 44
  • 54
366
votes
8 answers

Can I use ES6's arrow function syntax with generators? (arrow notation)

That is, how do I express function *(next) {} with arrow syntax? I've tried all the combinations I could think of, and I can't find any documentation on it. (I am currently using Node.js v0.11.14.)
Ashley Coolman
  • 11,095
  • 5
  • 59
  • 81
259
votes
8 answers

How do I write a named arrow function in ES2015?

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 + ' says hello'); } Is there a way to give it a name without a var statement: var sayHello =…
jhamm
  • 24,124
  • 39
  • 105
  • 179
215
votes
4 answers

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

I'm new to using ES6 classes with React, previously I'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…
Ben
  • 5,283
  • 9
  • 35
  • 44
203
votes
6 answers

When should I use a return statement in ES6 arrow functions

The new ES6 arrow functions say return is implicit under some circumstances: The expression is also the implicit return value of that function. In what cases do I need to use return with ES6 arrow functions?
Jess Telford
  • 12,880
  • 8
  • 42
  • 51
199
votes
4 answers

ES6 immediately invoked arrow function

Why does this work in a Node.js console (tested in 4.1.1 and 5.3.0), but doesn't work in the browser (tested in Chrome)? This code block should create and invoke an anonymous function that logs Ok. () => { console.log('Ok'); }() Also, while the…
XCS
  • 27,244
  • 26
  • 101
  • 151
176
votes
4 answers

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

I came across this construct in an Angular example and I wonder why this is chosen: _ => console.log('Not using any parameters'); I understand that the variable _ means don't care/not used but since it is the only variable is there any reason to…
Halt
  • 2,924
  • 4
  • 22
  • 26
176
votes
3 answers

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

The export statement below gives a syntax error export default const hello = () => console.log("say hello") why ? I'm only able to export named functions export function hello() { console.log("hello") } What is the reason?
jozzy
  • 2,863
  • 3
  • 15
  • 12
172
votes
10 answers

Why shouldn't JSX props use arrow functions or bind?

I'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'm running the arrow function (inside onClick): {this.state.photos.map(tile => (
KadoBOT
  • 2,944
  • 4
  • 16
  • 34
164
votes
5 answers

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

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('click', function() { if (self.go)…
JRodl3r
  • 1,768
  • 2
  • 11
  • 13
1
2 3
…
99 100