Arrow functions (funciones flecha)
- 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 significathis
o que te duermas :).
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.