ES6: Funciones flecha (Arrow functions)

Esta es la segunda entrada sobre ES6. La primera fue sobre las nuevas formas de declarar variables que introduce ES6 y, en esta entrada, vamos a ver otra de las novedades que presenta que son las funciones flecha o arrow functions. Una nueva forma de definir funciones anónimas mucho más simple y corta.

Vamos a ver un ejemplo de cómo se declararía una función con un parámetro de la nueva forma y lo compararemos con la forma tradicional de hacerlo:

// ES5

var testFunction = function (x) {

return x * 5;

}

console.log(testFunction(2)); // 10

// ES6

let testFunctionES6 = (x) => x * 5;

let testFunctionES6WithoutParenthesis = x => x * 5;

console.log(testFunctionES6(2)); // 10

console.log(testFunctionES6WithoutParenthesis(2)); // 10

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Funciones-flecha-con-un-parametro

En este ejemplo, vemos como se declara un función de la forma tradicional con el function, los {} y un return. Pero, con ES6 todo esto se simplifica, el function, los {} y el return se eliminan y se le añade =>, simplificando todo a una línea. Hay veces que los {} se deberán mantener, ésto será cuando la función tiene más de una línea o no devuelve ningún valor (return).

Como podéis ver en la línea 9, es la misma función pero los parámetros de la función no tienen paréntesis. Esto es debido a que si la función solamente tiene un parámetro los paréntesis son opcionales, no hace falta ponerlos.

Si tuviésemos una función con varios parámetros o sin parámetros, los paréntesis son obligatorios:

// Múltiples parámetros

let multiply = (x, y, z) => x * y * z;

console.log(multiply(2, 3, 4));

// Sin parámetros

let helloWord = () => 'Hello World!!';

console.log(helloWord());

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Funciones-flecha-con-multiples-parametros-y-sin

Las funciones flecha también pueden ser utilizadas en cualquier función que tenga como parámetro una función:

let languages = ['PHP', 'JS', 'C', 'Java', 'Ruby', 'Python'];

let stringLength = languages.map(lang => lang.length);

console.log(stringLength);

let lengthLessThan3 = languages.filter(lang => lang.length < 3 );

console.log(lengthLessThan3)

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Funciones-flecha-con-funciones-JS

Otra cosa interesante, es que las funciones arrow resuelven la problemática con el valor de this. Ésta era una problemática que llegaba a dar bastantes dolores de cabeza, ya que this según el contexto donde se ejecutaba, podía llegar a tener un valor u otro. Seguramente te suene var that = this; o bindearlo con el método .bind(this) o cosas por el estilo para resolver esto. Pues con las funciones flecha se resuelve, ya que no tienen su propio this, si no que this es una instancia de la función exterior, como podemos ver el siguiente ejemplo:

// ES5

function Language() {

this.name = 'JavaScript ES5';

this.functionTest = function() {

// var that = this;

setTimeout(function() {

// console.log(that.name);

// console.log(this); // window

console.log(this.name);

}, 500);

}

var test = new Language();

test.functionTest(); // no muestra nada porque el this hace referencia a window y no a Language

// ES6

function LanguageES6() {

this.name = 'JavaScript ES6';

this.functionTest = function() {

setTimeout(() => {

// console.log(this); // LanguageES6

console.log(this.name);

}, 500);

}

var testES6 = new LanguageES6();

testES6.functionTest(); // sí que se muestra porque el this se refiere a LanguageES6, gracias a las funciones flecha

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Funciones-flecha-this

Deja una respuesta Cancelar la respuesta