Javascript memory implication of nested arrow functions

Question

Consider:

function f1() {
  function n11() { .. lots of code .. };
  const n12 = () => { .. lots of code .. };
  return n11()+n12()+5;
}

const f2 = () => {
  function n21() { .. lots of code .. };
  const n22 = () => { .. lots of code .. };
  return n21()+n22()+5;
}

I am trying to understand the memory implications of calling f1 and f2.

Regarding n11, this answer says:

For some very small and normally inconsequential value of "wasted". JavaScript engines are very efficient these days and can perform a wide variety of tricks/optimizations. For instance, only the function-object (but not the actual function code!) needs to be "duplicated" internally. There is no "wasting" problem without an actual test-case that shows otherwise. This idiom (of nested and anonymous functions) is very common in JavaScript and very well-optimized for.

However I want to know if this also apply to arrow functions (ie n12, n21 and n22) .. will the overhead only be a function-object as above or will the entire nested function code be duplicated every time f1/f2 are called ?

thx!

Probably depends on the JavaScript engine. Which one are you curious about? — Felix Kling
– Felix Kling, Commented Sep 22, 2017 at 23:12
more of a general question, but targeting modern browsers .. are some known to be better/worse at this ? — kofifus
– kofifus, Commented Sep 22, 2017 at 23:13
Well, "in general" engines don't have to do any of these things. The spec doesn't require them to do that. However, I don't see why there should be any difference between arrow functions and "normal" functions in that regard. But if you want to know specifically whether an engine is doing that or not, you'd have to look at its source code I guess. — Felix Kling
– Felix Kling, Commented Sep 22, 2017 at 23:14
stackoverflow.com/questions/44030645/… this answer claims that arrow functions are just sugar for regular functions. So I would imagine they have the same effect on memory as regular functions. — djfdev
– djfdev, Commented Sep 22, 2017 at 23:25

Barmar · Accepted Answer · 2017-09-22 23:23:44Z

6

There's absolutely no reason why an implementaton would need to do anything different for arrow functions than traditional functions with regard to the sharing of code between different closures of the same function. The only difference between arrow functions and traditional functions is that arrow functions save the this value. This can be done using the same mechanism as is already provided for the Function.prototype.bind() method. An arrow function is mostly just syntactic sugar.

func = () => { body };

is roughly equivalent to:

func = function() { body }.bind(this);

(This is a slight simplification, since arrow functions also don't get an arguments object, but that shouldn't affect what you're asking.)

edited Sep 22, 2017 at 23:23

answered Sep 22, 2017 at 23:21

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kofifus Over a year ago

thx! do you have any information that nested functions (arrow or regular) are in fact optimized ?

Barmar Over a year ago

There's nothing about nested functions that would require them to duplicate code. Everything involving variable scopes is handled in the function's closure data, not in the code.

Collectives™ on Stack Overflow

Javascript memory implication of nested arrow functions

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related