Arrow function - toviddfrei/javascript GitHub Wiki

Desglosemos primero, si os parece, una función como recordamos es una estructura que contiene una colección de expresiones, y que retorna un resultado, os acordáis del flujo de entrada, datos, función, comportamientos, y salida del flujo modificado. Bueno espero que lo tengamos presente, ya que hasta el momento, teníamos en la caja de herramientas, la forma de declarar las funciones básicas, luego evolucionamos a las expresiones de funciones, os acordáis, declaración de función y expresión de función, la diferencia está en la sintaxis no en el funcionamiento, pues ahora nos llega la función de flecha, que se ha extendido por el universo del desarrollo, y la vamos a ver y a necesitar en numerosas ocasiones, si he dicho necesitar, veremos en breve el porqué de su funcionalidad, tiene que ver como se comporta internamente dentro de otros bloques de estructuras. En breve llegamos. De momento un ejemplo triple para ver las diferentes sintaxis, teniendo claro que el funcionamiento es el mismo.

// Declaración de función

function declaraciondefuncion(){
    console.log('Hola soy tú declaración de función');
};

// Expresión de función, la guardamos en una variable y la convertimos en anónima

expresiondefuncion = function (){
    console.log('Hola soy tú expresión de función');
};

// Función de flecha, la ultima adquisicion para la caja de herramientas

flechadefuncion = () => {
    console.log('Hola soy tú función de flecha');
};

declaraciondefuncion();
expresiondefuncion();
flechadefuncion();

Vemos las diferentes sintaxis, pero a su vez el mismo, mismo funcionamiento, le pasamos el flujo con la llamada, en este caso sin parámetros, la función realiza su tarea o comportamiento declarado y retorna el flujo modificado, lo dicho, lo mismo, lo mismo, perdamos el miedo a esta estructura, es una herramienta muy poderosa cuando profundizas en ella, de momento vemos que no tiene miedo a enfrentarse al ámbito global, podemos llamarla desde cualquier parte de la aplicación está guardada en una variable global tal como la expresión de función. También podemos pasarle parámetros, tal como a las demás. Evolucionemos el ejemplo.

// Declaración de función

function declaraciondefuncion(name){
    console.log('Hola ' + `${name}` + ' soy tú declaración de función');
};

// Expresión de función, la guardamos en una variable y la convertimos en anónima

expresiondefuncion = function (nam){
    console.log('Hola ' + `${nam}` + ' soy tú expresión de función');
};

// Función de flecha, la ultima adquisicion para la caja de herramientas

flechadefuncion = (na) => {
    console.log('Hola ' + `${na}` + ' soy tú función de flecha');
};

// funcion de flecha solo 1 parametro, podemos evitar los parentesis.

flechadefunciononeparametro = na => {
    console.log('Hola ' + `${na}` + ' soy tú función de flecha');
};

declaraciondefuncion('Daniel');
expresiondefuncion('Dani');
flechadefuncion('Da');
flechadefunciononeparametro('Da');

Repetimos, el mismo funcionamiento, anoto una variación sintáctica cuando solo manejamos un parámetro, es cuestión nuestra utilizar los paréntesis, es evidente que en el momento tengamos dos parámetros debemos obligatoriamente utilizarlos, y separar con comas los parámetros, tal como ya conocemos de las declaraciones anteriores.

flechafuncion = () => 10 + 10;

console.log(flechafuncion());

Tan simple como esta declaración se puede volver la función flecha, pero tal como hemos dicho está limitada y no se puede usar en todas las situaciones, por ejemplo no debemos utilizarla como métodos, no se puede utilizar como constructor, algunos métodos o palabras clave no los tiene disponibles, pero a su vez, tiene una sintaxis que cuando te entra, se te pega rápido, en una línea  construyes una función al uso.

Uno de los usos para las funciones de flecha es cuando utilizamos la función setInterval(), toma una función cualquiera y la ejecuta periódicamente según el valor pasado, algo que por supuesto utilizaremos y no poco en un futuro, en este caso cuando setInterval() este presente la función flecha baila perfectamente con ella, algo que no le pasa a la función tradicional, veámoslo

function albaranentrega(numarticles){
    this.article = 100;
    this.transport = 20;

    this.totalalbaranentrega = setInterval(function totalcuenta(){
        console.log(this);
        console.log((this.article + this.transport) * numarticles);
    },6000);
    //break;
}

//const albarannuevo = new albaranentrega(5);
//console.log(albaranentrega(albarannuevo));
//albarannuevo.total;


// La salida que tiene this, nos indica que el tipo de función que estamos utilizando no contiene lo que buscamos, no resulta especifico para el ambito que tenemos.
/*
Timeout {
  _idleTimeout: 6000,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 33,
  _onTimeout: [Function: totalcuenta],
  _timerArgs: undefined,
  _repeat: 6000,
  _destroyed: false,
  [Symbol(refed)]: true,
  [Symbol(kHasPrimitive)]: false,
  [Symbol(asyncId)]: 7,
  [Symbol(triggerId)]: 5
}
NaN
Timeout {
  _idleTimeout: 6000,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 6045,
  _onTimeout: [Function: totalcuenta],
  _timerArgs: undefined,
  _repeat: 6000,
  _destroyed: false,
  [Symbol(refed)]: true,
...
  [Symbol(asyncId)]: 7,
  [Symbol(triggerId)]: 5
}
NaN
*/

// Por eso que incluso utilizando this no obtendriamos resultados, sin envargo, si utilizamos una función de flecha la cosa cambia y bastante, ya que aunque la función de flecha
// no tiene su propio this, lo crea donde se declara, observemolos.

function albaranentrega(numarticles){
    this.article = 100;
    this.transport = 20;

    this.totalalbaranentrega = setInterval(() => {
        //console.log(this);
        console.log((this.article + this.transport) * numarticles);
    },6000);
    //break;
}

//const albarannuevo = new albaranentrega(10);
//console.log(albaranentrega(albarannuevo));
//albarannuevo.total;

// La salida que tiene this, nos indica que ahora si tiene los datos necesarios que estaban declarados en su ambito, article y transport
// ya estan disponible, por lo tanto la funcion ya retorna su comportamiento correcto y retorna un resultado.
/*
albaranentrega {
  article: 100,
  transport: 20,
  totalalbaranentrega: Timeout {
    _idleTimeout: 6000,
    _idlePrev: null,
    _idleNext: null,
    _idleStart: 28,
    _onTimeout: [Function (anonymous)],
    _timerArgs: undefined,
    _repeat: 6000,
    _destroyed: false,
    [Symbol(refed)]: true,
    [Symbol(kHasPrimitive)]: false,
    [Symbol(asyncId)]: 7,
    [Symbol(triggerId)]: 5
  }
}
600
*/

// En este caso, la función de flecha es necesaria para resolver este situación

Me quedo con la facilidad de uso que ofrece la función de flecha, pero no dejo de comprobar, valorar las otras opciones que dispongo, es otra herramienta más dentro de la caja que estoy preparando, seguramente este encima de la mesa más tiempo que las demás y muy a gusto si es así, ya que creo que una vez entra, es una sintaxis muy intuitiva.