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
44
votes
7 answers

Expected to return a value in arrow; function array-callback-return. Why?

I'm having some issues understanding why I'm getting a compile warning on this piece of my react code fetch('/users') .then(res => res.json()) .then(data => { data.map(users => { console.log(users); …
Chef1075
  • 2,614
  • 9
  • 40
  • 57
42
votes
1 answer

Should we use useCallback in every function handler in React Functional Components

let's say we have the components like this const Example = () => { const [counter, setCounter] = useState(0); const increment = () => setCounter(counter => counter + 1); return (
Jake Lam
  • 3,254
  • 3
  • 25
  • 44
41
votes
3 answers

Why is `throw` invalid in an ES6 arrow function?

I'm just looking for a reason as to why this is invalid: () => throw 42; I know I can get around it via: () => {throw 42};
user578895
39
votes
5 answers

Arrow Functions and This

I'm trying out ES6 and want to include a property inside my function like so var person = { name: "jason", shout: () => console.log("my name is ", this.name) } person.shout() // Should print out my name is jason However, when I run this code…
thank_you
  • 11,001
  • 19
  • 101
  • 185
37
votes
4 answers

How to avoid bind or inline arrow functions inside render method

We should avoid method binding inside render because during re-rendering it will create the new methods instead of using the old one, that will affect the performance. So for the scenarios like this:
Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
36
votes
5 answers

Performance penalty of creating handlers on every render with react-hooks

I'm currently very amazed about the use cases of the new react hooks API and what you can possibly do with it. A question that came up while experimenting was how expensive it is to always create a new handler function just to throw it away when…
trixn
  • 15,761
  • 2
  • 38
  • 55
36
votes
1 answer

Arrow Function in Object Literal

I'm trying to figure out why an arrow function in an object literal is called with window as this. Can someone give me some insight? var arrowObject = { name: 'arrowObject', printName: () => { console.log(this); } }; // Prints: Window…
Dennis S
  • 858
  • 1
  • 18
  • 32
34
votes
2 answers

What do the parentheses wrapping the object literal in an arrow function mean?

I've seen JavaScript code such as this: let a = () => ({ id: 'abc', name: 'xyz' }) What do the parentheses ( … ) wrapping the object refer to in this instance? Is it a shorthand for return?
Stanley
  • 2,798
  • 5
  • 22
  • 44
34
votes
10 answers

JavaScript ES6: Test for arrow function, built-in function, regular function?

Is there an elegant way to tell Harmony's slim arrow functions apart from regular functions and built-in functions? The Harmony wiki states that: Arrow functions are like built-in functions in that both lack .prototype and any [[Construct]]…
CodeManX
  • 11,159
  • 5
  • 49
  • 70
33
votes
1 answer

Why doesn't my arrow function return a value?

I have an arrow function that looks like this (simplified): const f = arg => { arg.toUpperCase(); }; But when I call it, I get undefined: console.log(f("testing")); // undefined Why? Example: const f = arg => { arg.toUpperCase();…
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
33
votes
4 answers

CoffeeScript: How to use both fat arrow and this?

I have a coffeescript class that has some jquery event listeners. I would like to use the fat arrow => to avoid having to reference the class, but I still need a reference to the element that would usually be used with this. How can I use…
Andrew
  • 227,796
  • 193
  • 515
  • 708
32
votes
3 answers

Curly Brackets in Arrow Functions

can someone, please explain the following: I'm following Dan Abramov's lectures & doing the exercises. The code works fine, however, the tests fail when the following particular function is written with curly brackets **{ }**. case 'toggleTodo'…
Kayote
  • 14,579
  • 25
  • 85
  • 144
31
votes
2 answers

How to write multiple expressions in PHP arrow functions

How do you write a PHP arrow function with multiple line expressions? JavaScript one-liner example: const dob = (age) => 2021 - age; PHP one-liner equivalent: $dob = fn($age) => 2021 - $age; Javascript multiple line example: const dob = (age) =>…
Emeka Mbah
  • 16,745
  • 10
  • 77
  • 96
31
votes
4 answers

Do ES6 arrow functions have their own arguments or not?

I don’t know whether arrow functions bind arguments to a lexical scope or not. Take a look at this example (the same concept can be used for this): var b = function() { return () => console.log(arguments); }; b(1,2,3)(4,5,6); // different result of…
Amin Roosta
  • 1,080
  • 1
  • 11
  • 26
31
votes
2 answers

Can I use TypeScript overloads when using fat arrow syntax for class methods?

I've converted some classes from the conventional form: class TestOverloads { private status = "blah"; public doStuff(selector: JQuery); public doStuff(selector: string); public doStuff(selector: any) { alert(this.status); …
Jonathan Moffatt
  • 13,309
  • 8
  • 51
  • 49
1 2
3
…
99 100