why you shouldn't use arrow functions?
Tags: javascript, webdev, react, programming
Published: 2020-12-24 13:51:25

Who doesn’t love the simplicity of arrow functions? Introduced as part of the ECMAScript 6, arrow functions went viral. The new syntax to declare functions saves us time and enhancing clarity in many situations, removing all the distracting, unnecessary, chunk that usually came with declaring a JS function 😫. In this article we'll talk more about when we should and not use arrow functions, so hold tight and continue with me until the end to avoid confusion.

**Regular funciton declaration**

```javascript
function holidays(){ 
return "Merry Christmas and a happy new year 😀!"
}
```

```javascript
const result = list.map(function(item) { return item; })
```


**With Es6 functions**

```javascript
const holidays = () => "Merry Christmas and a happy new year 😀!"
```

```javascript
const result = list.map((item) => item)
```

Isn't it lovely? In any case, we have to be cautious as the difference between them is not only just syntax, so we can't use it in every situation.

***So when is using arrow functions not advisable*** 🙄***?***

**1. Object methods**

```javascript
const post= {
likes: 0,
like: () => {
this.likes++;
}
}
```

In the example above, it would be instinctive to think that every time we call `post.like()` the property `post.likes` would increase by one, initially from 0 to 1.
Unfortunately, this is not the case, the value of likes will sadly remain the same and this post will never get to be popular.

Invoking the method like() would simply attempt to increment the property likes on the global window object.

However, if instead, we use the traditional syntax:

```javascript
const post = {
likes: 0,
like: function() {
this.likes++;
}
}
```

**2. Object Prototype**

Similar to the example above, object prototypes will evaluate this as the global window object, like in the following example:

```javascript
class Post {
constructor(title) {
this.title = title;
this.shared = false;
}
};

Post.prototype.share = () => {
return this.shared = true;
};
```

Similarly, in the previous case, the method share() won’t work due to the enclosed scope to the window object. And again the solution will look familiar:

```javascript
Post.prototype.share2 = function() { return this.shared = true; };
```

In addition to what we saw above here are some limitations of arrow functions:

+ Does not have its own binding to this or super
+ Should not be used as an event handler, a method of an object, a method of a class, or a prototype method, or when you have a function that uses the arguments object.
+ Not suitable for call, apply and bind methods, which generally rely on establishing a scope
+ Cannot be used as a constructor
+ Cannot use yield within its body

**_Taken from_** **_[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)_**

**To be continued...**

Thank you for taking your time and read this post, hope you enjoyed it. Let me know what you think in the comments and don't forget to connect with me or hit me up on [Twitter](https://twitter.com/graphicblessing), [Instagram](https://www.instagram.com/blessingartcreator/) and [Linkedin](https://www.linkedin.com/in/hirwa-blessing). Once again, Merry Christmas and a happy new year of 2021 🌲.