Arrow Functions en JavaScript

Las funciones de flecha, o arrow functions son una nueva forma de definir funciones y hay distintas variantes en la sintaxis:

Función de un solo parámetro.

Al crear una arrow function de un solo parámetro no es necesario escribír los paréntesis, tampoco es necesario escribír las llaves, esto se puede cuando la función es de una sola línea y devuelve un valor.

1//Antes
2var saludo = function (nombre) {
3  return 'Hola ' + nombre;
4};
5console.log( saludo('Jonathan') ); //Imprime Hola Jonathan
6
7//Ahora
8let saludo = nombre => `Hola ${nombre}`;
9console.log( saludo('Jonathan') ); //Imprime Hola Jonathan

Función de varios parámetros.

Cuando la función tenga más de un parámetro es necesario envolver el nombre de estos entre paréntesis.

1//Antes
2var sumar = function (a, b) {
3  return a + b;
4};
5console.log( sumar(10, 9) ); //Imprime 19
6
7//Ahora
8let sumar = (a, b) => a + b;
9console.log( sumar(10, 9) ); //Imprime 19

Función sin parámetros.

Cuando la función no reciba parámetros también son necesarios los paréntesis.

1//Antes
2var saludo = function () {
3  return 'Hola a tod@s';
4};
5console.log( saludo() ); //Imprime Hola a tod@s
6
7//Ahora
8let saludo = () => `Hola a tod@s`;
9console.log( saludo() ); //Imprime Hola a tod@s

Función con cuerpo.

Cuando la función tiene más de una línea (o no devuelve ningún valor) es necesario utilizar las llaves.

1//Antes
2var fecha = new Date(),
3  hora = fecha.getHours();
4
5var saludo = function (hr) {
6  if (hr <= 5) {
7    return 'No me jodas!!!';
8  } else if(hr >= 6 && hr <= 11) {
9    return 'Buenos días!!!';
10  } else if(hr >= 12 && hr <= 18) {
11    return 'Buenas tardes!!!';
12  } else {
13    return 'Buenas noches!!!';
14  }
15};
16
17console.log( saludo(hora) ); //Imprime el saludo dependiendo la hora del día
18
19//Ahora
20let fecha = new Date(),
21  hora = fecha.getHours();
22
23let saludo = (hr) => {
24  if (hr <= 5) {
25    return 'No me jodas!!!';
26  } else if(hr >= 6 && hr <= 11) {
27    return 'Buenos días!!!';
28  } else if(hr >= 12 && hr <= 18) {
29    return 'Buenas tardes!!!';
30  } else {
31    return 'Buenas noches!!!';
32  }
33};
34
35console.log( saludo(hora) ); //Imprime el saludo dependiendo la hora del día
36
37//Antes
38var numeros = [1, 2, 3, 4];
39
40numeros.forEach(function (num) {
41  console.log(num); //Imprime el número en turno
42  console.log(num * 10); //Imprime el número en turno por 10
43});
44
45//Ahora
46let numeros = [1, 2, 3, 4];
47
48numeros.forEach((num) => {
49  console.log(num); //Imprime el número en turno
50  console.log(num * 10); //Imprime el número en turno por 10
51});

Contexto Léxico de `this`.

Las arrow function tienen la capacidad de capturar el objeto this del contexto donde la arrow se ejecuta y así utilizarlo dentro de su bloque de sentencias.

1//El problema de `this` Antes
2function Persona(nombre) {
3  //El constructor Persona() define `this` como una instancia de él mismo
4  this.nombre = nombre;
5  this.edad = 0;
6
7  setInterval(function () {
8    //La función anónima define `this` como una instancia de ella misma
9    this.edad++;
10  }, 1000);
11}
12
13var jon = new Persona('Jonathan');
14console.log(jon); //Imprime la edad en 0 por cada segundo que pasa
15
16//La solución al problema de `this` Antes
17function Persona(nombre) {
18  //Se declara una variable self (algunos prefieren that) para guardar el `this` del constructor Persona()
19  var self = this;
20
21  self.nombre = nombre;
22  self.edad = 0;
23
24  setInterval(function () {
25    //La función anónima define su propio `this` pero el valor que aumenta es edad del `this` de Persona()
26    self.edad++;
27  }, 1000);
28}
29
30var jon = new Persona('Jonathan');
31console.log(jon); //Imprime el valor de edad más uno por cada segundo que pasa
32
33//La solución al problema de `this` Ahora
34function Persona(nombre) {
35  //El constructor Persona() define `this` como una instancia de él mismo
36  this.nombre = nombre;
37  this.edad = 0;
38
39  setInterval(() => {
40    //`this` hace referencia al objeto Persona()
41    this.edad++;
42  }, 1000);
43}
44
45const jon = new Persona('Jonathan');
46console.log(jon); //Imprime el valor de edad más uno por cada segundo que pasa
47console.log(jon.edad); //Imprime la edad

Recuerda que en EDteam tenemos varios cursos que te introducen y especializan en este maravilloso lenguaje:

En el siguiente capítulo te hablaré de los objetos literales.

Artículos anteriores de la serie 'El estándar actual de JavaScript':

Me despido, sean felices, hasta siempre, nos leemos la próxima semana. Bye.