Cómo utilizar las arrow functions en JavaScript

Las arrow functions (o funciones flechas) fueron introducidas en ECMAScript 6 y cambiaron de una forma sustancial la forma de escribir funciones en javascript.

La sintaxis es sencilla y además nos permite manejar this de una forma bastante útil en según qué circustáncias. 

Sintaxis básica

Veamos un ejemplo simple para una función que suma dos números dados por sus argumentos.

Con una función tradicional tendríamos algo como esto:

function sumar (a,b){
 return a + b 
}
console.log(sumar(3,7)) // 10

Poco a poco vamos a transformarla en una arrow function. Lo primero que haremos es transformar nuestra función declarada, en una expresión:

const sumar = function (a,b) {
  return a + b
}

Y ahora llega la parte donde realmente la convertimos en una función de flecha. Para hacerlo, simplemente eliminamos la palabra 'function' y agregamos una flecha compuesta por un signo '=' seguido de un '>' justo después de los argumentos. Incluso si solo tuviéramos un argumento, podríamos omitir los paréntesis que lo rodean.

const sumar = (a,b) => {
  return a + b
}

Con esto ya tendríamos nuestra función flecha, pero podemos hacer algo más para que nuestro código quede más conciso. 

Por defecto, una arrow function tiene un return implícito cuando creamos la expresión, por ello podemos quitar las llaves y el return para obtener algo como esto:

const sumar = (a,b) => a + b
console.log(sumar(3,7)) // 10

Pero ojo, el return directo es solo útil si tienes una expresión, o para ponerlo más simple, si cabe en una sola línea. Si no puedes resumir tu función a una expresión, tendrás que usar las llaves y el return.

Usando funciones flecha como callbacks

Desde mi punto de vista, una de las cosas más útiles de las arrow functions es usarlas en callbacks de otras funciones, ya que el código queda bastante limpio y conciso. Métodos como map, filter o reduce idóneos para funciones flecha. 

Veamos un ejemplo con un map, donde queremos realizar un map para obtener el cuadrado de los valores de un array. 

const numeros = [1, 2, 3, 4, 5];
const cuadrados = numeros.map(numero => numero * numero);
console.log(cuadrados); // Output: [1, 4, 9, 16, 25]

Como ves, la conjunción de map con arrow functions crea un código muy limpio y entendible. 

El contexto de las arrow functions

Quizás esta es la parte un poco más compleja de entender para los no iniciados, pero algo realmente útil de conocer. 

Al principio del artículo comentaba que las arrow functions permitían manejar this de una forma más sencilla.

Esto cobra relevancia cuando estamos en un estado de asincronía, o dicho de otra forma, cuando nuestro código no se ejecuta inmediatamente sino que dependemos de una acción externa como la respuesta de una API, lectura de disco, etc. 

Las arrow functions heredan el ámbito del contexto donde fueron definidas. Quizás te suene raro, pero veámoslo con un ejemplo:

function Persona(nombre) {
  this.nombre = nombre;
  this.saludar = function() {
    console.log('Hola, soy ' + this.nombre);
  };
}
const persona1 = new Persona('Juan');
setTimeout(persona1.saludar, 1000); // Output: Hola, soy undefined

En este caso como llamamos a saludar de forma asíncrona un segundo después, la función saludar no tiene el contexto de la función Persona, por lo que el atributo no estará disponible, devolviendo undefined

Hagamos lo mismo pero con una arrow function 

function Persona(nombre) {
  this.nombre = nombre;
  this.saludar = () => {
    console.log('Hola, soy ' + this.nombre);
  };
}

const persona2 = new Persona('Ana');
setTimeout(persona2.saludar, 1000); // Output: Hola, soy Ana

En este punto, gracias a las arrow functions, la función saludar contendrá el ámbito donde fue declarada teniendo acceso al atributo nombre.