Funciones: declaración vs expresión
Hay dos formas principales de definir funciones en JavaScript — y no son intercambiables. El hoisting cambia todo. Entiende la diferencia antes de elegir cuál usar.
Declaración de función (function declaration)
Una declaración de función usa la palabra clave function al inicio. El nombre es obligatorio.
// Declaración de función
function saludar(nombre) {
return `Hola, ${nombre}!`;
}
console.log(saludar("Ana")); // "Hola, Ana!"
// Acepta múltiples parámetros
function sumar(a, b) {
return a + b;
}
console.log(sumar(3, 4)); // 7function saludar(nombre: string): string {
return `Hola, ${nombre}!`;
}
function sumar(a: number, b: number): number {
return a + b;
}
// TypeScript valida tipos en tiempo de compilación
console.log(saludar("Ana")); // "Hola, Ana!"
console.log(sumar(3, 4)); // 7
// console.log(sumar("3", 4)); // ❌ Error de tiposHola, Ana!
7Hoisting: por qué puedes llamarlas antes de definirlas
Las declaraciones de función son elevadas (hoisted) al tope de su ámbito. Puedes llamarlas antes de la línea donde aparecen.
// ✅ Funciona — la declaración es hoisted
console.log(doble(5)); // 10
function doble(n) {
return n * 2;
}
// ❌ No funciona con expresión — TypeError
// console.log(triple(5));
// const triple = function(n) { return n * 3; };Aunque el hoisting funciona, llamar una función antes de definirla dificulta la lectura. Por convención, define las funciones antes de usarlas.
Expresión de función (function expression)
Una expresión asigna una función a una variable. No hay hoisting — debes definirla antes de llamarla.
// Expresión de función (anónima)
const saludar = function(nombre) {
return `Hola, ${nombre}!`;
};
// Expresión de función con nombre (útil para recursión y stack traces)
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};
console.log(saludar("Luis")); // "Hola, Luis!"
console.log(factorial(5)); // 120// TypeScript infiere el tipo de la expresión
const saludar = function(nombre: string): string {
return `Hola, ${nombre}!`;
};
// O con anotación explícita en la variable
const multiplicar: (a: number, b: number) => number = function(a, b) {
return a * b;
};
console.log(saludar("Luis")); // "Hola, Luis!"
console.log(multiplicar(3, 4)); // 12Hola, Luis!
120¿Cuándo usar cada una?
| Declaración | Expresión | |
|---|---|---|
| Hoisting | Sí — disponible en todo el ámbito | No — solo tras la asignación |
| Nombre obligatorio | Sí | No (puede ser anónima) |
| Asignable a variable | No directamente | Sí — pasa como argumento, retorna de función |
| Cuándo usarla | Funciones utilitarias, helpers de módulo | Callbacks, métodos de objeto, funciones condicionales |
En código moderno, las arrow functions (=>) sustituyen casi siempre a las expresiones de función. La declaración function queda para funciones de alto nivel con nombre propio.