• Las arrow functions son una nueva forma de expresar funciones, además de las declaradas y las expresiones funcionales (al igual que estas, no se alzan).
  • Al principio cuesta visualmente acustumbrarse ya que se usan sobre todo en una única sentencia, es decir, todo el cuerpo de la función es una única línea.
  • Escribamos una de cada.
// Función declarada
function sayHi1(name) {
    console.log(`Hi ${name}!`)
}

// Expresión funcional
const sayHi2 = function(name) {
    console.log(`name ${name}!`)
}

// Función flecha
const sayHi3 = (name) => console.log(`name ${name}!`)
  • Como ves a la izquierda del arrow operator encontramos la recepción de argumentos y a la derecha la expresión que se evaluará y producirá un resultado.
  • Las funciones flecha (arrow functions) JavaScript pueden o no aceptar argumentos, en cuyo caso hay que escribir unos paréntesis vacíos, o aceptar N número de argumentos, como sus hermanas mayores.
  • Si sólo hay un argumento, se pueden prescindir de los paréntesis.
  • Las funciones flecha JavaScript tiene return implícito, es decir, no hace falta especificarlo.
// Return implícito
const double = num => num * 2;
console.log(double(3))
  • Si queremos realizar más operaciones en arrow function debemos usar las llaves {} para delimitar el cuerpo y especificar el valor a retornar.
// Return explícito
const quadruple = (num) => {
    let value = double(num) // teaser let variables
    return value * 2
}

const num = quadruple(2)
console.log(num)
  • Por último pero no menos importante (de echo creo es lo más importante), las arrow functions JavaScript no tienen this sino que acceden al valor léxico exterior. Esto hace que sean excepcionalmente útiles como métodos en objetos. Pongamos un ejemplo.
const cat = {
    name: "Guizmo",
    tags: ["fucking", "amazing", "black", "cat", "😼"],
    showTags() {
        this.tags.forEach(tag => console.log(tag))
//		this.tags.forEach(function(tag){
//			console.log(this === cat)
//		});
    }
};

cat.showTags();
  • Espero que te hayas dado cuenta de esto: si las arrow functions JavaScript no tiene this, eso quiere decir que no pueden usarse como constructuras en clases y objetos. Tenlo en cuenta.
  • Si esto de this es algo borroso para ti, no te precupes, te dejo el enlace un par de piezas escritas por mi sobre el tema. Dale un vistazo. Pueden ocurrir dos cosas, que te aclaras con lo que significa this o que te duermas :).
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso JavaScript en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende JavaScript moderno?

Resuelve todas tus dudas sobre JavaScript en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬