009. Arrow function – funciones flecha

Las arrow function son una implementación que vino a mejorar sobre todo la manera en como escribimos, es más expresivo, más sintético, e incluso, para alguien que no sepa mucho sobre la sintaxis de programación, es claro el tipo de expresiones que se pueden lograr con las arrow function o funciones flecha.

Características de las arrow function

Primero son una nueva forma de definir funciones anónimas que sean expresadas. Ya dimos con anterioridad la diferencia entre funciones declaradas y funciones expresadas, las funciones expresadas eran cuando a una variable le asignamos el valor de una función anónima.

Ejm

// Función expresada, a una variable le asignamos
// como valor una función anónima
const saludo = function() {
   console.log("Hola");
}
saludo();

Al no ser una función declarada, no va a haber hoisting, y no vamos a poder llamar a dicha función antes de crearla, como en el caso de las funciones declaradas.

Una arrow function tiene la siguiente sintaxis:

// Arrow function / función expresada anónima
const saludo = () => {
   console.log("Hola");
}

Cuando nuestra función tiene una sola linea de código que se ejecuta, podemos utilizar la siguiente sintaxis:

const saludo = () => console.log("Hola");

Podemos omitir las llaves, por lo que todo se vuelve más expresivo.

Paso de parámetros

El paso de parámetros a la función lo hacemos de la siguiente manera.

Ejm

const saludar = (nombre) => console.log("Hola" + nombre);
saludar("Francisco");

Cuando una función flecha no recibe parámetros, forzosamente hay que poner los paréntesis, pero si recibe un sólo parámetro ya no es necesario poner los paréntesis.

Ejm

const saludar = nombre => console.log("Hola" + nombre); 
saludar("Francisco");

Las funciones flecha llevan ya de por sí un return implícito. Nos evitamos utilizar la palabra return, por lo que no es necesario incluir dicha palabra. Lo vemos en el siguiente ejm.

Ejm

      // Función sin retorno implícito
      const sumar = function (a, b) {
        return a + b;
      };
      console.log(sumar(1, 2));

      // Arrow function con retorno implícito
      const sumar2 = (a, b) => a + b;
      console.log(sumar2(3, 4));

De esta manera se  vuelve más expresiva la escritura en las arrow function. Si recibe más de un parámetro ha de llevar paréntesis. Si sólo hay una linea de código se pueden omitir las llaves.

Veamos otro ejm.

Ejm

      const numeros = [1, 2, 3, 4, 5];
      // Vamos a iterar sobre cada uno de los números
      // e imprimirlos en pantalla
      numeros.forEach((el, index) => {
        console.log(`El elemento ${el} está en la posición ${index}`);
      });

Hay otra característica muy importante que tienen las arrow function, tienen la capacidad de capturar el objeto this del contexto en el que se encuentren. Hay que tener mucho cuidado para utilizar arrow function para declarar métodos dentro de objetos literales porque podemos tener el problema de que no respeten el contexto del objeto en el que se encuentran. Las arrow function saltan el objeto en el que se encuentran y heredan el contexto en el que se encuentra el objeto padre donde se ha declarado.

Dentro de un objeto literal no es muy buena idea crear métodos a partir de funciones flecha.