Blog

Funciones flecha en ES6 Blog

Funciones flecha en ES6
Tags: ES6 JavaScript

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!

Instructor del curso

Crysfel3

Autor: Crysfel Villa

Soy un geek que disfruta crear y compartir cosas en internet! Sígueme en twitter @crysfel