Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
Las funciones flecha son una forma más corta de escribir funciones, muy usada en JavaScript moderno. Hacen exactamente lo mismo que una función normal, con una sintaxis más breve.
Explicación
Las funciones flecha reemplazan la sintaxis function por una flecha =>:
(parámetros) => {...}Sintaxis de una función flecha: reemplaza la palabra function por una flecha => después de los parámetros.
(edad) => edad >= 18Si el cuerpo es una sola expresión, puedes omitir las llaves {} y el return: el resultado de esa expresión se devuelve automáticamente.
const nombre = (...) => {...}Las funciones flecha casi siempre se guardan en una variable con const, porque no se pueden declarar con la sintaxis function nombre() {...}.
Reto rápido
Convierte esMayorDeEdad (la función normal) en una función flecha equivalente, guardada en una nueva variable.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Usa la forma corta (sin llaves ni return) solo cuando el cuerpo de la función sea una única expresión; si necesitas varias líneas, usa llaves {} con un return explícito.
Dato extra
Además de ser más cortas, las funciones flecha manejan this de forma distinta a las funciones normales: una diferencia que vas a notar más adelante, sobre todo trabajando con objetos y eventos.
Error común
Usar llaves {} en una función flecha y olvidar el return (const esMayorDeEdad = (edad) => { edad >= 18 };): sin return explícito dentro de {}, la función devuelve undefined en vez del resultado esperado.
Siguiente paso
Ya sabes escribir funciones de las dos formas más comunes en JavaScript. En el siguiente módulo vas a usarlas junto con arrays, para recorrer y transformar listas completas de datos.
Ir a la siguiente lección