¿Qué son las arrow functions?

Las arrow functions son una manera más concisa de escribir funciones en JavaScript. En lugar de utilizar la palabra clave function y los paréntesis para definir una función, las arrow functions utilizan una flecha => para separar los parámetros de la función del cuerpo.

Por ejemplo, de esta forma creariamos una función en Javascript clásica, sin el uso de las arros functions:

function sum(a, b) {
  return a + b;
}

y de esta forma lo haríamos con las funciones flechas:

const sum = (a, b) => a + b;

Como puedes ver, la arrow function es mucho más corta y fácil de leer que la función tradicional. Además, las arrow functions tienen algunas otras características únicas que veremos más adelante.

¿Cuándo debo utilizar las arrow functions?

Las arrow functions son especialmente útiles cuando se utilizan como funciones anónimas, ya que da muy buena legibilidad a tu código. Por ejemplo, puede utilizar una arrow function como argumento a una función de arrays como map() o filter().

Características de las arrow functions

Hay algunas características de las arrow functions que debes tener en cuenta a la hora de utilizarlas:

Contexto de funciones flechas

Una de las principales ventajas de las arrow functions es que podemos hacer uso del this, ya que su contexto es el mismo que el del ambito en el que se declaró. Esto es muy útil, porque de esta forma nos evitamos el uso de bind() o cualquier otra forma para acceder al contexto exterior.

Por ejemplo, supongamos que tenemos un objeto con un método que utiliza una función de devolución de llamada para realizar una tarea asíncrona:

const obj = {
  count: 0,
  incrementCount: function() {
    setTimeout(function() {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};

obj.incrementCount(); // undefined

En este ejemplo, no tenemos acceso al this, por lo que la funcion nos mostrará

const obj = {
  count: 0,
  incrementCount: function() {
    setTimeout(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};

obj.incrementCount(); // 1 Como puede ver, la arrow function tiene acceso al valor de this del objeto obj y, por lo tanto, el contador se incrementa correctamente.

No tienen una propiedad arguments

Otra cosa a tener en cuenta al utilizar arrow functions es que no tienen una propiedad arguments, que es un objeto que contiene todos los argumentos pasados a la función. Si necesita acceder a los argumentos de una arrow function, debe especificar los parámetros de la función de manera explícita.

Por ejemplo, si deseas escribir una función que sume todos los argumentos pasados a ella, podría hacerlo de la siguiente manera con una función tradicional:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15 Pero si intentas hacer lo mismo con una arrow function, obtendrás un error:

const sum = () => {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
};

console.log(sum(1, 2, 3, 4, 5)); // Uncaught ReferenceError: arguments is not defined Para solucionar este problema, se debe especificar los parámetros de la función de manera explícita:

const sum = (...args) => {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
};

console.log(sum(1, 2, 3, 4, 5)); // 15

Conclusión

Las arrow functions son una característica útil y concisa de JavaScript que le permiten escribir funciones de manera más clara, legible y mantenible.