⇪

Funciones flecha en ES6

facebook-svg gplus-svg twitter-svg

Las funciones flecha son funciones anónimas con una sintaxis simplificada.

En este ejemplo tenemos un array de cadenas de texto:


const elementos = ["hidROgeNo", "heLio", "liTio", "bEriLio"];

Queremos que todos los elementos del array empiecen con mayúscula inicial seguida por minúsculas. Para esto hemos escrito una función que hace exactamente esto: coge una cadena de texto y la transforma en una cadena tipo título:


function tipoTitulo(cadena) {
    return cadena.charAt(0).toUpperCase() + cadena.slice(1).toLowerCase();
}

A continuación para transformar todos los elementos del array podemos utilizar el método map() que devuelve un nuevo array donde todos los elementos tienen la primera letra en mayúscula.


const Elementos = elementos.map(function(elemento) { 
    return tipoTitulo(elemento);
  });
//Para comprobar el resultado sacamos el nuevo array en consola:
console.log(Elementos);

Podemos utilizar una función flecha para hacer lo mismo: ya no necesitamos la palabra clave function. En cambio utilizamos una flecha gorda: =>

function (elemento) => {return tipoTitulo(elemento);}

const Elementos = elementos.map( (elemento) => { return tipoTitulo(elemento); });
  console.log(Elementos);

Si la función anónima tiene un solo argumento no necesitamos ponerlo en paréntesis.

const Elementos = elementos.map( elemento =>{ tipoTitulo(elemento);} );

Pero lo podemos simplificar todavía más. Si la función es bastante sencilla: o sea devuelve ( return ) algo y lo hace en una sola línea de código, ya no necesitamos ni las llaves ( {} ) ni la palabra clave return. En este caso se sobreentiende que la función devuelve algo ( implicit return ).

const Elementos = elementos.map( elemento => tipoTitulo(elemento) );
  console.log(Elementos);

En el caso en cual la función anónima no tiene argumentos tenemos que guardar las paréntesis.
Pongamos que queremos sacar en consola un mensaje después de exactamente un segundo. Lo podemos hacer utilizando el método setTimeout:

setTimeout(function() {console.log("hola");}, 1000);

Este es otro caso en el cual una función flecha simplifica mucho el código. Y como que la función anónima no tiene argumentos guardamos las paréntesis.

setTimeout(() => console.log("hola"), 1000);

Funciones flecha con nombre

Las funciones flecha son siempre funciones anónimas, o sea no tienen nombre. Sin embargo podemos hacer trampa: si necesitamos un nombre podemos guardar la función anónima en una variable, y utilizar el nombre de la variable para llamar la función:


const mensaje = cadena => tipoTitulo(cadena);
console.log(mensaje('tEst'));

Trabajar con objetos

Supongamos que tenemos un array de colores y queremos crear un set de círculos, uno para cada color. El radio ( r ) de cada circulo tiene un valor escogido al azar entre 20 y 100.


const colores = ['#AC1848', '#BFB9A4', '#888B90', '#AAB2B7', '#131315','#000000'];

Aquí viene lo importante:
El problema es que un objeto, de punto de vista sintáctico, aparece escrito entre llaves ( {} ) exactamente como el código de una función, y el navegador necesita saber claramente de que se trata. Para esto, si la función tiene que devolver un objeto, tenemos que ponerlo entre paréntesis.

const circulos = colores.map(color => ( {
    r: 20 + Math.random() * 80,
    color: color
  } ) );

Una cosa más: en ES6 podemos evitar redundancias como color: color. Si la clave y el valor son iguales es posible simplificar todavía más la sintaxis de esta manera:

const circulos = colores.map(color => ({
    r: 20 + Math.random() * 80,
    color:color
    color
  }));

Pero si dibujamos un circulo grande encima de otro más pequeño, el circulo pequeño ya no será visible. Así que tenemos que ordenar los círculos en función de su tamaño. Para esto utilizamos el método sort() y, una vez más, ES6 nos lo pone fácil:


circulos.sort( (a,b) => b.r - a.r  );

Podemos comprobar que ya tenemos los círculos organizados por su tamaño sacando el array de círculos en consola:

console.table(circulos);

A continuación iniciamos el canvas


var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");
  var cw = (canvas.width = 300),
    cx = cw / 2;
  var ch = (canvas.height = 300),
    cy = ch / 2;

escribimos la función que dibuja los círculos:


function dibujar(o) {
    ctx.beginPath();
    ctx.arc(cx, cy, o.r, 0, 2 * Math.PI);
    ctx.fillStyle = o.color;
    ctx.fill();
    ctx.stroke();
  }

y los dibujamos:


circulos.map(circulo => dibujar(circulo));

Vea este ejemplo en Codepen

See the Pen ES6 Funciones flecha => Trabajar con objetos by Gabi (@enxaneta) on CodePen.

La palabra clave this en ES6

Hay situaciones en los cuales es preferible utilizar las funciones anónimas "de toda la vida" en lugar de las nuevas funciones flecha.

Muchas veces utilizamos sliders para variar los parámetros de un script. En el caso en el cual utilizamos una función anónima normal, la palabra clave this representa al slider, y esto es exactamente lo que queremos. En este caso this.value representa el valor del slider.
Si por lo contrario utilizamos una función flecha, la palabra clave this representa al objeto window, y this.value nos da undefined, al menos que una variable var value esté declarada.

Veamos un sencillo ejemplo: en el HTML hay dos sliders:


<p><input type="range" id="thisFunction"></p>
<p><input type="range" id="thisFlecha"></p>

Y este es el JavaScript 


var value = "WINDOW";// no utilizar const o let aquí
// en este caso this representa al slider, y this.value devuelve el valor del slider
thisFunction.addEventListener("input", function(){console.log(this.value)},false);
// en este caso this representa al objeto window y this.value devuelve el valor de la variable value
thisFlecha.addEventListener("input", () => console.log(this.value) ,false);//"WINDOW"

Vea este ejemplo en Codepen y no olvide abrir la consola de su navegador.

See the Pen ES6 eventos & this by Gabi (@enxaneta) on CodePen.