Part 5: Advanced Functional Patterns - Production-Ready Systems

Introduction

After mastering pure functions, composition, and error handling, I faced a new challenge: managing complex async operations in a microservices architecture. Data transformations were nested, error handling was scattered, and state management was unpredictable.

I discovered functors and monads - not as academic concepts, but as practical patterns that simplified my code. Task monads for async operations. State functors for predictable updates. These patterns transformed messy imperative code into clean, composable pipelines. That's when advanced functional programming became practical for me.

This article teaches you functors, monads, algebraic data types, and advanced patterns for building production TypeScript systems.

Understanding Functors

A functor is any type that can be mapped over. Arrays, Options, and Either are all functors.

// Functor interface
interface Functor<A> {
    map<B>(fn: (a: A) => B): Functor<B>;
}

// Array is a functor
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);  // [2, 4, 6]

// Option is a functor
type Option<A> = 
    | { type: 'some', value: A }
    | { type: 'none' };

function mapOption<A, B>(option: Option<A>, fn: (a: A) => B): Option<B> {
    if (option.type === 'some') {
        return { type: 'some', value: fn(option.value) };
    }
    return { type: 'none' };
}

const maybeNumber: Option<number> = { type: 'some', value: 5 };
const maybeDoubled = mapOption(maybeNumber, n => n * 2);  // { type: 'some', value: 10 }

// Either is a functor
type Either<E, A> = 
    | { type: 'left', value: E }
    | { type: 'right', value: A };

function mapEither<E, A, B>(either: Either<E, A>, fn: (a: A) => B): Either<E, B> {
    if (either.type === 'right') {
        return { type: 'right', value: fn(either.value) };
    }
    return either;
}

Functor Laws:

1. Identity: map(x => x) doesn't change the value

2. Composition: map(f).map(g) = map(x => g(f(x)))

Understanding Monads

A monad is a functor with flatMap (also called bind or chain).

// Monad interface
interface Monad<A> {
    map<B>(fn: (a: A) => B): Monad<B>;
    flatMap<B>(fn: (a: A) => Monad<B>): Monad<B>;
}

// Option monad
function flatMapOption<A, B>(
    option: Option<A>,
    fn: (a: A) => Option<B>
): Option<B> {
    if (option.type === 'some') {
        return fn(option.value);
    }
    return { type: 'none' };
}

// Either monad
function flatMapEither<E, A, B>(
    either: Either<E, A>,
    fn: (a: A) => Either<E, B>
): Either<E, B> {
    if (either.type === 'right') {
        return fn(either.value);
    }
    return either;
}

Why Monads Matter:

• Chain operations that return wrapped values

• Avoid nested structures (Option<Option>)

• Compose sequential computations

Real Example: Task Monad for Async Operations

// Task represents an async operation that might fail
type Task<E, A> = () => Promise<Either<E, A>>;

// Constructors
function succeed<E, A>(value: A): Task<E, A> {
    return () => Promise.resolve({ type: 'right' as const, value });
}

function fail<E, A>(error: E): Task<E, A> {
    return () => Promise.resolve({ type: 'left' as const, value: error });
}

function fromPromise<A>(promise: Promise<A>): Task<Error, A> {
    return async () => {
        try {
            const value = await promise;
            return { type: 'right', value };
        } catch (error) {
            return { type: 'left', value: error as Error };
        }
    };
}

// Map for Task
function mapTask<E, A, B>(
    task: Task<E, A>,
    fn: (a: A) => B
): Task<E, B> {
    return async () => {
        const result = await task();
        if (result.type === 'right') {
            return { type: 'right', value: fn(result.value) };
        }
        return result;
    };
}

// FlatMap for Task
function flatMapTask<E, A, B>(
    task: Task<E, A>,
    fn: (a: A) => Task<E, B>
): Task<E, B> {
    return async () => {
        const result = await task();
        if (result.type === 'right') {
            return await fn(result.value)();
        }
        return result;
    };
}

// Run the task
async function runTask<E, A>(task: Task<E, A>): Promise<Either<E, A>> {
    return await task();
}

// Real-world example: User registration flow
interface User {
    id: string;
    username: string;
    email: string;
}

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

// Simulate async operations
function validateUserData(username: string, email: string): Task<ValidationError, { username: string, email: string }> {
    return async () => {
        if (username.length < 3) {
            return { type: 'left', value: { field: 'username', message: 'Too short' } };
        }
        
        if (!email.includes('@')) {
            return { type: 'left', value: { field: 'email', message: 'Invalid format' } };
        }
        
        return { type: 'right', value: { username, email } };
    };
}

function checkUsernameAvailability(username: string): Task<ValidationError, string> {
    return async () => {
        // Simulate database check
        const taken = username === 'admin';
        
        if (taken) {
            return { type: 'left', value: { field: 'username', message: 'Already taken' } };
        }
        
        return { type: 'right', value: username };
    };
}

function createUser(username: string, email: string): Task<Error, User> {
    return async () => {
        // Simulate database insert
        const user: User = {
            id: crypto.randomUUID(),
            username,
            email
        };
        
        console.log('Creating user:', user);
        return { type: 'right', value: user };
    };
}

function sendWelcomeEmail(user: User): Task<Error, User> {
    return async () => {
        console.log(`Sending welcome email to ${user.email}`);
        return { type: 'right', value: user };
    };
}

// Compose the registration flow
function registerUser(username: string, email: string): Task<ValidationError | Error, User> {
    return flatMapTask(
        validateUserData(username, email),
        ({ username, email }) => flatMapTask(
            checkUsernameAvailability(username) as Task<ValidationError | Error, string>,
            () => flatMapTask(
                createUser(username, email) as Task<ValidationError | Error, User>,
                user => sendWelcomeEmail(user) as Task<ValidationError | Error, User>
            )
        )
    );
}

// Usage
(async () => {
    const task = registerUser('alice', '[email protected]');
    const result = await runTask(task);
    
    if (result.type === 'right') {
        console.log('Registration successful:', result.value);
    } else {
        console.log('Registration failed:', result.value);
    }
})();

Algebraic Data Types

Sum Types (Discriminated Unions)

// API response can be one of these types
type ApiResponse<T> = 
    | { status: 'loading' }
    | { status: 'success', data: T }
    | { status: 'error', error: string };

// Pattern matching with exhaustiveness checking
function handleResponse<T>(response: ApiResponse<T>): string {
    switch (response.status) {
        case 'loading':
            return 'Loading...';
        case 'success':
            return `Data: ${JSON.stringify(response.data)}`;
        case 'error':
            return `Error: ${response.error}`;
    }
}

// Usage
const loadingResponse: ApiResponse<User> = { status: 'loading' };
const successResponse: ApiResponse<User> = { 
    status: 'success', 
    data: { id: '1', username: 'alice', email: '[email protected]' } 
};
const errorResponse: ApiResponse<User> = { 
    status: 'error', 
    error: 'Network failure' 
};

console.log(handleResponse(loadingResponse));   // "Loading..."
console.log(handleResponse(successResponse));   // "Data: {...}"
console.log(handleResponse(errorResponse));     // "Error: Network failure"

Product Types

// Combine multiple types
interface Point {
    x: number;
    y: number;
}

interface Color {
    r: number;
    g: number;
    b: number;
}

interface ColoredPoint {
    point: Point;
    color: Color;
}

// Or use tuples
type ColoredPointTuple = [Point, Color];

Real Example: State Management

// State monad for stateful computations
type State<S, A> = (state: S) => [A, S];

// Get current state
function get<S>(): State<S, S> {
    return (state: S) => [state, state];
}

// Set new state
function put<S>(newState: S): State<S, void> {
    return () => [undefined as void, newState];
}

// Modify state
function modify<S>(fn: (state: S) => S): State<S, void> {
    return (state: S) => [undefined as void, fn(state)];
}

// Map over State
function mapState<S, A, B>(
    state: State<S, A>,
    fn: (a: A) => B
): State<S, B> {
    return (s: S) => {
        const [value, newState] = state(s);
        return [fn(value), newState];
    };
}

// FlatMap for State
function flatMapState<S, A, B>(
    state: State<S, A>,
    fn: (a: A) => State<S, B>
): State<S, B> {
    return (s: S) => {
        const [value, newState] = state(s);
        return fn(value)(newState);
    };
}

// Run state computation
function runState<S, A>(state: State<S, A>, initialState: S): [A, S] {
    return state(initialState);
}

// Real example: Shopping cart
interface Cart {
    items: Array<{ id: string, quantity: number, price: number }>;
    total: number;
}

function addItem(id: string, price: number, quantity: number): State<Cart, void> {
    return modify(cart => {
        const existingIndex = cart.items.findIndex(item => item.id === id);
        
        if (existingIndex >= 0) {
            const updatedItems = [...cart.items];
            updatedItems[existingIndex] = {
                ...updatedItems[existingIndex],
                quantity: updatedItems[existingIndex].quantity + quantity
            };
            
            return {
                items: updatedItems,
                total: cart.total + price * quantity
            };
        }
        
        return {
            items: [...cart.items, { id, quantity, price }],
            total: cart.total + price * quantity
        };
    });
}

function removeItem(id: string): State<Cart, void> {
    return modify(cart => {
        const item = cart.items.find(i => i.id === id);
        if (!item) return cart;
        
        return {
            items: cart.items.filter(i => i.id !== id),
            total: cart.total - item.price * item.quantity
        };
    });
}

function getTotal(): State<Cart, number> {
    return (cart: Cart) => [cart.total, cart];
}

// Compose operations
function shoppingSession(): State<Cart, number> {
    return flatMapState(
        addItem('laptop', 1200, 1),
        () => flatMapState(
            addItem('mouse', 25, 2),
            () => flatMapState(
                addItem('laptop', 1200, 1),  // Add another laptop
                () => getTotal()
            )
        )
    );
}

// Run the session
const initialCart: Cart = { items: [], total: 0 };
const [finalTotal, finalCart] = runState(shoppingSession(), initialCart);

console.log('Final total:', finalTotal);  // 2450
console.log('Final cart:', finalCart);

Real Example: Functional Reactive Streams

// Simple observable implementation
type Observer<T> = (value: T) => void;

class Observable<T> {
    private observers: Observer<T>[] = [];
    
    subscribe(observer: Observer<T>): () => void {
        this.observers.push(observer);
        
        // Return unsubscribe function
        return () => {
            this.observers = this.observers.filter(obs => obs !== observer);
        };
    }
    
    next(value: T): void {
        this.observers.forEach(observer => observer(value));
    }
    
    // Map creates new Observable
    map<B>(fn: (a: T) => B): Observable<B> {
        const mapped = new Observable<B>();
        
        this.subscribe(value => {
            mapped.next(fn(value));
        });
        
        return mapped;
    }
    
    // Filter creates new Observable
    filter(predicate: (a: T) => boolean): Observable<T> {
        const filtered = new Observable<T>();
        
        this.subscribe(value => {
            if (predicate(value)) {
                filtered.next(value);
            }
        });
        
        return filtered;
    }
    
    // Scan (like reduce but emits intermediate values)
    scan<B>(fn: (acc: B, value: T) => B, initialValue: B): Observable<B> {
        const scanned = new Observable<B>();
        let accumulator = initialValue;
        
        this.subscribe(value => {
            accumulator = fn(accumulator, value);
            scanned.next(accumulator);
        });
        
        return scanned;
    }
}

// Usage - event stream processing
const clicks = new Observable<{ x: number, y: number }>();

// Transform clicks
const clickCounts = clicks
    .filter(click => click.x > 100)  // Only right side clicks
    .scan((count, _) => count + 1, 0);  // Count them

// Subscribe to results
clickCounts.subscribe(count => {
    console.log(`Clicks on right side: ${count}`);
});

// Emit clicks
clicks.next({ x: 50, y: 100 });   // Filtered out
clicks.next({ x: 150, y: 100 });  // Count: 1
clicks.next({ x: 200, y: 150 });  // Count: 2

Real Example: Parser Combinators

// Parser type
type Parser<A> = (input: string) => Option<[A, string]>;

const some = <A>(value: A): Option<A> => ({ type: 'some', value });
const none = <A>(): Option<A> => ({ type: 'none' });

// Basic parsers
function char(c: string): Parser<string> {
    return (input: string) => {
        if (input.length > 0 && input[0] === c) {
            return some([input[0], input.slice(1)]);
        }
        return none();
    };
}

function digit(): Parser<number> {
    return (input: string) => {
        if (input.length > 0 && /[0-9]/.test(input[0])) {
            return some([parseInt(input[0]), input.slice(1)]);
        }
        return none();
    };
}

// Map parser
function mapParser<A, B>(parser: Parser<A>, fn: (a: A) => B): Parser<B> {
    return (input: string) => {
        const result = parser(input);
        if (result.type === 'some') {
            const [value, rest] = result.value;
            return some([fn(value), rest]);
        }
        return none();
    };
}

// Sequence two parsers
function andThen<A, B>(
    parserA: Parser<A>,
    parserB: Parser<B>
): Parser<[A, B]> {
    return (input: string) => {
        const resultA = parserA(input);
        if (resultA.type === 'none') return none();
        
        const [valueA, restA] = resultA.value;
        const resultB = parserB(restA);
        
        if (resultB.type === 'none') return none();
        
        const [valueB, restB] = resultB.value;
        return some([[valueA, valueB], restB]);
    };
}

// Alternative (try first, if fails try second)
function orElse<A>(parserA: Parser<A>, parserB: Parser<A>): Parser<A> {
    return (input: string) => {
        const resultA = parserA(input);
        return resultA.type === 'some' ? resultA : parserB(input);
    };
}

// Parse many
function many<A>(parser: Parser<A>): Parser<A[]> {
    return (input: string) => {
        const results: A[] = [];
        let remaining = input;
        
        while (true) {
            const result = parser(remaining);
            if (result.type === 'none') break;
            
            const [value, rest] = result.value;
            results.push(value);
            remaining = rest;
        }
        
        return some([results, remaining]);
    };
}

// Usage - parse numbers
const numberParser = mapParser(many(digit()), digits => 
    parseInt(digits.join(''))
);

const result = numberParser('12345abc');
console.log(result);  // { type: 'some', value: [12345, 'abc'] }

Real Example: Functional Domain Model

// Domain types
interface OrderId { readonly value: string }
interface ProductId { readonly value: string }
interface Money { readonly amount: number; readonly currency: string }

// Create smart constructors
function createOrderId(value: string): Either<string, OrderId> {
    if (value.length === 0) {
        return { type: 'left', value: 'Order ID cannot be empty' };
    }
    return { type: 'right', value: { value } };
}

function createMoney(amount: number, currency: string): Either<string, Money> {
    if (amount < 0) {
        return { type: 'left', value: 'Amount cannot be negative' };
    }
    if (currency.length !== 3) {
        return { type: 'left', value: 'Invalid currency code' };
    }
    return { type: 'right', value: { amount, currency } };
}

// Order line item
interface OrderLine {
    productId: ProductId;
    quantity: number;
    price: Money;
}

// Order aggregate
interface Order {
    id: OrderId;
    lines: OrderLine[];
    status: 'draft' | 'placed' | 'paid' | 'shipped';
}

// Pure functions for order operations
function addLine(order: Order, line: OrderLine): Either<string, Order> {
    if (order.status !== 'draft') {
        return { type: 'left', value: 'Cannot modify non-draft order' };
    }
    
    return {
        type: 'right',
        value: {
            ...order,
            lines: [...order.lines, line]
        }
    };
}

function calculateTotal(order: Order): Money {
    const total = order.lines.reduce((sum, line) => {
        return sum + line.price.amount * line.quantity;
    }, 0);
    
    return {
        amount: total,
        currency: order.lines[0]?.price.currency || 'USD'
    };
}

function placeOrder(order: Order): Either<string, Order> {
    if (order.status !== 'draft') {
        return { type: 'left', value: 'Order already placed' };
    }
    
    if (order.lines.length === 0) {
        return { type: 'left', value: 'Cannot place empty order' };
    }
    
    return {
        type: 'right',
        value: {
            ...order,
            status: 'placed'
        }
    };
}

// Workflow composition
function createAndPlaceOrder(
    orderId: string,
    lines: OrderLine[]
): Either<string, Order> {
    const orderIdResult = createOrderId(orderId);
    if (orderIdResult.type === 'left') return orderIdResult;
    
    let order: Order = {
        id: orderIdResult.value,
        lines: [],
        status: 'draft'
    };
    
    // Add all lines
    for (const line of lines) {
        const result = addLine(order, line);
        if (result.type === 'left') return result;
        order = result.value;
    }
    
    // Place the order
    return placeOrder(order);
}

Best Practices

1. Use Functors for Transformations

// Good - map over wrapped values
const users: Option<User>[] = [
    { type: 'some', value: { id: '1', username: 'alice', email: '[email protected]' } },
    { type: 'none' }
];

const usernames = users.map(userOpt => 
    mapOption(userOpt, user => user.username)
);

2. Use Monads for Sequential Computations

// Good - flatMap chains async operations
const result = await flatMapTask(
    fetchUser(userId),
    user => flatMapTask(
        fetchOrders(user.id),
        orders => processOrders(orders)
    )
);

3. Use Algebraic Data Types for State

// Good - exhaustive pattern matching
type ConnectionState = 
    | { type: 'disconnected' }
    | { type: 'connecting' }
    | { type: 'connected', socket: WebSocket }
    | { type: 'error', error: Error };

function handleState(state: ConnectionState): string {
    switch (state.type) {
        case 'disconnected': return 'Not connected';
        case 'connecting': return 'Connecting...';
        case 'connected': return `Connected via ${state.socket}`;
        case 'error': return `Error: ${state.error.message}`;
    }
}

Conclusion

You've completed the Functional Programming 101 series! You now understand:

Part 1: Pure functions, immutability, predictable code

Part 2: Higher-order functions, map/filter/reduce, composition

Part 3: Closures, currying, function factories

Part 4: Either/Result, Option, Railway-oriented programming

Part 5: Functors, monads, algebraic data types, advanced patterns

Next Steps

1. Explore fp-ts: TypeScript functional programming library

2. Study RxJS: Reactive functional programming

3. Read Research: Category theory applications

4. Practice: Refactor imperative code to functional

5. Build Projects: Apply functional patterns in production

Resources

• Libraries:

  • fp-ts for functional utilities

  • io-ts for runtime type checking

  • RxJS for reactive programming

• Books:

  • "Functional Programming in JavaScript" by Luis Atencio

  • "Domain Modeling Made Functional" by Scott Wlaschin

Keep writing pure, composable, and maintainable code!

---

Based on years of building production TypeScript systems, applying functional patterns from simple utilities to complex microservices architectures.