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.

//Antes
var saludo = function (nombre) {
  return 'Hola ' + nombre;
};
console.log( saludo('Jonathan') ); //Imprime Hola Jonathan

//Ahora
let saludo = nombre => `Hola ${nombre}`;
console.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.

//Antes
var sumar = function (a, b) {
  return a + b;
};
console.log( sumar(10, 9) ); //Imprime 19

//Ahora
let sumar = (a, b) => a + b;
console.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.

//Antes
var saludo = function () {
  return 'Hola a tod@s';
};
console.log( saludo() ); //Imprime Hola a tod@s

//Ahora
let saludo = () => `Hola a tod@s`;
console.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.

//Antes
var fecha = new Date(),
  hora = fecha.getHours();

var saludo = function (hr) {
  if (hr <= 5) {
    return 'No me jodas!!!';
  } else if(hr >= 6 && hr <= 11) {
    return 'Buenos días!!!';
  } else if(hr >= 12 && hr <= 18) {
    return 'Buenas tardes!!!';
  } else {
    return 'Buenas noches!!!';
  }
};

console.log( saludo(hora) ); //Imprime el saludo dependiendo la hora del día

//Ahora
let fecha = new Date(),
  hora = fecha.getHours();

let saludo = (hr) => {
  if (hr <= 5) {
    return 'No me jodas!!!';
  } else if(hr >= 6 && hr <= 11) {
    return 'Buenos días!!!';
  } else if(hr >= 12 && hr <= 18) {
    return 'Buenas tardes!!!';
  } else {
    return 'Buenas noches!!!';
  }
};

console.log( saludo(hora) ); //Imprime el saludo dependiendo la hora del día

//Antes
var numeros = [1, 2, 3, 4];

numeros.forEach(function (num) {
  console.log(num); //Imprime el número en turno
  console.log(num * 10); //Imprime el número en turno por 10
});

//Ahora
let numeros = [1, 2, 3, 4];

numeros.forEach((num) => {
  console.log(num); //Imprime el número en turno
  console.log(num * 10); //Imprime el número en turno por 10
});

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.

//El problema de `this` Antes
function Persona(nombre) {
  //El constructor Persona() define `this` como una instancia de él mismo
  this.nombre = nombre;
  this.edad = 0;

  setInterval(function () {
    //La función anónima define `this` como una instancia de ella misma
    this.edad++;
  }, 1000);
}

var jon = new Persona('Jonathan');
console.log(jon); //Imprime la edad en 0 por cada segundo que pasa

//La solución al problema de `this` Antes
function Persona(nombre) {
  //Se declara una variable self (algunos prefieren that) para guardar el `this` del constructor Persona()
  var self = this;

  self.nombre = nombre;
  self.edad = 0;

  setInterval(function () {
    //La función anónima define su propio `this` pero el valor que aumenta es edad del `this` de Persona()
    self.edad++;
  }, 1000);
}

var jon = new Persona('Jonathan');
console.log(jon); //Imprime el valor de edad más uno por cada segundo que pasa

//La solución al problema de `this` Ahora
function Persona(nombre) {
  //El constructor Persona() define `this` como una instancia de él mismo
  this.nombre = nombre;
  this.edad = 0;

  setInterval(() => {
    //`this` hace referencia al objeto Persona()
    this.edad++;
  }, 1000);
}

const jon = new Persona('Jonathan');
console.log(jon); //Imprime el valor de edad más uno por cada segundo que pasa
console.log(jon.edad); //Imprime la edad

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

• JavaScript desde cero
• Node.js desde cero
• JavaScript Avanzado: Paradigmas de Programación
• HTML5 Avanzado: Progressive Web Apps
• React desde cero
• Angular desde cero
• Vue.js desde cero

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

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

1. ECMAScript el estándar de JavaScript
2. Babel
3. Variables,Constantes y Niveles de Bloque
4. Template Strings

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