Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Arrow Functions en JavaScript

arrow functions

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:

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

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana. Bye ?

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal