← Currying Bind, Call & Apply (Polyfills) →

Function Composition

Function Composition is the process of combining two or more functions to produce a new function. It's a fundamental concept in functional programming that enables building complex functionality from simple, reusable parts.

🎯 Understanding Composition

Mathematical Concept:

(f ∘ g)(x) = f(g(x))

            Where:
            ∘ is the composition operator
            g is applied first to x
            f is applied to the result of g(x)

The output of one function becomes the input of the next function.

Key Principles:

Associative: f ∘ (g ∘ h) = (f ∘ g) ∘ h
Not Commutative: f ∘ g ≠ g ∘ f (order matters)
Identity Function: f ∘ id = f = id ∘ f
Small Functions: Compose small, pure functions
Declarative: Focus on "what" not "how"

Compose (Right-to-Left)

compose(f, g, h)(x) = f(g(h(x)))

Traditional mathematical order

Pipe (Left-to-Right)

pipe(h, g, f)(x) = f(g(h(x)))

🔧 Examples

JavaScript Editor

// Function Composition: Combining functions to create new functionality

// Simple functions
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const square = x => x * x;
const double = x => x * 2;
const increment = x => x + 1;

// Manual composition
const result1 = double(square(add(2, 3)));
console.log("Manual: double(square(add(2, 3))) =", result1);

// Create compose function (right-to-left execution)
function compose(...functions) {
  return function(initialValue) {
    return functions.reduceRight((value, fn) => fn(value), initialValue);
  };
}

// Create pipe function (left-to-right execution, often more readable)
function pipe(...functions) {
  return function(initialValue) {
    return functions.reduce((value, fn) => fn(value), initialValue);
  };
}

// Compose example (right-to-left: g(f(x)))
const addThenSquare = compose(square, x => add(x, 3));
console.log("Compose: square(add(5, 3)) =", addThenSquare(5));

// Pipe example (left-to-right: f(g(x)))
const squareThenDouble = pipe(square, double);
console.log("Pipe: double(square(5)) =", squareThenDouble(5));

// More complex pipeline
const processNumber = pipe(
  x => add(x, 10),    // Add 10
  square,            // Square it
  double,            // Double it
  x => x - 5         // Subtract 5
);

console.log("Pipeline (5):", processNumber(5));

JavaScript Editor

// Real-world composition examples

// 1. User data processing
const users = [
  { name: "Alice", age: 25, active: true, score: 85 },
  { name: "Bob", age: 30, active: false, score: 92 },
  { name: "Charlie", age: 35, active: true, score: 78 },
  { name: "Diana", age: 28, active: true, score: 95 },
  { name: "Eve", age: 22, active: false, score: 88 }
];

// Small, focused functions
const filterActive = users => users.filter(user => user.active);
const filterByMinAge = minAge => users => users.filter(user => user.age >= minAge);
const getNames = users => users.map(user => user.name);
const getScores = users => users.map(user => user.score);
const calculateAverage = scores => scores.reduce((sum, score) => sum + score, 0) / scores.length;
const roundToTwo = num => Math.round(num * 100) / 100;
const formatResult = result => `Average score: ${result}`;

// Compose data processing pipeline
const getActiveUsersAverageScore = pipe(
  filterActive,
  getScores,
  calculateAverage,
  roundToTwo,
  formatResult
);

console.log(getActiveUsersAverageScore(users));

// 2. String processing pipeline
const trim = str => str.trim();
const toLowerCase = str => str.toLowerCase();
const removeSpecialChars = str => str.replace(/[^a-z0-9\s]/g, '');
const capitalizeWords = str => str.replace(/\b\w/g, char => char.toUpperCase());
const replaceSpaces = replacement => str => str.replace(/\s+/g, replacement);

// Create different string processors
const createSlug = pipe(
  trim,
  toLowerCase,
  removeSpecialChars,
  replaceSpaces("-")
);

const createTitle = pipe(
  trim,
  toLowerCase,
  capitalizeWords
);

console.log("\nSlug:", createSlug("  Hello, World! This is JavaScript  "));
console.log("Title:", createTitle("  hello world javascript tutorial  "));

// 3. Mathematical transformations
const operations = {
  add: x => y => x + y,
  multiply: x => y => x * y,
  subtract: x => y => y - x,
  divide: x => y => y / x
};

const transformValue = pipe(
  operations.add(10),      // +10
  operations.multiply(2),  // ×2
  operations.subtract(5),  // -5
  operations.divide(3)     // ÷3
);

console.log("\nMath transformation (5):", transformValue(5));

JavaScript Editor

// Composing asynchronous functions

// Simulated async functions
const fetchUser = async (id) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return { id, name: `User${id}`, age: 20 + id };
};

const fetchPosts = async (user) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return { 
    ...user, 
    posts: [`Post1 by ${user.name}`, `Post2 by ${user.name}`] 
  };
};

// Regular promise chaining
fetchUser(1)
  .then(fetchPosts)
  .then(calculateStats)
  .then(result => console.log("Promise chain:", result))
  .catch(error => console.error("Error:", error));

// Create async compose function
function asyncCompose(...fns) {
  return function(initialValue) {
    return fns.reduceRight(
      (promise, fn) => promise.then(fn),
      Promise.resolve(initialValue)
    );
  };
}

function asyncPipe(...fns) {
  return function(initialValue) {
    return fns.reduce(
      (promise, fn) => promise.then(fn),
      Promise.resolve(initialValue)
    );
  };
}

// Create async pipeline
const getUserWithStats = asyncPipe(
  fetchUser,
  fetchPosts,
  calculateStats
);

// Use the pipeline
async function runPipeline() {
  try {
    const result = await getUserWithStats(2);
    console.log("\nAsync pipeline result:", result);
  } catch (error) {
    console.error("Pipeline error:", error);
  }
}

runPipeline();

// Composition with error handling
const withErrorHandling = (fn, errorHandler) => async (...args) => {
  try {
    return await fn(...args);
  } catch (error) {
    return errorHandler(error, ...args);
  }
};

const safeFetchUser = withErrorHandling(
  fetchUser,
  (error, id) => ({ 
    id, 
    name: "Unknown User", 
    age: 0,
    error: error.message 
  })
);

const safePipeline = asyncPipe(safeFetchUser, fetchPosts, calculateStats);

safePipeline(3).then(result => {
  console.log("\nSafe pipeline:", result);
});

JavaScript Editor

// Advanced composition patterns

// 1. Point-free style (tacit programming)
// Avoid mentioning the data being operated on

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// With explicit parameter
const getEvenSquares1 = numbers => numbers
  .filter(n => n % 2 === 0)
  .map(n => n * n);

// Point-free style (using utility functions)
const isEven = n => n % 2 === 0;
const square = n => n * n;

const getEvenSquares2 = numbers => numbers
  .filter(isEven)
  .map(square);

console.log("Even squares:", getEvenSquares2(numbers));

// 2. Composing with lodash/fp style
const _ = {
  // Simulated lodash-like functions
  map: fn => array => array.map(fn),
  filter: fn => array => array.filter(fn),
  take: n => array => array.slice(0, n),
  sortBy: fn => array => [...array].sort((a, b) => fn(a) - fn(b))
};

const getTopStudents = pipe(
  _.filter(student => student.score >= 80),
  _.sortBy(student => -student.score), // Descending
  _.take(3),
  _.map(student => `${student.name}: ${student.score}`)
);

const students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 78 },
  { name: "Diana", score: 95 },
  { name: "Eve", score: 88 }
];

console.log("\nTop students:", getTopStudents(students));

// 3. Composition with context (this)
function createContextAwareComposer(context) {
  return function composeWithContext(...fns) {
    return function(initialValue) {
      return fns.reduce((value, fn) => {
        return fn.call(context, value);
      }, initialValue);
    };
  };
}

const calculator = {
  multiplier: 2,
  add(x) { return x + 10; },
  multiply(x) { return x * this.multiplier; },
  format(x) { return `Result: ${x}`; }
};

const composeWithCalculator = createContextAwareComposer(calculator);
const calculate = composeWithCalculator(
  calculator.add,
  calculator.multiply,
  calculator.format
);

console.log("\nContext-aware:", calculate(5));

// 4. Debugging composed functions
const trace = label => value => {
  console.log(`${label}: `, value);
  return value;
};

const debugPipeline = pipe(
  x => x + 5,
  trace("After adding 5"),
  x => x * 2,
  trace("After doubling"),
  x => x - 3,
  trace("After subtracting 3")
);

console.log("\nDebug pipeline:");
debugPipeline(10);

💪 Practice Exercise

JavaScript Editor

// Function Composition Practice

// Exercise 1: Create compose and pipe from scratch
function myCompose(...fns) {
  // Your implementation
}

function myPipe(...fns) {
  // Your implementation
}

// Exercise 2: Create data transformation pipeline
const products = [
  { name: "Laptop", price: 999.99, category: "electronics", stock: 5 },
  { name: "Mouse", price: 29.99, category: "electronics", stock: 20 },
  { name: "Chair", price: 199.99, category: "furniture", stock: 8 },
  { name: "Desk", price: 499.99, category: "furniture", stock: 3 },
  { name: "Monitor", price: 299.99, category: "electronics", stock: 0 }
];

// Create a pipeline that:
// 1. Filters products in stock
// 2. Filters by category "electronics"
// 3. Applies 10% discount
// 4. Extracts names and prices
// 5. Sorts by price (descending)

const processProducts = pipe(
  // Your code here
);

// Exercise 3: Create async composition utilities
function asyncCompose(...fns) {
  // Your implementation
}

function asyncPipe(...fns) {
  // Your implementation
}

// Exercise 4: Create a validation pipeline
const validateUser = pipe(
  // Should validate:
  // - username is at least 3 chars
  // - email format is valid
  // - age is between 18 and 100
  // - password is at least 8 chars
  // Return object with { isValid: boolean, errors: [] }
);

// Test your implementations
console.log("Test results:");

💡 Composition Tips:

Start with small, pure functions
Each function should do one thing well
Use descriptive names for composed functions
Test individual functions before composing
Consider using libraries like Ramda or lodash/fp

🏆 Composition Benefits

🧩

Modularity

Build complex systems from simple parts

♻️

Reusability

Small functions can be reused in different contexts

🧪

Testability

Easy to test small, pure functions

📖

Readability

Declarative code shows intent clearly

🔧

Maintainability

Easy to modify and extend

⚡

Performance

Can optimize individual functions

🎯

Abstraction

Hide complexity behind simple interfaces

← Currying Bind, Call & Apply (Polyfills) →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Function Composition

🎯 Understanding Composition

Mathematical Concept:

Key Principles:

Compose (Right-to-Left)

Pipe (Left-to-Right)

🔧 Examples

💪 Practice Exercise

💡 Composition Tips:

🏆 Composition Benefits

Modularity

Reusability

Testability

Readability

Maintainability

Performance

Abstraction

Follow Us

Our Tools

Our Company

Special Tools

JavaScript Tutorial

Function Composition

🎯 Understanding Composition

Mathematical Concept:

Key Principles:

Compose (Right-to-Left)

Pipe (Left-to-Right)

🔧 Examples

Example 1: Basic Composition

Example 2: Practical Examples

Example 3: Async Composition

Example 4: Advanced Patterns

💪 Practice Exercise

💡 Composition Tips:

🏆 Composition Benefits

Modularity

Reusability

Testability

Readability

Maintainability

Performance

Abstraction

Follow Us

Our Tools

Our Company

Special Tools