Limitations of an Arrow Function

Last updated on January 28, 2022

In this blog post, you will be going to learn about the Limitations of an JS Arrow Function.

If you’re really worried why and when to use an arrow function, then this post is for you.

Overview

After ES6 release, The function can be written in short with “Arrow Function” or “Fat Arrow Function”.

const sample = () => { };

Well, this looks pretty cool but why we can’t use it in all the places where we use functionkeyword. That’s the focus of this blog post.

Limitations of an Arrow Function

In order to answer the above question first, we should understand what problem Arrow Functionwill resolve? – Resolve the parent scope thing and the scope always refers to Global.

The below are the places you can take a call whether to use normal function over an arrow function,

• Event handler function,

let’s say if you want to wire up a button click event with an event handler function as an arrow function, then you cannot use thiskeyword which refers to the global scope rather than the UI element.

<button id="one"></button>

const buttonElement = document.getElementById('one');
buttonElement.addEventListener('click', (e) => {
   // You cannot access the buttonElement usingthiskeyword.
   // here, you can access the event object
});

• Lack ofArgumentsObject,

Normal functionwill always have access to array-likeargumentsobject but not Arrow Function.

The above two scenarios we mostly depend on, but next time keep this in mind while writing function.