This new syntax for functions introduced in ES6 is functionally equivalent to normal functions in most situations, however it is important to note the following differences:

• Value of this, normal functions capture the value of thisas the global object (or undefinedin strict mode ):

  function Persona() {            
      this.edad = 0;
  
      setInterval(function crecer() {    
          this.edad++; // error lógico, no se refieren a la misma variable
      }, 1000);
  }
  

  Whereas the arrow functions capture that value from the immediate outer scope :

  function Persona(){
      this.edad = 0;
  
      setInterval(() => {
          this.edad++; // correcto, this se refiere a una instancia de Persona
      }, 1000);
  }
  

• Arguments, normal functions have access to a special variable called argumentswhich is similar to an array and contains references to the arguments that are passed to a function:

  function foo(arg1, arg2) {
      console.log(arguments[0]);
  }
  
  foo("hola", "mundo"); // imprime "hola"
  

  In arrow functions, argumentsit refers to a variable in the outer scopeundefined , if this variable does not exist its value is :

  var arguments = 42;
  var arr = () => arguments;
  
  arr(); // 42
  

  Despite this, similar functionality can be implemented with the rest parameters :

  var foo = (...args) => {console.log(args[0])};
  foo("hola", "mundo"); // Imprime "hola"
  

• If an arrow function simply returns a single line of code, you can omit the brackets from the statement and the return keyword. This tells the arrow function to return the statement.

  const double = (num) => num * 2;
  

• Keyword yield, this reserved word was also introduced in ES6 and is used in generator functions , however it cannot be used in arrow functions.

Arrow functions provide a more elegant and compact syntax when used as callbacks , so they can be used in almost the same situations as normal functions, and will probably be preferred in future versions of EcmaScript, just be aware of the differences above so as not to make mistakes.

Arrow Functions are not just syntactic sugar to make the ordinary function declaration easier/elegant. There are considerable differences between the two that can cause a program to not work as expected and they are not interchangeable in many cases.

So I guess the whole question is when to use them and when not?

When to use Arrow Functions?

Reduced syntax of pure functions.

In the next block, they are interchangeable because they are pure functions (that their result does not depend on an external variable). When it comes to performance, they are practically the same .

// declaracion de funcion 
var nombres = personas.map(function(p){ return p.nombre });
// funcion flecha, este es un buen caso de uso
var nombres = personas.map(p => p.nombre);

When you want the arrow function to execute in the same lexical scope as the containing function:

Arrow functions are evaluated as part of the lexical scope that contains them, so they thisare argumentsnot proper instances of the arrow function, but rather instances of the containing function. These types of functions are not interchangeable, you will have to rewrite parts of the function body if you want to change from one syntax to the other.

Consider this other block:

// ECMAScript 5, usando una declaración de función.
function contadorDeSegundos() {
  var that = this;
  this.contar = 0;
  setInterval(function() {
    that.contar++;
  }, 1000);
}

///  ECMAScript 2015, con arrow functions
function contadorDeSegundos() {
  this.contar = 0;                      
  setInterval(() => { this.contar++ }, 1000); 
}

As you can see here again the code is more compact, but the behavior of thisis very different.

When NOT to use Arrow Functions?

When you need dynamic arguments:

As already stated, the arrow functions don't expose the object arguments, so if you need access to it you can't use them. Note that if you declare the arrow function inside another function, you would be accessing the one argumentsof the containing function (if there was one). This is why arrow functions are said to use lexical arguments. That is, they see the object argumentsthat is in the lexical scope.

Globally:

var f = () => { console.log(arguments.length) }
f();
// produce: Uncaught ReferenceError: arguments is not defined(…)
var f2 = function() { console.log(arguments.length) }
f2();
// produce: 0

In generator functions:

The keyword yieldis not allowed in arrow functions. These functions cannot be generator functions (however they can contain generator functions).