Search code examples
javascriptreactjsarrow-functions

Arrow function vs. bound function


While reading the article I was a bit confused about the following quote.

The problem here is that each time an => is encountered, it creates a new copy of the arrow function.

What did the author mean by a new copy each time? A new copy of what? What is each time? Where can I find a reference which fully encompasses usage and execution flow of arrow function with creating a new copy each time?

It would be clear if the author wrote a new instance of the arrow function. But he wrote a new copy of the arrow function. Moreover please don't give me more simplified explanations in comparison with the MDN of how arrow function works. Just answer why the author wrote copy instead of instance or maybe not instead. And answer where that each time happens in context of his article and code chunks.


Solution

  • const fn = () => {}
    

    is basically the same as old

    const fn = (function(){}).bind(this);
    

    Function.prototype.bind returns a new function on every invocation. That's why it is a good idea to store bound function somewhere instead of creating it on every encounter.