JavaScript Academy · Lección

Composición de funciones

Combine funciones pequeñas en pipelines.

Composición de funciones es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es la composición de funciones?

La composición de funciones combina funciones pequeñas en una sola. Componer f y g produce una función en la que la salida de g se convierte en la entrada de f.

Matemáticamente: compose(f, g)(x) = f(g(x)). Los datos fluyen de derecha a izquierda.

Dos funciones pequeñas

La composición comienza con funciones simples y de propósito único. Estas son dos transformaciones que combinaremos.

const double = x => x * 2;
const increment = x => x + 1;

console.log(double(5));
console.log(increment(5));

Composición manual

La composición más explícita consiste simplemente en llamar a una función con el resultado de otra. Léala desde dentro hacia fuera: increment se ejecuta primero y después double.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

Una función compose para dos funciones

Convierta ese patrón en una función compose reutilizable. Recibe f y g, y devuelve una función nueva que aplica primero g y después f.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

El orden importa

La composición no es conmutativa. compose(f, g) es diferente de compose(g, f) porque la función de la derecha se ejecuta primero.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));

Lectura de derecha a izquierda

En compose(a, b, c)(x), la llamada se evalúa como a(b(c(x))). La función situada más a la derecha procesa primero la entrada. Tenga presente esta dirección para evitar errores.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Composición de transformaciones de texto

La composición es ideal para procesar texto: quitar espacios, convertir a minúsculas y después reemplazar los espacios; cada paso es una función pequeña.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

Composición con números

Encadenar operaciones matemáticas es un ejemplo clásico. Cada función sigue siendo muy fácil de probar por separado.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

¿Por qué componer?

La composición mantiene cada función centrada y reutilizable, y elimina el desorden de las llamadas anidadas. En lugar de tener f(g(h(x))) disperso por el código, puede crear una canalización con nombre una sola vez y reutilizarla.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Composición y currificación juntas

Las funciones currificadas se componen de maravilla porque cada una produce una función de un solo argumento, exactamente lo que espera la composición.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

Hacia muchas funciones

Hasta ahora, compose gestionaba dos funciones. La composición real admite cualquier número de funciones. En la próxima lección creará un compose general y su equivalente de izquierda a derecha, pipe, mediante reduce.

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Comprobación rápida

Si compose = (f, g) => x => f(g(x)), ¿qué devuelve compose(double, increment)(5) cuando double multiplica por 2 y increment suma 1?

Repaso: composición de funciones

Ha aprendido a combinar funciones:

compose(f, g)(x) equivale a f(g(x)) y se evalúa de derecha a izquierda.
El orden importa: la composición no es conmutativa.
La composición mantiene las funciones pequeñas, con nombre y reutilizables.
Las funciones currificadas se componen fácilmente. A continuación generalizará el proceso para cualquier número de funciones.

Preguntas frecuentes

¿La lección «Composición de funciones» es gratis?

Sí — el texto completo de «Composición de funciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Composición de funciones»?

Combine funciones pequeñas en pipelines. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Composición de funciones»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy