Las arrow functions son una alternativa más pequeña a las funciones tradicionales, más simple y ligera de leer. Además de tener diferentes comportamientos en diferentes situaciones.

const sum = (a, b) => a + b;
sum(5, 10); // 15

La sintaxis varía dependiendo de lo que haga la función o los datos que obtiene.

Sintaxis

Lo primero y más notable a la vista es que se elimina la palabra function y se le agrega una fecha (=>) entre el argumento y el corchete.

// Functión tradicional
function (a) {
	return a + 2;
}

// Arrow function
(a) => {
	return a + 2;
}

Aunque el ejemplo anterior es válido y funciona, normalmente cuando se retornan valores en una arrow function, se pueden quitar los corchetes y la palabra return. El retorno queda de forma implícita.

(a) => a + 2;

Finalmente si solo se tiene un argumento, se pueden eliminar los paréntesis.

a => a + 2;
Nota

Los tres ejemplos hacen completamente lo mismo, simplemente son varias formas de crear una arrow function, limpiando un poco la sintaxis. Aunque hay que tener cuidado sobre en que momento y como se usan.

En caso de tener varios argumentos, los paréntesis son obligatorios.

// Función tradicional
function (a, b) {
	return a + b;
}

// Arrow function
(a, b) => a + b;

Lo mismo pasa en caso de que no haya argumentos.

// Función tradicional
function () {
	return 10 + 5;
}

// Arrow function
() => 10 + 5;

Lo mismo pasa con return, en caso de que se necesite de líneas adicionales. Las arrow functions no saben que valor se va a regresar o en que momento.

// Función tradicional
function (a, b) {
	let c = 84;
	return a + b + c;
}

// Arrow functions
(a, b) => {
	let c = 84;
	return a + b + c;
}

Nombrando una arrow function

Para darle un nombre a una arrow function, esta se declara como expresión, es decir, se le da un nombre como a las variables.

// Función tradicional
function sum(a, b) {
	return a + b;
}

// Arrow function
let sum = (a, b) => a + b;

Las arrow functions y this

Las arrow functions cuentan con algo llamado Lexical this, que nos permiten con this llegar a un nivel superior de la función.

Por ejemplo, en una clase. El valor de this usando arrow functions es el contexto en el cual fue creado esa función.

class Persona {
  constructor() {
    this.edad = 0;
  }

  aumentarEdad() {
    setInterval(() => {
      this.edad++;
      console.log(this.edad);
    }, 1000)
  }
}

let fili = new Persona();
fili.aumentarEdad();

// 1, 2, 3, 4, 5, 6

Para más detalles, entre otros ejemplos de this, te dejo el siguiente artículo:

This en diferentes situaciones y su comportamiento
this no es algo fijo, sino que siempre va a estar en constante cambio y depende de en donde y como se use. En esta pequeña guía entenderas mejor este concepto.

Limitantes

Sin el objeto arguments

A diferencia de las funciones tradicionales, las arrow functions no cuentan con el objeto arguments.

// Función tradicional
function multi(a, b) {
	return arguments[0] * arguments[1];
}

multi(5, 5); // 25

// Arrow function
let multi = (a, b) => arguments[0] * arguments[1];
multi(5, 5);

// Uncaught ReferenceError: arguments is not defined

Sin el operador new

Las arrow functions no se pueden usar como constructores, devolviendo un error cuando se usen con new.

let MyFunction = () => {};
let instance = new MyFunction(); // TypeError: MyFunction is not a constructor

Sin la propiedad prototype

Las arrow functions no cuentan con la propiedad prototype.

let MyFunction = () => {};
console.log(MyFunction.prototype); // undefined

Otras limitantes

Recursos