JavaScript
Introduce las funciones como valores reutilizables con entradas, trabajo y retorno, además de scope léxico, efectos, nombres y responsabilidades claras.
Una función agrupa una tarea para poder ejecutarla cuando sea necesario.
function calculateTotal(price, quantity) {
return price * quantity;
}
const total = calculateTotal(25, 4);Crear una función y llamar una función son acciones diferentes.
function greet() {
console.log("Hello");
}Aquí la función queda definida, pero su cuerpo todavía no se ejecuta.
greet();Los paréntesis realizan la llamada.
const reference = greet;Sin paréntesis, reference recibe la función como valor. No la ejecuta.
Una función puede entenderse mediante tres partes:
function applyDiscount(price, percentage) {
const discount = price * percentage;
return price - discount;
}price y percentage son entradas.return entrega la salida.Una función no necesita cumplir siempre las tres partes.
function showMessage(message) {
console.log(message);
}Esta función recibe información y produce un efecto visible, pero no devuelve un resultado útil de forma explícita.
En JavaScript, una función puede almacenarse, pasarse y devolverse como cualquier otro valor.
function greet(name) {
return `Hello, ${name}`;
}
const action = greet;
console.log(action("Nicolás"));También puede guardarse dentro de un objeto:
const formatter = {
formatPrice(value) {
return `$${value}`;
},
};O dentro de un array:
const operations = [
(value) => value + 1,
(value) => value * 2,
];Esta característica permite callbacks, funciones de orden superior, composición y closures.
function calculateSubtotal(price, quantity) {
const subtotal = price * quantity;
return subtotal;
}
calculateSubtotal(10, 2);
calculateSubtotal(50, 3);Cada llamada recibe sus propios parámetros y crea sus propias variables locales. Los valores de una llamada no reemplazan los de la otra.
El contexto de ejecución y el Call Stack explican cómo JavaScript organiza esas llamadas.
const taxRate = 0.19;
function calculateTax(subtotal) {
return subtotal * taxRate;
}calculateTax puede leer taxRate porque fue definida dentro de un scope donde ese binding está disponible.
Esto no significa que toda dependencia deba ser global. Recibir los datos como parámetros suele hacer la función más explícita:
function calculateTax(subtotal, taxRate) {
return subtotal * taxRate;
}Los nombres deben comunicar la acción o la pregunta que resuelve la función.
calculateOrderTotal();
validateEmail();
findProductById();
isUserAuthorized();Un nombre como processData puede ser demasiado ambiguo si no explica qué datos procesa o qué resultado produce.
Una función que devuelve un boolean suele nombrarse como una pregunta.
function hasAvailableStock(product) {
return product.stock > 0;
}Nombres como is, has, can o should ayudan a reconocer la intención.
Una función resulta más fácil de entender cuando cumple una tarea principal.
function completePurchase(order) {
validateOrder(order);
reserveStock(order.items);
chargePayment(order.payment);
sendConfirmation(order.customer);
}completePurchase coordina el proceso y delega detalles en funciones enfocadas.
Una función pequeña no es automáticamente buena. Dividir cada línea en una función diferente también puede ocultar el flujo. La separación debe representar responsabilidades reales.
Esta función calcula y devuelve un valor:
function calculateTotal(items) {
return items.reduce(
(total, item) => total + item.price * item.quantity,
0,
);
}Esta función modifica algo fuera de ella:
function saveOrder(order) {
database.orders.push(order);
}Ambos tipos pueden ser necesarios. Lo importante es reconocer si una función solo calcula o si también produce efectos secundarios.
Una función normal ejecuta su cuerpo de forma síncrona hasta que termina o inicia una operación administrada por el entorno.
function calculate() {
return 2 + 2;
}Una función declarada con async siempre devuelve una promesa.
async function loadProducts() {
const response = await fetch("/api/products");
return response.json();
}La asincronía se estudiará en un bloque posterior. Por ahora, lo importante es no asumir que una función ejecuta trabajo en segundo plano solo por recibir un callback o devolver una promesa.
function createOrderSummary(order) {
const subtotal = calculateSubtotal(order.items);
const tax = calculateTax(subtotal, order.taxRate);
const total = subtotal + tax;
return {
orderId: order.id,
subtotal,
tax,
total,
};
}La función:
console.log como sustituto de un valor de retorno.¿Qué diferencia existe entre estas líneas?
const first = calculateTotal;
const second = calculateTotal(10, 2);first guarda una referencia a la función. second guarda el valor que devuelve la llamada con 10 y 2.
Declaraciones y expresiones de función compara las formas principales de crear funciones y explica cómo cambian su disponibilidad, nombre e identidad.