arrow functions

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;

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.

Fili SantillánFili Santillán

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

• No cuenta con super y no debe usarse como método.
• No cuenta con new.target.
• No se recomienda usar con call, apply y bind. Métodos para el establecimiento del scope.
• No se puede usar yield.

Recursos

• Arrow function expressions
• Let’s Learn ES2015