JavaScript Design Patterns

Function Composition

Combine simple functions into complex operations

Find videos you like?

Save to resource drawer for future reference!

Composition: Building Blocks

Function composition combines simple functions to build more complex ones. Think of it as a pipeline where data flows through transformations!

Mathematical Definition

(f ∘ g)(x) = f(g(x))
Output of g becomes input of f

Basic Composition

Combining two functions

Manual Nesting

const double = x => x * 2;
const square = x => x * x;
const addOne = x => x + 1;

// Nested calls (hard to read)
const result = addOne(square(double(3)));
console.log(result); // 37

// Step by step (verbose)
const step1 = double(3);   // 6
const step2 = square(step1); // 36
const step3 = addOne(step2); // 37

// Hard to reuse this pattern

✅ Composed Function

const double = x => x * 2;
const square = x => x * x;
const addOne = x => x + 1;

// Compose helper
const compose = (...fns) => x =>
  fns.reduceRight((v, f) => f(v), x);

// Create composed function
const transform = compose(addOne, square, double);

console.log(transform(3)); // 37

// Reusable and readable!
const data = [1, 2, 3, 4, 5];
console.log(data.map(transform));
// [5, 17, 37, 65, 101]

Compose and Pipe

Two ways to compose functions

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Point-Free Style

Define functions without mentioning arguments

No Explicit Parameters

// With points (parameters)
const doubleAll = numbers => numbers.map(x => x * 2);
const sumAll = numbers => numbers.reduce((a, b) => a + b, 0);

// Point-free (no parameters mentioned)
const double = x => x * 2;
const sum = (a, b) => a + b;

const doubleAllPointFree = arr => arr.map(double);
const sumAllPointFree = arr => arr.reduce(sum, 0);

// Or even more point-free
const map = fn => arr => arr.map(fn);
const reduce = (fn, init) => arr => arr.reduce(fn, init);

const doubleAllClean = map(double);
const sumAllClean = reduce(sum, 0);

const numbers = [1, 2, 3, 4, 5];
console.log(doubleAllClean(numbers));  // [2, 4, 6, 8, 10]
console.log(sumAllClean(numbers));     // 15

// Compose point-free functions
const sumOfDoubles = pipe(
  map(double),
  reduce(sum, 0)
);

console.log(sumOfDoubles(numbers)); // 30

Building Reusable Utilities

Create a functional toolkit

javascript

code

DarkEditable

// Utility functions
const map = fn => arr => arr.map(fn);
const filter = fn => arr => arr.filter(fn);
const reduce = (fn, init) => arr => arr.reduce(fn, init);
const take = n => arr => arr.slice(0, n);
const skip = n => arr => arr.slice(n);
const reverse = arr => [...arr].reverse();
const pipe = (...fns) => x =>
  fns.reduce((v, f) => f(v), x);

// Predicates
const isEven = x => x % 2 === 0;
const isPositive = x => x > 0;
const greaterThan = n => x => x > n;

// Transformations
const double = x => x * 2;
const square = x => x * x;
const add = a => b => a + b;

// Compose complex operations
const sumOfSquaredEvens = pipe(
  filter(isEven),
  map(square),
  reduce(add(0), 0)
);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sumOfSquaredEvens(numbers)); // 220

// Another example
const firstFiveOddsDoubled = pipe(
  filter(x => !isEven(x)),
  take(5),
  map(double)
);

console.log(firstFiveOddsDoubled(numbers)); // [2, 6, 10, 14, 18]

// String processing
const trim = str => str.trim();
const toLowerCase = str => str.toLowerCase();
const words = str => str.split(' ');
const join = sep => arr => arr.join(sep);

const slugify = pipe(
  trim,
  toLowerCase,
  words,
  join('-')
);

console.log(slugify('  Hello World Example  ')); // hello-world-example

Console Output

Click "Run Code" to see output here...

Async Composition

Compose async functions

javascript

code

DarkEditable

// Async pipe
const pipeAsync = (...fns) => x =>
  fns.reduce(async (v, f) => f(await v), x);

// Async functions
const fetchUser = async id => {
  // Simulate API call
  return { id, name: 'Alice', age: 25 };
};

const addTimestamp = async user => {
  return { ...user, timestamp: Date.now() };
};

const validate = async user => {
  if (!user.name) throw new Error('Name required');
  return user;
};

const saveToDatabase = async user => {
  console.log('Saving:', user);
  return { ...user, saved: true };
};

// Compose async operations
const processUser = pipeAsync(
  fetchUser,
  validate,
  addTimestamp,
  saveToDatabase
);

// Usage
processUser(123).then(console.log);

// Promise composition
const composeAsync = (...fns) => x =>
  fns.reduceRight((v, f) => v.then(f), Promise.resolve(x));

const getUserData = id => Promise.resolve({ id, email: 'a@b.com' });
const enrichData = user => Promise.resolve({ ...user, premium: true });
const formatResponse = user => Promise.resolve(JSON.stringify(user, null, 2));

const getFormattedUser = composeAsync(
  formatResponse,
  enrichData,
  getUserData
);

getFormattedUser(456).then(console.log);

Console Output

Click "Run Code" to see output here...

Real-World Example: Data Processing Pipeline

Transform raw data into presentation format

javascript

code

DarkEditable

// Data transformation utilities
const map = fn => arr => arr.map(fn);
const filter = fn => arr => arr.filter(fn);
const sortBy = fn => arr => [...arr].sort((a, b) => fn(a) - fn(b));
const groupBy = key => arr => 
  arr.reduce((acc, item) => {
    const group = item[key];
    acc[group] = acc[group] || [];
    acc[group].push(item);
    return acc;
  }, {});

// Raw data
const orders = [
  { id: 1, customer: 'Alice', amount: 100, status: 'completed' },
  { id: 2, customer: 'Bob', amount: 50, status: 'pending' },
  { id: 3, customer: 'Alice', amount: 200, status: 'completed' },
  { id: 4, customer: 'Charlie', amount: 75, status: 'completed' },
  { id: 5, customer: 'Bob', amount: 120, status: 'completed' },
];

// Processing functions
const onlyCompleted = filter(order => order.status === 'completed');
const addTax = map(order => ({ ...order, total: order.amount * 1.1 }));
const sortByAmount = sortBy(order => order.amount);

// Compose pipeline
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

const processOrders = pipe(
  onlyCompleted,
  addTax,
  sortByAmount
);

console.log(processOrders(orders));

// Another pipeline
const calculateRevenue = orders => pipe(
  filter(o => o.status === 'completed'),
  map(o => o.amount),
  arr => arr.reduce((sum, n) => sum + n, 0)
)(orders);

console.log('Revenue:', calculateRevenue(orders)); // 495

// Group and summarize
const customerSummary = pipe(
  onlyCompleted,
  groupBy('customer'),
  groups => Object.entries(groups).map(([customer, orders]) => ({
    customer,
    orderCount: orders.length,
    totalSpent: orders.reduce((sum, o) => sum + o.amount, 0)
  })),
  sortBy(summary => -summary.totalSpent)
);

console.log(customerSummary(orders));
// [
//   { customer: 'Alice', orderCount: 2, totalSpent: 300 },
//   { customer: 'Bob', orderCount: 1, totalSpent: 120 },
//   { customer: 'Charlie', orderCount: 1, totalSpent: 75 }
// ]

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔗

Combine Functions

Build complex from simple
f(g(x)) - output of g feeds into f

➡️

Pipe vs Compose

Pipe: left to right (intuitive)
Compose: right to left (mathematical)

📦

Point-Free Style

No explicit parameters
Focus on function composition

🔄

Reusable Pipelines

Create data transformation flows
Easy to test and maintain

Pro Tip

Start with small, pure functions. Compose them into pipelines. This makes code easier to understand, test, and reuse!

Previous Topic

Currying

Partial function application and currying techniques.

Next Topic

Recursion

Self-calling functions for elegant problem solving.

Ask a Question

Have a question about Function Composition? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Design Patterns

Function Composition

Combine simple functions into complex operations

Find videos you like?

Save to resource drawer for future reference!

Composition: Building Blocks

Function composition combines simple functions to build more complex ones. Think of it as a pipeline where data flows through transformations!

Mathematical Definition

(f ∘ g)(x) = f(g(x))
Output of g becomes input of f

Basic Composition

Combining two functions

Manual Nesting

const double = x => x * 2;
const square = x => x * x;
const addOne = x => x + 1;

// Nested calls (hard to read)
const result = addOne(square(double(3)));
console.log(result); // 37

// Step by step (verbose)
const step1 = double(3);   // 6
const step2 = square(step1); // 36
const step3 = addOne(step2); // 37

// Hard to reuse this pattern

✅ Composed Function

const double = x => x * 2;
const square = x => x * x;
const addOne = x => x + 1;

// Compose helper
const compose = (...fns) => x =>
  fns.reduceRight((v, f) => f(v), x);

// Create composed function
const transform = compose(addOne, square, double);

console.log(transform(3)); // 37

// Reusable and readable!
const data = [1, 2, 3, 4, 5];
console.log(data.map(transform));
// [5, 17, 37, 65, 101]

Compose and Pipe

Two ways to compose functions

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Point-Free Style

Define functions without mentioning arguments

No Explicit Parameters

// With points (parameters)
const doubleAll = numbers => numbers.map(x => x * 2);
const sumAll = numbers => numbers.reduce((a, b) => a + b, 0);

// Point-free (no parameters mentioned)
const double = x => x * 2;
const sum = (a, b) => a + b;

const doubleAllPointFree = arr => arr.map(double);
const sumAllPointFree = arr => arr.reduce(sum, 0);

// Or even more point-free
const map = fn => arr => arr.map(fn);
const reduce = (fn, init) => arr => arr.reduce(fn, init);

const doubleAllClean = map(double);
const sumAllClean = reduce(sum, 0);

const numbers = [1, 2, 3, 4, 5];
console.log(doubleAllClean(numbers));  // [2, 4, 6, 8, 10]
console.log(sumAllClean(numbers));     // 15

// Compose point-free functions
const sumOfDoubles = pipe(
  map(double),
  reduce(sum, 0)
);

console.log(sumOfDoubles(numbers)); // 30