JavaScript
Compara declaraciones y expresiones de función, su hoisting, nombres, identidad y uso como callbacks, estrategias o funciones invocadas inmediatamente.
JavaScript permite crear funciones mediante declaraciones y expresiones. Ambas producen funciones, pero no se preparan ni se organizan de la misma manera.
function add(first, second) {
return first + second;
}const add = function (first, second) {
return first + second;
};function calculateTotal(price, quantity) {
return price * quantity;
}Una declaración incluye:
function.Las declaraciones se inicializan con la función durante la preparación del scope.
console.log(calculateTotal(25, 2)); // 50
function calculateTotal(price, quantity) {
return price * quantity;
}Por eso pueden llamarse antes de la línea donde aparecen.
Una expresión crea una función dentro de una expresión mayor, normalmente una asignación.
const calculateTotal = function (price, quantity) {
return price * quantity;
};La variable sigue las reglas de const, let o var.
calculateTotal(25, 2); // ReferenceError
const calculateTotal = function (price, quantity) {
return price * quantity;
};El binding está en la Temporal Dead Zone hasta llegar a la declaración.
const calculateTotal = function (price, quantity) {
return price * quantity;
};La función no tiene un nombre escrito después de function. Sin embargo, JavaScript puede inferir un nombre útil desde la variable.
console.log(calculateTotal.name); // "calculateTotal"const calculateTotal = function calculateOrderTotal(price, quantity) {
return price * quantity;
};El nombre interno puede ayudar en:
Fuera de la función, el nombre interno normalmente no está disponible.
console.log(typeof calculateOrderTotal); // "undefined"Cada vez que se evalúa una expresión de función se crea un valor de función nuevo.
function createHandler() {
return function () {
console.log("Click");
};
}
const first = createHandler();
const second = createHandler();
console.log(first === second); // falseAunque el código interno se vea igual, las dos llamadas producen funciones distintas.
Esto importa al registrar y eliminar listeners, comparar callbacks o memoizar valores.
| Característica | Declaración | Expresión |
|---|---|---|
| Ejemplo | `function greet() {}` | `const greet = function () {}` |
| Disponible antes de la línea | Sí | Depende de la variable; normalmente no |
| Nombre | Obligatorio | Puede ser anónima o nombrada |
| Uso como parte de otra expresión | No | Sí |
Una expresión resulta natural cuando la función solo se necesita en un lugar.
products.filter(function (product) {
return product.isActive;
});Cuando la lógica tiene un significado reutilizable, un nombre separado puede ser más claro.
function isActiveProduct(product) {
return product.isActive;
}
products.filter(isActiveProduct);Una Immediately Invoked Function Expression se crea y ejecuta de inmediato.
(function () {
const privateValue = 10;
console.log(privateValue);
})();Antes de los módulos modernos, las IIFE se utilizaban mucho para crear scopes privados y evitar variables globales.
Actualmente siguen siendo válidas, pero los módulos, los bloques y las funciones normales cubren muchos de esos casos con mayor claridad.
Una declaración suele ser clara para funciones principales o reutilizables.
function validateOrder(order) {
// ...
}Una expresión es útil cuando la función forma parte de una configuración, asignación o callback.
const strategies = {
standard: function calculateStandardPrice(price) {
return price;
},
};No existe una regla que obligue a usar una sola forma en todo el proyecto. La consistencia y la intención importan más que una preferencia absoluta.
function calculateBasePrice(product, quantity) {
return product.price * quantity;
}
const discountStrategies = {
none: function noDiscount(total) {
return total;
},
member: function memberDiscount(total) {
return total * 0.9;
},
};
function calculateFinalPrice(product, quantity, strategy) {
const total = calculateBasePrice(product, quantity);
return discountStrategies[strategy](total);
}La declaración representa una operación principal. Las expresiones forman parte de una tabla de comportamiento.
var y recibir undefined antes de la asignación.¿Qué ocurre aquí?
first();
second();
function first() {
console.log("First");
}
const second = function () {
console.log("Second");
};first() funciona. second() lanza ReferenceError porque el binding second todavía está en la Temporal Dead Zone y la ejecución se detiene antes de llegar a su asignación.
Arrow functions presenta una sintaxis de función más compacta y, sobre todo, diferencias importantes en this, arguments y construcción.