18

The new arrow functions in ES6, are like one-liner functions which make code more clean and concise, and also allow you to keep the scope of the caller inside the function, so that you don’t need to do things like var _this = this;, or use the bind function etc.

Are there any significant performance gains in using ES6 arrow functions over plain javascript functions?

grizzthedj
  • 7,131
  • 16
  • 42
  • 62
  • 2
    The standard does not put any pre-conditions for either to be faster. So it totally is up to the implementation. – zerkms Mar 13 '17 at 20:33
  • Underwater, there might be some performance differences, you could try to test it by building a prototype. – CherryNerd Mar 13 '17 at 20:35
  • maybe if you ask about a specific implementation(chrome maybe ?) , we could come up with a better answer, I'd ask about chrome or more specifically V8 because that's the one used for nodejs – niceman Mar 13 '17 at 20:50
  • 2
    try googling some [jsperf](https://jsperf.com/) benchmarks for arrow functions. Some examples: [ex1](https://jsperf.com/function-vs-arrow-function) [ex2](https://jsperf.com/arrow-functions) or try making your own and report back if you find anything interesting. From a cursory look it seems like performance differences are minor, however using an arrow function vs bind would be preferable (ymmv based on JS env - I'm on chrome aka V8) – Damon Mar 13 '17 at 21:10

4 Answers4

19

Keep in mind there can’t be an universal answer to this question, as always with all of which is implementation dependant. So the answer may be X now or with some browsers, and may be Y in the future or with other browsers.

These provisions said, here are some data: http://incaseofstairs.com/six-speed. For now and with major browsers, the answer is rather No and there might even be performance penalties (under the above provisions).

darius
  • 837
  • 9
  • 22
Hibou57
  • 6,870
  • 6
  • 52
  • 56
5

It is the opposite: "Arrow functions are slower".

From the theoretical perspective (not specific to JavaScript), lambdas (arrow functions) are anonymous, and so they are usually calculated during runtime on the heap.

This means the compilers may not be able to "inline" the calls to these lambdas. This degrades the performance of lambdas compared to normal free pure functions that have a much higher chance of inlining.

Being on the heap also puts the garbage collector under pressure. See this comment from the author of TypeScript that explains why arrow functions are slower.

An example benchmark:

An arrow method is 10% and 60% slower than a class method and a free function respectively

https://jsbench.me/g4kjcq9j3s/1

Amin Ya
  • 1,515
  • 1
  • 19
  • 30
0

I updated https://jsbench.me/g4kjcq9j3s/1 to compare arrow functions outside of a class vs arrow methods, and it appears that arrow functions in this case are actually faster than regular functions although considerable slower than class methods when used inside a class

mat
  • 1
-2

ES6 arrow functions are considerably faster, because they don't create an additional scope. But they can't access variables declared outside their scope, or their performance will degrade to below that of normal functions.

Code Whisperer
  • 22,959
  • 20
  • 67
  • 85
  • 1
    How so? What is the difference between a regular function accessing outer scope vs an arrow function accessing outer scope? – Hkan Feb 08 '18 at 07:36
  • 1
    I don't think there are performance benefits so much in practice, but I think Code Whisperer is referring to there being no need to allocate some things that are normally allocated for a function (e.g., 'this' and 'arguments') – Erik Christianson Aug 23 '18 at 18:18
  • @code-whisperer can you please elaborate? How does "accessing variables declared outside their scope" degrade the performance of arrow functions? – Olav Kokovkin Aug 12 '20 at 06:59