When we should not use arrow functions?

Arrow function syntax is very clean and concise. Many developers like this clean concise ES6 arrow function. It makes our code shorter and nicer. In some cases the readability of the code becomes better using arrow function. But there are cases where we should avoid using arrow function. In those cases the regular function suits better. Lets take a look at some the cases where we should not use arrow function.

Arrow function not as an method of a object literal

var myObj = {
    name: "Jef",
    getName: () => {
        console.log(this.name); // does not print "jef"
    }
}
myObj.getName();

In this case we should use regular function expression like below:

var myObj = {
    name: "Jef",
    getName: function () {
        console.log(this.name);
    }
}
myObj.getName();

Callback functions of dynamic context

Lets consider following example:

var button = document.getElementById('button');
button.addEventListener('click', () => {
    // this === window here
    this.innerHTML = 'button clicked'; // it will not set
});

In this case we should use regular function expression like below:

var button = document.getElementById('button');
button.addEventListener('click', function(){
    // this === button element here
    this.innerHTML = 'button clicked'; // it will not set
});

Constructor function

var Person = (name) => {  
  this.name = name;
};
var personObj = new Person('Joe smith'); // "TypeError: Person is not a constructor"

In this case we should use regular function expression like below:

var Person = function(name) {  
  this.name = name;
};
var personObj = new Person('Joe smith'); // "TypeError: Person is not a constructor"

Read more on Arrow function.