¿Qué les pasa a los normales?" />

Si está ampliando sus conocimientos de JavaScript y se pregunta por qué agregarían funciones de flecha en ECMAScript 2015 (ES6), no está solo. A medida que fui ampliando mi conocimiento del idioma y sus complejidades y peculiaridades, me encontré preguntándome lo mismo. En esta publicación, expondré las diferencias, los beneficios y las razones por las que se agregó y cuándo debes usarlo.

hablemos de diferencias

Antes de que se introdujeran las funciones de flecha, las funciones debían declararse en el formato tradicional como se muestra a continuación:

function add(x, y) {
  return x   y;
}

o declarado como expresión:

const addFunction = function add(x, y) {
  return x   y;
}

con la introducción de funciones de flecha, esto se puede escribir como:

const addFunction = (x,y) => x   y

Sintaxis concisa

En el ejemplo anterior, podemos ver fácilmente que al usar una función de flecha y aprovechar su función de retorno implícito, la función se puede refactorizar rápidamente en una sola línea. El código resultante es más conciso, más limpio y más fácil de leer, lo que resulta en un desarrollo más fluido y una depuración más rápida.

Izar

El tiempo de ejecución de JavaScript de forma predeterminada elevará todas las funciones y declaraciones de variables a la parte superior de su alcance al crear el contexto de ejecución. Por ejemplo, dentro del alcance global, esto garantiza que todas las funciones y variables declaradas estarán disponibles para todas las funciones que se llamen posteriormente. Sin embargo, las funciones de flecha nunca se elevan, lo que permite un mayor control sobre la ubicación precisa de dónde se ejecuta una función y las variables a las que tiene acceso.

Contexto

Cada vez que se ejecuta una función de JavaScript, se crea un contexto de ejecución que incluye información sobre el entorno en el que se ejecuta la función, incluido el valor de this. Mientras que una función tradicional se ejecuta en su propio contexto, una función de flecha siempre heredará el contexto de la función que la llamó.
Usando el siguiente código:

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

obtendríamos un error que decía: No se puede leer la propiedad 'forEach' de indefinido, esto se debe a que aunque la función printGreetings está dentro del contexto de la clase Persona y hereda su contexto, la función forEach (aunque una función JavaScript incorporada) se ejecuta en su propio contexto que no contiene la propiedad this.name, por lo que genera un error de búsqueda.

Sin embargo, una función de flecha nunca se ejecutará en su propio contexto y al reescribir la función anterior usando una función de flecha...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

el resultado será el esperado

Good Morning, George
Hello! George
Howdy! George

Resumen

Para resumir los beneficios de las funciones de flecha; permiten un código más corto y conciso; ofrece devolución implícita del código del bloque de funciones; no sube a la parte superior del contexto de ejecución y mantiene su ubicación exacta en el código; finalmente, heredan el contexto de la función que lo llamó sin ejecutar su propio contexto, lo que permite un uso más predecible de esta palabra clave.

Esperamos que esta publicación te haya ayudado a comprender mejor las diferencias y los beneficios de las funciones tradicionales frente a la función de flecha, ¡y te haya llevado un paso más allá en tu recorrido por JavaScript!

Lectura adicional:
Blog de Dmitri Pavlutin - Diferencias entre funciones de flecha y regulares
Documentos de referencia de MDN: funciones de flecha