Call, Bind, and Apply with Arrow function in JavaScript.
If you’re a lazy dev like me, then you might have taken some good amount of time and experience before starting to use call(), bind() and apply() methods in your JavaScript code.
It was just when I started using these methods in my code comfortably, I realized that their behavior is different in case of an arrow function and a regular function. (WTF)
It’s not a big difference per se but has more to do with the concept of an arrow function.
Let’s see a simple implementation of call with a regular function.
And now the same thing with Arrow function.
As we can see above, the context of data is not passed in case of arrow function. The reason being Arrow function doesn't have this of their own. We can still use it to pass arguments, the first argument gets ignored.
Apply the same as a call, where the additional parameters to be passed is an array.
NOTE: There is a catch here with these methods. As you might be aware that a function has a property called arguments that holds the value of arguments passed to the function. This is well supported in case of regular funciton but an arrow function does not have this property, hence you cannot use arguments in the arrow function.
What about the bind method then?
We use bind to bind the value of this at the time of creating the method and pass arguments while calling it. But, since the Arrow function doesn’t have an argument property of its own, the bind will fail with Arrow function.
Hope you found this article useful. I would love to hear your thoughts. 😇
Thanks for reading. 😊
Cheers! 😃
If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.
