Introducción

Para concluir esta introducción a las Funciones Flechas en el nuevo estándar ES6 (primera parte, segunda parte), no podemos dejar de repasar la correspondencia entre éstas y el método bind que ya hemos estudiado.

Echemos un vistazo a cómo las nuevas estructuras pueden reemplazar de un modo limpio y directo a otras ya anticuadas…

Aplicaciones parciales

Con el método bind, ya hemos visto que a partir del segundo argumento, podemos ir fijando los parámetros de la función que replicamos. Con eso conseguimos implementar las famosas aplicaciones parciales:

var sum = function ( x, y ) {
    return x + y;
}
 
var plus10 = sum.bind( undefined, 10 );
 
console.info( plus10( 20 ) ); // 30

NOTA: Recordad que el primer parámetro de bind es el que asigna el valor referencial de this. Como en este caso no nos interesa modificarlo, utilizamos undefined.

Con las Funciones Flecha, la sintaxis es mucho más clara:

var plus10 = y => sum( 10, y );
 
console.info( plus10( 30 ) ); // 40

Asociación

Si queremos asociar una función anónima a un callback, con bind escribiríamos un código como el siguiente:

var logger = {
    clickCounter: 0,
    addClick: function (){
        console.info( ++this.clickCounter );
    }
}
 
var ele = $( '#myEle' );
ele.on( 'click', logger.addClick.bind( logger ) );

Y con la sintaxis de flechas, tendríamos:

ele.on( 'click', () => logger.addClick() );

Extracción

Cuando extraemos un método que debe funcionar como un callback, necesitamos fijar el valor de this para que éste no apunte al objeto global.

Con bind ya comprobamos la estructura necesaria:

var ele = $( '#myEle' );
ele.on( 'click', console.info.bind( console ) );

Veamos ahora la conversión en modo flecha:

ele.on( 'click', x => console.info( x ) );

Conclusión

Estos serían algunos usos de esta nueva sintaxis donde encontramos un reemplazo natural al más tradicional método bind.

Si tenéis otros ejemplos interesantes, comentadlos para que todos podamos aprovecharlos 🙂