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
142
votes
4 answers

CoffeeScript, When to use fat arrow (=>) over arrow (->) and vice versa

When building a class in CoffeeScript, should all the instance method be defined using the => ("fat arrow") operator and all the static methods being defined using the -> operator?
Ali Salehi
  • 6,899
  • 11
  • 49
  • 75
119
votes
9 answers

Arrow function without curly braces

I'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) => (

Content

…
dkimot
  • 2,239
  • 4
  • 17
  • 25
92
votes
3 answers

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

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) => {id: d.id,…
WitVault
  • 23,445
  • 19
  • 103
  • 133
90
votes
4 answers

Typescript overload arrow functions

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 === 'string') { return param.toUpperCase() …
WHITECOLOR
  • 24,996
  • 37
  • 121
  • 181
74
votes
10 answers

What does "this" refer to in arrow functions in ES6?

I've read in several places that the key difference is that this is lexically bound in arrow functions. That's all well and good, but I don't actually know what that means. I know it means it's unique within the confines of the braces defining the…
temporary_user_name
  • 35,956
  • 47
  • 141
  • 220
62
votes
5 answers

Correct use of arrow functions in React

I am using ReactJS with Babel and Webpack and using ES6 as well as the proposed class fields for arrow functions. I understand that arrow functions make things more efficient by not recreating the functions each render similar to how binding in the…
kojow7
  • 10,308
  • 17
  • 80
  • 135
59
votes
3 answers

Arrow function "expression expected" syntax error

I want to transform this code: var formatQuoteAmount = function (tx) { return Currency.toSmallestSubunit(tx.usd, 'USD'); }; var quoteAmounts = res.transactions.map(formatQuoteAmount); into an anonymous arrow function. I've written this: var…
Milkncookiez
  • 6,817
  • 10
  • 57
  • 96
56
votes
2 answers

Binding vs Arrow-function (in JavaScript, or for react onClick)

So I am trying to learn JavaScript and/or react and got a little mixed up with understanding .bind(this) in the constructor. However, I think to understand it now, and just want to know, Why would anyone use Binding vs an Arrow-function in…
Kyle Woolley
  • 763
  • 1
  • 6
  • 9
56
votes
3 answers

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

It seems to me that, in ES6, the following two functions are very nearly identical: function () { return this; }.bind(this); () => { return this; }; The end result seems the same: arrow functions produce a JavaScript function object with their…
Alexis King
  • 43,109
  • 15
  • 131
  • 205
54
votes
4 answers

ES6 arrow functions not working on the prototype?

When ES6 Arrow functions don'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 = () => `${this.name} is a…
Jonathan Lucas
  • 545
  • 1
  • 4
  • 6
53
votes
2 answers

Official information on `arguments` in ES6 Arrow functions?

(() => console.log(arguments))(1,2,3); // Chrome, FF, Node give "1,2,3" // Babel gives "arguments is not defined" from parent scope According to Babel (and from what I can tell initial TC39 recommendations), that is "invalid" as arrow functions…
user578895
52
votes
2 answers

Vue JS: Difference of data() { return {} } vs data:() => ({ })

I'm curious both of this data function, is there any difference between this two. I usually saw is data () { return { obj } } And ES6 fat arrow (=>) which I typically used data:()=>({ obj })
BGTabulation BGTabulate
  • 1,677
  • 3
  • 16
  • 39
50
votes
13 answers

How do I write an arrow function in ES6 recursively?

Arrow functions in ES6 do not have an arguments property and therefore arguments.callee will not work and would anyway not work in strict mode even if just an anonymous function was being used. Arrow functions cannot be named, so the named…
Siddharth
  • 1,146
  • 3
  • 15
  • 28
48
votes
3 answers

Immediate function using JavaScript ES6 arrow functions

Does anyone know how to write an immediate function using ES6 arrow syntax? Here's the ES3/5 way of doing it: (function () { //... }()); I've tried the following but get an unexpected token error on the last line. (() => { //... }()); You can…
d13
  • 9,817
  • 12
  • 36
  • 44
45
votes
1 answer

async function or async => when exporting default?

export default async function () { }; or export default async () => { }; Which one is preferred when exporting a default function and why?
basickarl
  • 37,187
  • 64
  • 214
  • 335
1
2
3
…
99 100