La lección anterior terminó con una limitación: pesoDePrioridad y describirTarea son declaraciones con nombre fijo, disponibles siempre y siempre iguales. Pero en Nómada Tareas vas a necesitar algo más flexible: una tabla que asocie cada estado con la función que lo formatea, una lista de validadores que se recorra con un bucle, o una función que se elija en tiempo de ejecución según lo que haya pedido Marta. Todo eso es posible porque en JavaScript una función es un valor, exactamente igual que un número o un texto: se puede guardar en una variable, meter en un array, poner dentro de un objeto y pasar como argumento. En esta lección aprenderás las dos formas de escribir funciones como valores —la expresión de función y la función flecha—, cuándo usar cada una y qué diferencias reales hay entre ellas.

1. Las funciones son valores de primera clase
2. La expresión de función
3. Expresión de función con nombre
4. La función flecha: la sintaxis completa
5. Devolver un objeto literal desde una flecha
6. Tabla comparativa: declaración vs expresión vs flecha
7. La flecha y this: lo que necesitas saber hoy
8. Un objeto de formateadores para Nómada Tareas
9. Una tabla de validadores recorrible
10. IIFE: la función que se llama a sí misma al nacer
11. Cuándo elegir cada forma
12. Errores Comunes y Consejos
13. Ejercicios
14. Conclusión

Decir que las funciones son ciudadanos de primera clase (first-class citizens) significa que el lenguaje las trata como a cualquier otro valor. Compruébalo con la función de la lección anterior:

Fíjate en la línea const calcularPeso = pesoDePrioridad;: no hay paréntesis. No se está llamando a la función, se está copiando la referencia a la función. Ahora hay dos nombres apuntando al mismo trozo de código. Esto conecta directamente con lo que aprendiste en Variables y Tipos de Datos: las funciones son valores de referencia, como los objetos y los arrays.

Y ese es el mecanismo que hace posible todo lo que viene después: si una función es un valor, se puede pasar a otra función (lo verás en Funciones de Orden Superior) y se puede elegir en tiempo de ejecución.

Una expresión de función es una función escrita en el sitio donde iría un valor. La más habitual es asignarla a una constante:

Tres detalles de sintaxis que conviene marcar:

• Después de function no hay nombre. Se dice que es una función anónima.
• La constante estaVencida es la que da nombre práctico a la función.
• Hay punto y coma al final, porque toda la línea es una asignación (una sentencia), no una declaración.

La diferencia práctica más importante con la declaración es cuándo existe:

Una declaración de función está lista antes de que empiece la ejecución; una expresión asignada a const o let no existe hasta que la línea se ejecuta. El mecanismo completo (el hoisting y la zona muerta temporal) lo estudiarás en Hoisting y el Contexto de Ejecución. La consecuencia práctica de hoy: con expresiones, defina antes de usar.

Esa restricción, que parece un inconveniente, en realidad es una ventaja: obliga a un orden de lectura natural de arriba abajo y evita el estilo desordenado en el que las funciones aparecen después de usarse.

Se puede poner un nombre a la función y además asignarla a una variable. Se llama named function expression:

¿Para qué sirve ese nombre interno, si para llamarla se usa calcularUrgencia?

En la práctica se usa poco, porque los motores modernos ya infieren el nombre de la variable:

La función flecha (arrow function), introducida en ES2015, es una forma más breve de escribir una expresión de función. Su sintaxis tiene varias formas según lo que necesites, y conviene conocerlas todas porque las verás mezcladas en cualquier código real.

Es la traducción literal de una expresión de función: quitas function y pones => entre los paréntesis y las llaves.

Con llaves, el return es obligatorio si quieres devolver algo.

Si el cuerpo es una sola expresión, puedes quitar las llaves y el return. El valor de esa expresión se devuelve automáticamente:

Esta es la forma que más verás en el código profesional para funciones pequeñas.

Con exactamente un parámetro, los paréntesis son opcionales:

Muchos equipos configuran su linter para exigir siempre los paréntesis ((texto) => ...), porque así añadir un segundo parámetro no obliga a reescribir la línea. En Calidad de Código verás cómo se automatiza esa decisión.

Los paréntesis vacíos son obligatorios:

Aquí hay una trampa sintáctica que confunde a todo el mundo la primera vez. Esto no funciona como esperas:

El motor interpreta esas llaves como un bloque de código, no como un objeto literal. Dentro del bloque, titulo: parece una etiqueta (como las break etiqueta de break, continue y Bucles Anidados), no hay return, y la función devuelve undefined.

La solución es envolver el objeto en paréntesis, para que el motor sepa que es una expresión:

Regla para recordarlo: llaves = bloque; paréntesis + llaves = objeto.

Esta es la tabla que conviene tener a mano hasta que las diferencias se te queden grabadas:

Tres de esas filas necesitan aclaración inmediata:

• arguments es un objeto legado que contiene todos los argumentos recibidos aunque no estén declarados como parámetros. Lo verás en Parámetros y Valores de Retorno, junto con su sustituto moderno, los parámetros rest. Las flechas no lo tienen.
• new sirve para crear objetos con funciones constructoras; es materia de Prototipos y Herencia. Con una flecha da error, y eso es deliberado.
• this merece su propio apartado.

this es una palabra clave cuyo valor depende de cómo se llama a la función. Es un tema con matices suficientes para una lección entera, y la tiene: Métodos de Objeto y this. Hoy solo necesitas grabar una frase:

Una función flecha no tiene su propio this: usa el del ámbito donde fue escrita.

De ahí se derivan las dos consecuencias prácticas que te encontrarás:

1. No uses una flecha como método de un objeto cuando el método necesite acceder a los datos de ese objeto. La flecha no "verá" el objeto.
2. Sí usa una flecha para funciones que se pasan a otra función (callbacks, manejadores de eventos del Módulo 6), porque conserva el this de alrededor y eso suele ser justo lo que quieres.

Un ejemplo mínimo, solo para que reconozcas el síntoma cuando aparezca:

No intentes entender ahora por qué: solo recuerda el patrón. En 04-02 lo desmontarás pieza a pieza. Nada de lo que escribas en este módulo depende de this.

Aquí es donde las funciones como valores empiezan a pagar. En el Módulo 2 formateabas cada campo con switch o cadenas de if repartidos por el fichero. Ahora puedes agrupar todos los formateadores en un solo objeto, con la ventaja de que cada uno se puede sustituir, reutilizar o probar por separado.

Explicación de lo que aporta esta estructura:

• Un solo punto de cambio para toda la presentación. Si Marta pide que las fechas se muestren como 30/09/2026, tocas una línea.
• Se elige el formateador con una variable. formateadores[campo](valor) permite formatear un campo cuyo nombre no conoces hasta que se ejecuta el programa. Eso con switch no se podía hacer.
• Cada formateador es independiente. En el Módulo 8 podrás probar formateadores.fecha sin arrancar el resto de la aplicación.

Y así se usa la selección dinámica, aprovechando el ?? de Operadores Básicos:

El const [anyo, mes, dia] = [...] del formateador de fechas es desestructuración de arrays; se estudia en Desestructuración de Arrays. Aquí solo significa "asigna el primer elemento a anyo, el segundo a mes y el tercero a dia".

El segundo patrón que desbloquean las funciones como valores es una lista de reglas. En el Módulo 2, validar una tarea era un bloque de cuarenta líneas con if encadenados. Ahora cada regla es una entrada de un array, con su código y su mensaje:

Lee bien lo que ha ocurrido aquí: añadir una regla nueva ya no significa tocar validarTarea, sino añadir un objeto al array. La función que valida no sabe cuántas reglas hay ni qué comprueban; solo sabe recorrerlas y llamarlas. Esa separación entre el motor y las reglas es una de las ideas más rentables de la programación, y en Funciones de Orden Superior la llevarás mucho más lejos.

Una IIFE (Immediately Invoked Function Expression, expresión de función invocada inmediatamente) es una función que se define y se ejecuta en el acto:

Los paréntesis exteriores convierten la declaración en una expresión; los () finales la llaman. Se usaban masivamente antes de 2015 por un motivo muy concreto: crear un ámbito privado. Antes de let y const, cualquier var en el fichero se volvía global y podía colisionar con otro script de la página. Envolver todo en una IIFE aislaba las variables.

¿Sigue haciendo falta? Casi nunca. Hoy tienes dos herramientas mejores:

Conviene reconocer el patrón porque aparece en muchísimo código heredado, pero en código nuevo lo normal es no escribirlo.

En la práctica profesional, la elección se reduce a estas pautas:

Y una recomendación de estilo que siguen la mayoría de equipos: usa const + flecha por defecto, y declaración solo cuando quieras destacar una función principal del fichero. Lo importante no es cuál eliges, sino que el fichero entero sea coherente.

1. Llamar a una expresión antes de definirla.

Con expresiones y flechas: define arriba, usa abajo. Siempre.

2. Olvidar el return al usar llaves en una flecha.

3. Devolver un objeto sin paréntesis. Ya lo has visto en el apartado 5: (x) => ({ ... }).

4. Olvidar el punto y coma tras una expresión de función. No suele romper nada gracias a la ASI, pero puede producir errores muy raros si la línea siguiente empieza por ( o [.

5. Usar una flecha como método que necesita this. El síntoma es un undefined inexplicable al leer una propiedad del objeto. Si te ocurre en el Módulo 4, vuelve al apartado 7.

6. Confundir funcion con funcion() al guardarla.

Este error es especialmente difícil de ver porque no da error de sintaxis: simplemente guardas undefined o un texto donde esperabas una función, y el fallo aparece líneas después con un TypeError: ... is not a function.

7. Consejo: si la flecha ocupa más de dos líneas, ponle llaves. El retorno implícito con expresiones larguísimas y operadores ternarios encadenados es difícil de leer y peor de depurar (no puedes poner un console.log intermedio sin reescribirla).

8. Consejo: nombra las funciones aunque sean anónimas. Asignarlas a una const con nombre descriptivo no es solo estilo: es lo que hace legibles los mensajes de error del Módulo 8.

Reescribe estas tres funciones como flechas, usando la forma más breve posible en cada caso, y comprueba que dan el mismo resultado.

Crea un objeto comparadores cuyas claves sean 'porHoras', 'porFecha' y 'porPrioridad', y cuyos valores sean funciones que reciban los datos de dos tareas (por índice) y devuelvan -1, 0 o 1 según cuál debe ir antes. Después escribe elMasUrgente(criterio, ...) que recorra el backlog con un bucle y devuelva el índice de la tarea que queda primera según el criterio elegido. No uses sort (llega en 04-05).

Cada uno de estos fragmentos tiene un error relacionado con lo estudiado en la lección. Identifícalo y corrígelo.

Ejercicio 1

Comentario: la tercera no debería escribirse con retorno implícito. Cabría en una línea usando ??, pero el bloque deja claro que hay dos pasos y permite añadir un console.log de depuración sin reescribir nada. Observa además que responsable ?? 'sin asignar' sustituye al ternario: el ?? de Operadores Básicos cubre null y undefined, que es exactamente el caso de la R8.

Ejercicio 2

Comentario: el patrón "máximo con bandera" es el mismo de Bucles, pero ahora el criterio de comparación entra como dato. Cambiar el orden del backlog ya no requiere reescribir el bucle. El throw para el criterio desconocido aplica el principio de fallar pronto de Manejo de Errores.

Ejercicio 3

En b) aparece la abreviatura { titulo, horas }, equivalente a { titulo: titulo, horas: horas }; se estudia en Introducción a los Objetos. En d), el síntoma real es un TypeError: acciones.imprimir is not a function en la línea siguiente, lejos del error verdadero: un recordatorio de que el punto donde revienta y el punto donde está el fallo rara vez coinciden.

Has aprendido que en JavaScript una función es un valor de primera clase: puedes asignarla a una variable, guardarla en un array o en un objeto, compararla por referencia y pasarla como argumento. Esa propiedad, que parece un detalle técnico, es la que hace posibles los dos patrones que ya has puesto en marcha en Nómada Tareas: el objeto formateadores, que centraliza toda la presentación de campos y permite elegir el formateador con una variable, y el array validadores, que convierte cada regla de negocio en un dato y deja validarTarea completamente ajena a cuántas reglas existan.

Conoces las tres formas de escribir una función y sus diferencias reales: la declaración, disponible antes de su línea; la expresión de función, anónima o con nombre interno, que solo existe a partir de su asignación; y la función flecha, con sus variantes de cuerpo de bloque, retorno implícito, un parámetro y sin parámetros, además del truco de los paréntesis para devolver un objeto literal. Sabes que la flecha no tiene this propio ni arguments ni puede usarse con new, y que ese primer punto lo cerrarás en Métodos de Objeto y this. Y reconoces la IIFE, el patrón con el que se aislaban variables antes de que existieran let, const y los módulos.

Hay algo que se ha ido volviendo incómodo por el camino. Los validadores del apartado 9 reciben cuatro parámetros aunque cada uno use solo uno; describirTarea de la lección anterior recibía ocho; y todavía no sabes qué ocurre si alguien llama a una función con menos argumentos de los declarados, ni cómo dar un valor por defecto a revisor cuando no se indica. Todo eso —cómo entran los datos y cómo salen los resultados— es el tema de Parámetros y Valores de Retorno, donde construirás crearTarea() con valores por defecto y resumirCarga() devolviendo varios totales de una sola vez.