Funciones flecha en ES6 Blog
Como ya he mencionado, ES6 viene con muchos cambios al lenguaje de JavaScript, en este tutorial mostraré una nueva manera de hacer funciones utilizando una flecha, si, leíste bien, una flecha!.
Para probar los siguientes ejemplos es necesario habilitar esta característica, en Chrome solamente entra a chrome://flags/ y podrás acceder a los configuraciones del navegador, una vez ahí habilita la opción Enable Experimental JavaScript. También es necesario definir estas funciones en modo estricto.
(function(){ "use strict"; //código de los siguientes ejemplos })();
Por el momento esta característica es experimental, pero esperemos que en poco tiempo ya venga habilitado por default para poder usar todo esto en ambientes de producción.
Para definir una función lo hacemos de la siguiente manera.
params => expression
Esa es la nueva sintaxis para definir funciones flecha (fat arrow functions), ahora bien, la sintaxis cambia un poco dependiendo del número de líneas que necesitemos definir en el cuerpo, así como el número de parámetros, considera los siguientes ejemplos:
// Un solo parámetro, una sola línea de código param => expression; // Varios parámetros, una sola línea de código (param [, param]) => expression; // Un solo parámetro, varias líneas de código param => { statements; } // Varios parámetros, varias líneas de código ([param] [, param]) => { statements } // Sin parámetros, una sola línea de código () => expression; // Sin parámetros, varias líneas de código () => { statements; } // Una línea de código, regresa un objeto ([param]) => ({ key: value });
Esta nueva sintaxis nos permitirá definir funciones rápidamente, sobre todo cuando únicamente necesitamos hacer algo sencillo en una sola línea.
Aquí algunos ejemplos de como se hacen las cosas ahora mismo y como podemos hacerla usando la nueva sintaxis.
//Actualmente var foo = function(value){ return Math.pow(value,2); } foo(2); //=> 4 //nueva sintaxis var foo = value => Math.pow(value,2); foo(2); //=> 4
También podemos invocar funciones de manera anónima:
//Actualmente (function(val){ console.log(vale * 2); //=> 4 })(2); //nueva sintaxis (value => console.log(value*2) )(2); //=> 4
La sintaxis nos puede parecer extraña en un principio, pero es fácil acostumbrarse, te recomiendo hacer pruebas por ti mismo para que te familiarices con esta nueva característica, deja tus comentarios si tienes alguna duda al respecto.
Puedes probar los ejemplos anteriores desde aquí: http://www.es6fiddle.net/i7qbvpoe/
Se el primero en comentar!