Part 2: Higher-Order Functions and Composition - Building Pipelines

Introduction

I built a data processing service that transformed API responses through multiple steps: validate, filter, map, sort, paginate. My first version used nested loops and if statements - 200 lines of hard-to-follow code. Adding a new transformation step required understanding the entire flow.

I refactored using higher-order functions and composition. Each transformation became a small, focused function. Chained them together in a pipeline. The code shrunk to 50 lines. Adding new steps meant adding one function to the pipeline. That's when I understood the power of functional composition.

This article teaches you to use functions as first-class citizens, master map/filter/reduce, compose functions into pipelines, and build maintainable data transformations.

Functions as First-Class Citizens

In TypeScript, functions are values. You can:

• Assign them to variables

• Pass them as arguments

• Return them from other functions

• Store them in data structures

// Function as a value
const add = (a: number, b: number): number => a + b;
const multiply = (a: number, b: number): number => a * b;

// Store functions in an object
const operations = {
    add,
    multiply,
    subtract: (a: number, b: number): number => a - b
};

console.log(operations.add(5, 3));      // 8
console.log(operations.multiply(5, 3)); // 15

// Store functions in an array
const transforms: Array<(n: number) => number> = [
    n => n * 2,
    n => n + 10,
    n => n ** 2
];

// Apply all transforms
let value = 5;
for (const transform of transforms) {
    value = transform(value);
}
console.log(value);  // ((5 * 2) + 10) ** 2 = 400

Higher-Order Functions

A higher-order function either:

1. Takes functions as arguments

2. Returns a function

3. Or both

Functions as Arguments

// Higher-order function - takes a function
function processNumbers(
    numbers: number[],
    operation: (n: number) => number
): number[] {
    return numbers.map(operation);
}

const numbers = [1, 2, 3, 4, 5];

const doubled = processNumbers(numbers, n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

const squared = processNumbers(numbers, n => n ** 2);
console.log(squared);  // [1, 4, 9, 16, 25]

Functions as Return Values

// Returns a function
function createMultiplier(factor: number): (n: number) => number {
    return (n: number) => n * factor;
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

Map, Filter, Reduce

The holy trinity of functional programming.

Map - Transform Each Element

interface Product {
    id: string;
    name: string;
    price: number;
}

const products: Product[] = [
    { id: '1', name: 'Laptop', price: 1200 },
    { id: '2', name: 'Mouse', price: 25 },
    { id: '3', name: 'Keyboard', price: 80 }
];

// Extract names
const names = products.map(p => p.name);
console.log(names);  // ['Laptop', 'Mouse', 'Keyboard']

// Calculate prices with tax
const withTax = products.map(p => ({
    ...p,
    priceWithTax: p.price * 1.1
}));

// Transform to different structure
const productSummaries = products.map(p => ({
    id: p.id,
    label: `${p.name} - $${p.price}`
}));

Filter - Select Elements

// Products over $50
const expensive = products.filter(p => p.price > 50);
console.log(expensive);  // Laptop and Keyboard

// Products under $100
const affordable = products.filter(p => p.price < 100);
console.log(affordable);  // Mouse and Keyboard

// Combine filter and map
const expensiveNames = products
    .filter(p => p.price > 50)
    .map(p => p.name);
console.log(expensiveNames);  // ['Laptop', 'Keyboard']

Reduce - Aggregate to Single Value

// Sum all prices
const total = products.reduce((sum, p) => sum + p.price, 0);
console.log(total);  // 1305

// Find most expensive
const mostExpensive = products.reduce((max, p) => 
    p.price > max.price ? p : max
);
console.log(mostExpensive.name);  // 'Laptop'

// Group by price range
const grouped = products.reduce((groups, p) => {
    const range = p.price < 50 ? 'cheap' : p.price < 100 ? 'medium' : 'expensive';
    
    if (!groups[range]) {
        groups[range] = [];
    }
    
    groups[range].push(p);
    return groups;
}, {} as Record<string, Product[]>);

console.log(grouped);
// {
//   cheap: [Mouse],
//   medium: [Keyboard],
//   expensive: [Laptop]
// }

Real Example: API Response Processing

I built a service that processes user data from an API:

interface ApiUser {
    id: number;
    username: string;
    email: string;
    status: 'active' | 'inactive' | 'pending';
    created_at: string;
    last_login: string | null;
    roles: string[];
}

interface User {
    id: string;
    username: string;
    email: string;
    isActive: boolean;
    createdAt: Date;
    lastLogin: Date | null;
    isAdmin: boolean;
}

// Transform API user to our User type
function transformApiUser(apiUser: ApiUser): User {
    return {
        id: apiUser.id.toString(),
        username: apiUser.username,
        email: apiUser.email,
        isActive: apiUser.status === 'active',
        createdAt: new Date(apiUser.created_at),
        lastLogin: apiUser.last_login ? new Date(apiUser.last_login) : null,
        isAdmin: apiUser.roles.includes('admin')
    };
}

// Process API response
function processUsers(apiUsers: ApiUser[]): User[] {
    return apiUsers
        .filter(u => u.status === 'active')          // Only active users
        .map(transformApiUser)                        // Transform structure
        .filter(u => u.lastLogin !== null)           // Only users who logged in
        .sort((a, b) =>                              // Sort by last login
            b.lastLogin!.getTime() - a.lastLogin!.getTime()
        );
}

// Get admin users
function getAdminUsers(users: User[]): User[] {
    return users.filter(u => u.isAdmin);
}

// Get users who joined recently (last 30 days)
function getRecentUsers(users: User[]): User[] {
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    
    return users.filter(u => u.createdAt > thirtyDaysAgo);
}

// Get user statistics
function getUserStats(users: User[]) {
    return {
        total: users.length,
        admins: users.filter(u => u.isAdmin).length,
        recentLogins: users.filter(u => {
            if (!u.lastLogin) return false;
            const sevenDaysAgo = new Date();
            sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
            return u.lastLogin > sevenDaysAgo;
        }).length,
        averageUsername Length: users.reduce((sum, u) => sum + u.username.length, 0) / users.length
    };
}

Function Composition

Combine small functions into larger ones.

Manual Composition

const trim = (s: string): string => s.trim();
const lowercase = (s: string): string => s.toLowerCase();
const removeSpaces = (s: string): string => s.replace(/\s+/g, '');

// Manual composition - hard to read (inside-out)
const result = removeSpaces(lowercase(trim('  Hello World  ')));
console.log(result);  // 'helloworld'

Compose Utility

// Compose - right to left
function compose<A, B, C>(
    f: (b: B) => C,
    g: (a: A) => B
): (a: A) => C {
    return (a: A) => f(g(a));
}

// Compose multiple functions
function composeMany<T>(...fns: Array<(arg: T) => T>): (arg: T) => T {
    return (arg: T) => fns.reduceRight((result, fn) => fn(result), arg);
}

const normalizeString = composeMany(
    removeSpaces,
    lowercase,
    trim
);

console.log(normalizeString('  Hello World  '));  // 'helloworld'

Pipe Utility

// Pipe - left to right (more natural reading)
function pipe<T>(...fns: Array<(arg: T) => T>): (arg: T) => T {
    return (arg: T) => fns.reduce((result, fn) => fn(result), arg);
}

const normalizeString = pipe(
    trim,
    lowercase,
    removeSpaces
);

console.log(normalizeString('  Hello World  '));  // 'helloworld'

// With types
function pipeTyped<A, B, C, D>(
    fn1: (a: A) => B,
    fn2: (b: B) => C,
    fn3: (c: C) => D
): (a: A) => D {
    return (a: A) => fn3(fn2(fn1(a)));
}

Real Example: Data Validation Pipeline

interface UserInput {
    username: string;
    email: string;
    password: string;
}

interface ValidationError {
    field: string;
    message: string;
}

type ValidationResult = {
    valid: true;
    data: UserInput;
} | {
    valid: false;
    errors: ValidationError[];
};

// Validation functions
function validateUsername(input: UserInput): ValidationError[] {
    const errors: ValidationError[] = [];
    
    if (input.username.length < 3) {
        errors.push({ field: 'username', message: 'Too short (min 3)' });
    }
    
    if (input.username.length > 20) {
        errors.push({ field: 'username', message: 'Too long (max 20)' });
    }
    
    if (!/^[a-zA-Z0-9_]+$/.test(input.username)) {
        errors.push({ field: 'username', message: 'Invalid characters' });
    }
    
    return errors;
}

function validateEmail(input: UserInput): ValidationError[] {
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.email)) {
        return [{ field: 'email', message: 'Invalid email format' }];
    }
    return [];
}

function validatePassword(input: UserInput): ValidationError[] {
    const errors: ValidationError[] = [];
    
    if (input.password.length < 8) {
        errors.push({ field: 'password', message: 'Too short (min 8)' });
    }
    
    if (!/[A-Z]/.test(input.password)) {
        errors.push({ field: 'password', message: 'Must contain uppercase' });
    }
    
    if (!/[0-9]/.test(input.password)) {
        errors.push({ field: 'password', message: 'Must contain number' });
    }
    
    return errors;
}

// Compose validators
function validateUser(input: UserInput): ValidationResult {
    const validators = [
        validateUsername,
        validateEmail,
        validatePassword
    ];
    
    const allErrors = validators.flatMap(validator => validator(input));
    
    if (allErrors.length > 0) {
        return { valid: false, errors: allErrors };
    }
    
    return { valid: true, data: input };
}

// Usage
const input: UserInput = {
    username: 'alice',
    email: '[email protected]',
    password: 'Secret123'
};

const result = validateUser(input);

if (result.valid) {
    console.log('Valid user:', result.data);
} else {
    console.log('Validation errors:', result.errors);
}

Real Example: Request/Response Pipeline

interface Request {
    path: string;
    method: string;
    headers: Record<string, string>;
    body: any;
}

interface Response {
    status: number;
    headers: Record<string, string>;
    body: any;
}

type Middleware = (req: Request) => Request;
type Handler = (req: Request) => Response;

// Middleware functions
function logRequest(req: Request): Request {
    console.log(`${req.method} ${req.path}`);
    return req;
}

function addAuthHeader(token: string): Middleware {
    return (req: Request) => ({
        ...req,
        headers: {
            ...req.headers,
            Authorization: `Bearer ${token}`
        }
    });
}

function addContentType(contentType: string): Middleware {
    return (req: Request) => ({
        ...req,
        headers: {
            ...req.headers,
            'Content-Type': contentType
        }
    });
}

function normalizeBody(req: Request): Request {
    if (typeof req.body === 'string') {
        try {
            return {
                ...req,
                body: JSON.parse(req.body)
            };
        } catch {
            return req;
        }
    }
    return req;
}

// Compose middleware pipeline
function createPipeline(...middleware: Middleware[]): Middleware {
    return (req: Request) => 
        middleware.reduce((request, mw) => mw(request), req);
}

// Create request pipeline
const requestPipeline = createPipeline(
    logRequest,
    normalizeBody,
    addContentType('application/json'),
    addAuthHeader('my-secret-token')
);

// Use pipeline
const request: Request = {
    path: '/api/users',
    method: 'POST',
    headers: {},
    body: '{"username":"alice"}'
};

const processedRequest = requestPipeline(request);
console.log(processedRequest);
// {
//   path: '/api/users',
//   method: 'POST',
//   headers: {
//     'Content-Type': 'application/json',
//     Authorization: 'Bearer my-secret-token'
//   },
//   body: { username: 'alice' }
// }

Point-Free Style

Functions without explicitly mentioned arguments.

// Regular style
const double = (x: number) => x * 2;
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => double(x));

// Point-free style - cleaner
const doubledPointFree = numbers.map(double);

// Regular
const isEven = (n: number) => n % 2 === 0;
const evenNumbers = numbers.filter(n => isEven(n));

// Point-free
const evenNumbersPointFree = numbers.filter(isEven);

// More complex example
const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

// Regular
const names = users.map(u => u.name);

// Point-free - create reusable extractor
const prop = <T, K extends keyof T>(key: K) => 
    (obj: T): T[K] => obj[key];

const getName = prop<typeof users[0], 'name'>('name');
const namesPointFree = users.map(getName);

Real Example: Data Processing Pipeline

interface Transaction {
    id: string;
    amount: number;
    type: 'credit' | 'debit';
    category: string;
    date: Date;
    description: string;
}

interface TransactionSummary {
    totalCredit: number;
    totalDebit: number;
    netAmount: number;
    transactionCount: number;
    byCategory: Record<string, number>;
}

// Helper functions
const isCredit = (t: Transaction) => t.type === 'credit';
const isDebit = (t: Transaction) => t.type === 'debit';
const getAmount = (t: Transaction) => t.amount;

// Calculate total using reduce
const sum = (numbers: number[]) => 
    numbers.reduce((total, n) => total + n, 0);

// Process transactions
function summarizeTransactions(transactions: Transaction[]): TransactionSummary {
    const credits = transactions.filter(isCredit);
    const debits = transactions.filter(isDebit);
    
    const totalCredit = sum(credits.map(getAmount));
    const totalDebit = sum(debits.map(getAmount));
    
    const byCategory = transactions.reduce((acc, t) => {
        acc[t.category] = (acc[t.category] || 0) + t.amount;
        return acc;
    }, {} as Record<string, number>);
    
    return {
        totalCredit,
        totalDebit,
        netAmount: totalCredit - totalDebit,
        transactionCount: transactions.length,
        byCategory
    };
}

// Filter transactions by date range
function filterByDateRange(
    transactions: Transaction[],
    startDate: Date,
    endDate: Date
): Transaction[] {
    return transactions.filter(t => 
        t.date >= startDate && t.date <= endDate
    );
}

// Get top spending categories
function getTopCategories(
    transactions: Transaction[],
    limit: number
): Array<{ category: string; total: number }> {
    const summary = summarizeTransactions(transactions);
    
    return Object.entries(summary.byCategory)
        .map(([category, total]) => ({ category, total }))
        .sort((a, b) => b.total - a.total)
        .slice(0, limit);
}

// Usage
const transactions: Transaction[] = [
    { id: '1', amount: 100, type: 'credit', category: 'salary', date: new Date('2024-01-01'), description: 'Paycheck' },
    { id: '2', amount: 50, type: 'debit', category: 'food', date: new Date('2024-01-05'), description: 'Groceries' },
    { id: '3', amount: 200, type: 'debit', category: 'rent', date: new Date('2024-01-10'), description: 'Monthly rent' },
    { id: '4', amount: 30, type: 'debit', category: 'food', date: new Date('2024-01-15'), description: 'Restaurant' }
];

const summary = summarizeTransactions(transactions);
console.log(summary);

const topCategories = getTopCategories(transactions, 2);
console.log(topCategories);  // [{ category: 'rent', total: 200 }, { category: 'food', total: 80 }]

Chaining Operations

interface Order {
    id: string;
    customerId: string;
    items: Array<{ productId: string; quantity: number; price: number }>;
    status: 'pending' | 'processing' | 'shipped' | 'delivered';
    createdAt: Date;
}

// Process orders with chaining
function processOrders(orders: Order[]) {
    return orders
        .filter(o => o.status !== 'delivered')          // Active orders
        .map(o => ({                                     // Calculate totals
            ...o,
            total: o.items.reduce((sum, item) => 
                sum + item.quantity * item.price, 0
            )
        }))
        .filter(o => o.total > 100)                     // High-value orders
        .sort((a, b) =>                                 // Sort by date
            b.createdAt.getTime() - a.createdAt.getTime()
        )
        .slice(0, 10);                                  // Top 10
}

// Group orders by customer
function groupByCustomer(orders: Order[]) {
    return orders.reduce((groups, order) => {
        if (!groups[order.customerId]) {
            groups[order.customerId] = [];
        }
        groups[order.customerId].push(order);
        return groups;
    }, {} as Record<string, Order[]>);
}

// Find customer with most orders
function findTopCustomer(orders: Order[]): string | null {
    const grouped = groupByCustomer(orders);
    
    const customerCounts = Object.entries(grouped)
        .map(([customerId, orders]) => ({
            customerId,
            count: orders.length
        }))
        .sort((a, b) => b.count - a.count);
    
    return customerCounts.length > 0 ? customerCounts[0].customerId : null;
}

Best Practices

1. Keep Functions Small and Focused

// Bad - does too much
function processUserData(user: any) {
    const cleaned = user.name.trim().toLowerCase();
    const validated = cleaned.length >= 3;
    const saved = validated ? saveToDb(user) : null;
    const emailed = saved ? sendEmail(user.email) : null;
    return { cleaned, validated, saved, emailed };
}

// Good - small, focused functions
const cleanName = (name: string) => name.trim().toLowerCase();
const isValidName = (name: string) => name.length >= 3;

function processUserData(user: any) {
    const cleanedName = cleanName(user.name);
    
    if (!isValidName(cleanedName)) {
        throw new Error('Invalid name');
    }
    
    return { ...user, name: cleanedName };
}

2. Use Descriptive Names

// Bad
const f = (xs: number[]) => xs.filter(x => x > 0);

// Good
const filterPositive = (numbers: number[]) => numbers.filter(n => n > 0);

3. Prefer Declarative Over Imperative

// Imperative - how to do it
function getActiveUserNames(users: User[]): string[] {
    const result: string[] = [];
    for (let i = 0; i < users.length; i++) {
        if (users[i].isActive) {
            result.push(users[i].name);
        }
    }
    return result;
}

// Declarative - what to do
const getActiveUserNames = (users: User[]) =>
    users
        .filter(u => u.isActive)
        .map(u => u.name);

What's Next

You now understand:

• Functions as first-class citizens

• Higher-order functions

• Map, filter, reduce operations

• Function composition and pipelines

• Point-free style

• Chaining operations

In Part 3: Closures and Currying, you'll learn to use closures for encapsulation, curry functions for flexibility, build function factories, and create reusable middleware patterns.

---

Based on building production TypeScript data processing pipelines, from API transformations to complex business logic.