Funciones flecha
Ya sabes declarar una función, pasar argumentos y devolver un valor con return. Muchos ayudantes cotidianos son tan cortos que la palabra function completa se siente pesada. JavaScript también permite escribirlos con una flecha — el token => — en una línea más compacta.
Qué es una función flecha
Sigue siendo una función: recibe entradas, ejecuta un cuerpo y puede devolver un resultado. Cambia la forma. Suele guardarse en const, listar parámetros, escribir => y luego una expresión corta o un bloque { }.
Flecha junto a la función clásica
📊 Función clásica frente a flecha
| Idea | Estilo clásico | Estilo flecha |
|---|---|---|
| ayudante con nombre | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| devolver una expresión | return a + b; dentro de { } |
la expresión tras => vuelve sola |
| varias sentencias | { } más return |
misma regla: { } y return |
| un parámetro | (name) |
name => ... (paréntesis opcionales) |
| sin parámetros | function hi() { ... } |
const hi = () => ... — () vacíos obligatorios |
| dónde vive | declaración o expresión | casi siempre en una variable |
Ambos estilos pueden devolver números y cadenas. Prefiere la flecha cuando el ayudante es pequeño y quieres un nombre claro con const. Prefiere function clásica cuando quieres un bloque con nombre bien visible — ambos son JavaScript válido.
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
El cuerpo expresión devuelve solo
Tras =>, una sola expresión se evalúa y se devuelve sola. Sin { } y sin la palabra return. Aquí double(5) pasa a ser 10. Cambia el argumento; el producto sigue a las entradas.
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
Las llaves significan que controlas el return
Cuando el cuerpo usa { }, JavaScript no devuelve automáticamente la última línea. Escribe return tú, igual que en una función clásica. Así las salidas tempranas y la lógica en varios pasos siguen claras.
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
Un parámetro puede omitir los paréntesis
Si hay exactamente un parámetro, puedes escribir name => ... sin ( ). El sitio de llamada no cambia: greet("Sara"). Con dos o más parámetros, mantén los paréntesis.
const hello = () => "Hello";
console.log(hello());
Cero parámetros siguen necesitando ()
Sin entradas, escribe paréntesis vacíos antes de =>. Omitirlos es un error de sintaxis. La llamada sigue siendo hello() — el par vacío marca «sin parámetros».
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
Nómbrala y luego llámala
const add = (a, b) => a + b guarda la flecha bajo add. La llamas como cualquier función: add(3, 4) devuelve 7. El mismo ayudante, dos llamadas — sin reescribir el cuerpo.
Pon una flecha en la página
Construye un saludo con una flecha, llámala y escribe el resultado en un párrafo — el mismo patrón de página, forma más corta.
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
El párrafo muestra Hello, Omar. La flecha devolvió la cadena; la línea siguiente la puso en la página. Cambia solo el argumento, recarga y lee la nueva línea. La siguiente lección trata el ámbito — dónde se ven esos nombres.
Pasos de práctica
- Reescribe
function triple(n) { return n * 3; }como flechaconstcon cuerpo expresión. - Escribe
const hi = name => "hi " + namey registrahi("Neda"). - Escribe
const ping = () => "pong"y llámala una vez. - Escribe una flecha con bloque que devuelva
"zero"sin === 0, si no"nonzero". - Tras
const add = (a, b) => a + b, comprueba queadd(6, 1)da7. - En la demo HTML, cambia solo la cadena del argumento, recarga y lee el párrafo.
Tropiezos frecuentes
- Abrir
{ }tras=>y olvidarreturn— la llamada rindeundefined - Quitar
()cuando hay cero parámetros - Confundir
=>con operadores de comparación — la flecha es sintaxis de función, no «mayor que» - Esperar aquí una lección completa de
this— las diferencias de enlace van en una página posterior; aquí es la forma compacta - Creer que las flechas sustituyen el conocimiento de
return— las expresiones siguen devolviendo; los bloques siguen necesitandoreturn
Resumen
- Las funciones flecha usan
=>y suelen guardarse enconst - Una expresión desnuda tras
=>se devuelve sola - Un cuerpo
{ }necesitareturnexplícito - Un parámetro puede omitir
( ); cero parámetros necesitan()vacíos - Llama a la flecha por su nombre como a cualquier función
- La página puede usar una cadena devuelta por una flecha
- Siguiente: ámbito — dónde viven los nombres
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior