JavaScript
Presenta la programación funcional como un estilo basado en transformaciones, funciones como valores, inmutabilidad, composición y efectos visibles.
La programación funcional es un estilo de diseño que organiza la lógica como transformaciones de datos y utiliza las funciones como valores.
No significa escribir todo con arrow functions ni eliminar por completo el estado. Busca que los cálculos sean predecibles, que los cambios sean visibles y que las operaciones puedan combinarse.
const total = products
.filter(isAvailable)
.map(applyDiscount)
.reduce(sumPrices, 0);Las funciones pueden almacenarse, recibirse y devolverse.
function applyOperation(value, operation) {
return operation(value);
}Esto hace posibles callbacks, funciones de orden superior y composición.
Una función pura depende de entradas explícitas y no produce efectos observables.
function calculateSubtotal(price, quantity) {
return price * quantity;
}La nota Funciones puras y efectos secundarios profundiza este concepto.
En lugar de modificar datos compartidos, se crean valores nuevos.
function activateUser(user) {
return {
...user,
isActive: true,
};
}Spread crea una copia superficial; no vuelve profundamente inmutable toda la estructura.
Funciones pequeñas pueden conectarse para construir una operación mayor.
const normalize = (value) => value.trim().toLowerCase();
const toSlug = (value) => value.replaceAll(" ", "-");
const createSlug = (value) => toSlug(normalize(value));Las aplicaciones necesitan red, almacenamiento, UI y tiempo. El objetivo es separar esos efectos de las transformaciones.
function createOrderPayload(cart) {
return {
items: cart.items,
total: calculateTotal(cart.items),
};
}
async function submitOrder(cart) {
const payload = createOrderPayload(cart);
return orderApi.create(payload);
}Un enfoque imperativo describe los pasos.
const activeNames = [];
for (const user of users) {
if (user.isActive) {
activeNames.push(user.name);
}
}Un enfoque declarativo expresa el resultado mediante operaciones conocidas.
const activeNames = users
.filter((user) => user.isActive)
.map((user) => user.name);Ninguno es automáticamente mejor. Elige el que comunique mejor la intención y permita controlar el flujo necesario.
const report = orders
.filter((order) => order.status === "completed")
.map((order) => ({
id: order.id,
total: calculateOrderTotal(order),
}))
.sort((first, second) => second.total - first.total);Cuando una cadena crece demasiado, los pasos con nombre pueden ser más claros.
const completedOrders = orders.filter(isCompletedOrder);
const summaries = completedOrders.map(createOrderSummary);
const report = summaries.sort(byHighestTotal);La programación funcional no niega el estado. Propone representar sus cambios de forma explícita.
function updateCart(cart, action) {
switch (action.type) {
case "item-added":
return {
...cart,
items: [...cart.items, action.item],
};
case "cleared":
return {
...cart,
items: [],
};
default:
return cart;
}
}La entrada anterior no se modifica; se devuelve el siguiente estado.
Este estilo puede facilitar:
Aplicarlo como dogma también puede empeorar el código:
React utiliza varias ideas funcionales:
Aun así, una aplicación real interactúa con red, DOM, almacenamiento y tiempo. La meta es reconocer qué parte calcula y cuál sincroniza con el exterior.
const isVisible = (product) =>
product.isActive && product.stock > 0;
const createCardViewModel = (product) => ({
id: product.id,
title: product.name,
priceLabel: formatCurrency(product.price),
});
function prepareProductCards(products) {
return products
.filter(isVisible)
.map(createCardViewModel);
}La función transforma datos del dominio sin modificar la colección ni renderizar la interfaz.
map y filter vuelven funcional cualquier código.¿Qué parte realiza un efecto?
function prepareOrder(cart) {
return {
items: cart.items,
total: calculateTotal(cart.items),
};
}
async function completeOrder(cart) {
const order = prepareOrder(cart);
return orderApi.create(order);
}prepareOrder transforma datos. orderApi.create(order) realiza el efecto externo de comunicación o persistencia.
El siguiente bloque estudia Objetos, donde veremos propiedades, métodos, destructuring, copias, mutabilidad, this, prototipos y clases.