JavaScript Academy · Lesson

Function Composition

Combine small functions into pipelines.

Function Composition is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Function Composition?

Function composition combines small functions into one. Composing f and g produces a function where the output of g becomes the input of f.

Mathematically: compose(f, g)(x) = f(g(x)). Data flows right to left.

Two Small Functions

Composition starts with simple single-purpose functions. Here are two transformations we will combine.

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

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

Composing By Hand

The most explicit composition is just calling one function on the result of another. Read it inside-out: increment runs first, then double.

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

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

A compose Function For Two

Wrap that pattern in a reusable compose. It takes f and g and returns a new function applying g first, then 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));

Order Matters

Composition is not commutative. compose(f, g) differs from compose(g, f) because the right function runs first.

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));

Right-to-Left Reading

In compose(a, b, c)(x) the call evaluates as a(b(c(x))). The rightmost function touches the input first. Keep this direction in mind to avoid bugs.

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'));

Composing String Transforms

Composition is great for text pipelines: trim, lowercase, then replace spaces, each step a tiny function.

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  '));

Composition With Numbers

Chaining math operations is a classic example. Each function stays trivially testable on its own.

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));

Why Compose?

Composition keeps each function focused and reusable, and removes nested-call clutter. Instead of f(g(h(x))) scattered through your code, you build a named pipeline once and reuse it.

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));

Composition and Currying Together

Curried functions compose beautifully because each yields a one-argument function, exactly what composition expects.

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));

Toward Many Functions

So far compose handled two functions. Real composition supports any number of functions. In the next lesson you will build a general compose and its left-to-right cousin pipe using 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));

Quick Check

If compose = (f, g) => x => f(g(x)), what does compose(double, increment)(5) return when double multiplies by 2 and increment adds 1?

Recap: Function Composition

You learned to combine functions:

compose(f, g)(x) equals f(g(x)), evaluated right to left.
Order matters: composition is not commutative.
Composition keeps functions small, named, and reusable.
Curried functions compose cleanly. Next you will generalize to any number of functions.

Frequently asked questions

Is the “Function Composition” lesson free?

Yes — the full text of “Function Composition” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Function Composition”?

Combine small functions into pipelines. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Function Composition” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy