¿Cuando usar una función flecha(arrow function) en vez de una función común?

publicado por: Anonymous

¿Cuándo usar una función flecha en JavaScript?

() => { console.log('test'); }

function() { console.log('test'); } 

solución

Esta nueva sintaxis para funciones introducida en ES6 es funcionalmente equivalente a las funciones normales en la mayoría de las situaciones, sin embargo es importante notar las siguientes diferencias:

  • Valor de this, las funciones normales capturan el valor de this como el objeto global (o undefined en modo estricto):

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

    Mientras que las funciones flecha capturan ese valor del scope externo inmediato:

    function Persona(){
        this.edad = 0;
    
        setInterval(() => {
            this.edad++; // correcto, this se refiere a una instancia de Persona
        }, 1000);
    }
    
  • Argumentos, las funciones normales tienen acceso a una variable especial llamada arguments que es similar a un arreglo y contiene referencias a los argumentos que se pasan a una función:

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

    En las funciones flecha, arguments se refiere a una variable en el scope exterior, si ésta variable no existe su valor es undefined:

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

    A pesar de esto se puede implementar una funcionalidad similar con los parámetros rest:

    var foo = (...args) => {console.log(args[0])};
    foo("hola", "mundo"); // Imprime "hola"
    
  • Si una función de flecha simplemente devuelve una sola línea de código, puede omitir los corchetes de la declaración y la palabra clave return. Esto le dice a la función de flecha que devuelva la declaración.

    const double = (num) => num * 2;
    
  • Keyword yield, esta palabra reservada fue introducida también en ES6 y es utilizada en las funciones generadoras, sin embargo no puede ser utilizada en las funciones flecha.

Las funciones flecha proporcionan una sintaxis más elegante y compacta al ser usadas como callbacks, por lo que pueden ser usadas casi en las mismas situaciones que las funciones normales, y probablemente serán preferidas en futuras versiones de EcmaScript, solo hay que tomar en cuenta las diferencias anteriores para no cometer errores.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *