¿Cuál es la diferencia entre una declaración de función y una expresión de función?

Question

Accepted Answer

Una **declaración** es una sentencia de función con nombre; una **expresión** asigna una función a una variable. La diferencia práctica es el **hoisting**.

```js
// Declaration — fully hoisted, callable before its line
declared();             // ✅ works
function declared() { return "hi"; }

// Expression — only the variable binding is hoisted, not the function
expressed();            // ❌ TypeError: expressed is not a function
var expressed = function () { return "hi"; };
```

## Por qué la diferencia

Las declaraciones de función se elevan **junto con su cuerpo**, por lo que la función completa existe antes de que la ejecución la alcance. Una expresión de función es solo un valor asignado a una variable — en el punto de la llamada anticipada, `expressed` todavía es `undefined` (con `var`) o está en la TDZ (con `let`/`const`).

## Cuándo usar cada una

```js
// expression — for callbacks, conditional definitions, arrow functions
const handler = () => doThing();
const fn = condition ? a : b;
arr.map(x => x * 2);

// declaration — clear, hoisted top-level functions
function calculateTotal(items) { ... }
```

Las declaraciones se leen bien para funciones de nivel superior con nombre y se benefician del hoisting (puedes definirlas después de su uso). Las expresiones son necesarias para arrow functions, callbacks, IIFEs y para asignar funciones de forma condicional. Las arrow functions son siempre expresiones.