🎭 Functor Functions & Mappable Structures

Understanding functors: containers that can be mapped over while preserving structure

What is a Functor?
Functor Laws
Built-in JavaScript Functors
Creating Custom Functors
Maybe Functor
Either Functor
IO Functor
Pointed Functors
Real-World Applications
Advanced Functor Patterns

What is a Functor?

A functor is a type that implements a map method which applies a function to the wrapped value(s) while preserving the container's structure. Think of it as a "mappable" container.

Mathematical Definition

In category theory, a functor F must satisfy:

F.map(id) = id (Identity law)
F.map(compose(f, g)) = compose(F.map(f), F.map(g)) (Composition law)

Basic Functor Interface

// Generic functor interface
class Functor {
  constructor(value) {
    this.value = value;
  }

  // The map method is what makes it a functor
  map(fn) {
    return new Functor(fn(this.value));
  }

  // Static constructor (pointed functor)
  static of(value) {
    return new Functor(value);
  }
}

// Usage
const result = Functor.of(5)
  .map((x) => x * 2)
  .map((x) => x + 1)
  .map((x) => `Result: ${x}`);

console.log(result.value); // "Result: 11"

Why Functors Matter

Functors provide a consistent way to:

Apply transformations without unwrapping values
Chain operations safely
Handle context (null values, errors, async operations)
Maintain structure while transforming content

Functor Laws

All functors must obey two fundamental laws:

1. Identity Law

Mapping the identity function should return the original functor.

const identity = (x) => x;

// Law: functor.map(identity) === functor
const original = Functor.of(42);
const mapped = original.map(identity);

console.log(original.value === mapped.value); // true

2. Composition Law

Mapping a composition should equal composing the maps.

const compose = (f, g) => (x) => f(g(x));
const addOne = (x) => x + 1;
const double = (x) => x * 2;

const functor = Functor.of(5);

// These should be equivalent:
const composed = functor.map(compose(double, addOne));
const chained = functor.map(addOne).map(double);

console.log(composed.value === chained.value); // true

Verifying Functor Laws

// ✅ Law verification utility
const verifyFunctorLaws = (FunctorType, value, f, g) => {
  const functor = FunctorType.of(value);
  const identity = (x) => x;
  const compose = (fn1, fn2) => (x) => fn1(fn2(x));

  // Identity law
  const identityTest = functor.map(identity).value === functor.value;

  // Composition law
  const composed = functor.map(compose(f, g));
  const chained = functor.map(g).map(f);
  const compositionTest = composed.value === chained.value;

  return {
    identity: identityTest,
    composition: compositionTest,
    valid: identityTest && compositionTest,
  };
};

// Test our Functor
const result = verifyFunctorLaws(
  Functor,
  10,
  (x) => x * 2,
  (x) => x + 5,
);
console.log(result); // { identity: true, composition: true, valid: true }

Built-in JavaScript Functors

JavaScript has several built-in functors that you use every day:

Array as a Functor

// ✅ Arrays are functors
const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .map((x) => x * 2) // [2, 4, 6, 8, 10]
  .map((x) => x + 1) // [3, 5, 7, 9, 11]
  .map((x) => `${x}!`); // ["3!", "5!", "7!", "9!", "11!"]

console.log(result);

// Arrays preserve structure and apply function to each element
const nested = [
  [1, 2],
  [3, 4],
  [5, 6],
];
const flattened = nested.map((arr) => arr.map((x) => x * 2));
console.log(flattened); // [[2, 4], [6, 8], [10, 12]]

Promise as a Functor

// ✅ Promises are functors
const asyncValue = Promise.resolve(42);

const result = asyncValue
  .then((x) => x * 2) // Still a Promise
  .then((x) => x + 8) // Still a Promise
  .then((x) => `${x}!`); // Still a Promise

result.then(console.log); // "92!"

// Promises preserve the async context while transforming the value

Function as a Functor

// ✅ Functions can be functors (function composition)
const addTen = (x) => x + 10;
const multiplyByTwo = (x) => x * 2;

// Function composition is like mapping over functions
const composedFunction = (value) => multiplyByTwo(addTen(value));

console.log(composedFunction(5)); // 30

// More explicit functor-like interface for functions
class FunctionFunctor {
  constructor(fn) {
    this.fn = fn;
  }

  map(g) {
    return new FunctionFunctor((x) => g(this.fn(x)));
  }

  run(input) {
    return this.fn(input);
  }

  static of(fn) {
    return new FunctionFunctor(fn);
  }
}

const pipeline = FunctionFunctor.of((x) => x + 5)
  .map((x) => x * 2)
  .map((x) => x - 3);

console.log(pipeline.run(10)); // ((10 + 5) * 2) - 3 = 27

Creating Custom Functors

Container Functor

// ✅ Basic container functor
class Container {
  constructor(value) {
    this.value = value;
  }

  map(fn) {
    return Container.of(fn(this.value));
  }

  static of(value) {
    return new Container(value);
  }

  // Utility method for debugging
  inspect() {
    return `Container(${this.value})`;
  }
}

// Usage
const container = Container.of('Hello World')
  .map((s) => s.toUpperCase())
  .map((s) => s.split(' '))
  .map((arr) => arr.reverse())
  .map((arr) => arr.join(' '));

console.log(container.inspect()); // Container(WORLD HELLO)

Box Functor with Debugging

// ✅ Box functor with enhanced debugging
class Box {
  constructor(value) {
    this.value = value;
    this.history = [];
  }

  map(fn, description = 'transform') {
    const newValue = fn(this.value);
    const newBox = Box.of(newValue);
    newBox.history = [
      ...this.history,
      {
        operation: description,
        from: this.value,
        to: newValue,
        function: fn.toString(),
      },
    ];
    return newBox;
  }

  static of(value) {
    return new Box(value);
  }

  fold(fn) {
    return fn(this.value);
  }

  inspect() {
    return `Box(${JSON.stringify(this.value)})`;
  }

  trace() {
    console.log('Transformation history:');
    this.history.forEach((step, i) => {
      console.log(`${i + 1}. ${step.operation}: ${step.from} -> ${step.to}`);
    });
    return this;
  }
}

// Usage with tracing
const result = Box.of(10)
  .map((x) => x + 5, 'add 5')
  .map((x) => x * 2, 'multiply by 2')
  .map((x) => x - 3, 'subtract 3')
  .trace()
  .fold((x) => `Final: ${x}`);

console.log(result); // "Final: 27"

Maybe Functor

The Maybe functor handles null/undefined values gracefully, preventing null pointer exceptions.

Basic Maybe Implementation

// ✅ Maybe functor for null safety
class Maybe {
  constructor(value) {
    this.value = value;
  }

  isNothing() {
    return this.value === null || this.value === undefined;
  }

  isSomething() {
    return !this.isNothing();
  }

  map(fn) {
    return this.isNothing() ? Maybe.nothing() : Maybe.of(fn(this.value));
  }

  flatMap(fn) {
    return this.isNothing() ? Maybe.nothing() : fn(this.value);
  }

  getOrElse(defaultValue) {
    return this.isNothing() ? defaultValue : this.value;
  }

  filter(predicate) {
    return this.isNothing() || predicate(this.value) ? this : Maybe.nothing();
  }

  static of(value) {
    return new Maybe(value);
  }

  static nothing() {
    return new Maybe(null);
  }

  static some(value) {
    return value === null || value === undefined ? Maybe.nothing() : Maybe.of(value);
  }

  inspect() {
    return this.isNothing() ? 'Maybe.Nothing' : `Maybe.Some(${this.value})`;
  }
}

// Usage examples
const safeDiv = (a, b) => (b === 0 ? Maybe.nothing() : Maybe.of(a / b));

const result1 = Maybe.of(20)
  .flatMap((x) => safeDiv(x, 2))
  .map((x) => x + 5)
  .map((x) => `Result: ${x}`)
  .getOrElse('Error: Division by zero');

console.log(result1); // "Result: 15"

const result2 = Maybe.of(20)
  .flatMap((x) => safeDiv(x, 0)) // Returns Maybe.nothing()
  .map((x) => x + 5) // Skipped
  .map((x) => `Result: ${x}`) // Skipped
  .getOrElse('Error: Division by zero');

console.log(result2); // "Error: Division by zero"

Maybe with Real-World Examples

// ✅ Real-world Maybe usage
const users = [
  { id: 1, name: 'John', address: { street: '123 Main St', city: 'Boston' } },
  { id: 2, name: 'Jane', address: null },
  { id: 3, name: 'Bob' },
];

// Safe property access
const getUserCity = (user) =>
  Maybe.of(user)
    .map((u) => u.address)
    .map((addr) => addr.city)
    .getOrElse('Unknown City');

users.forEach((user) => {
  console.log(`${user.name} lives in: ${getUserCity(user)}`);
});
// John lives in: Boston
// Jane lives in: Unknown City
// Bob lives in: Unknown City

// Safe API response handling
const processApiResponse = (response) =>
  Maybe.of(response)
    .filter((r) => r.success)
    .map((r) => r.data)
    .map((data) => data.users)
    .map((users) => users.filter((u) => u.active))
    .getOrElse([]);

const apiResponse1 = { success: true, data: { users: [{ active: true, name: 'Alice' }] } };
const apiResponse2 = { success: false, error: 'Server error' };

console.log(processApiResponse(apiResponse1)); // [{ active: true, name: 'Alice' }]
console.log(processApiResponse(apiResponse2)); // []

Either Functor

The Either functor handles computations that might fail, representing either a success (Right) or failure (Left).

Either Implementation

// ✅ Either functor for error handling
class Either {
  constructor(value, isRight = true) {
    this.value = value;
    this.isRight = isRight;
  }

  isLeft() {
    return !this.isRight;
  }

  map(fn) {
    return this.isLeft() ? this : Either.right(fn(this.value));
  }

  mapLeft(fn) {
    return this.isLeft() ? Either.left(fn(this.value)) : this;
  }

  flatMap(fn) {
    return this.isLeft() ? this : fn(this.value);
  }

  fold(leftFn, rightFn) {
    return this.isLeft() ? leftFn(this.value) : rightFn(this.value);
  }

  getOrElse(defaultValue) {
    return this.isLeft() ? defaultValue : this.value;
  }

  static left(value) {
    return new Either(value, false);
  }

  static right(value) {
    return new Either(value, true);
  }

  static of(value) {
    return Either.right(value);
  }

  static try(fn) {
    try {
      return Either.right(fn());
    } catch (error) {
      return Either.left(error.message);
    }
  }

  inspect() {
    return this.isLeft() ? `Either.Left(${this.value})` : `Either.Right(${this.value})`;
  }
}

// Usage examples
const parseJSON = (str) => Either.try(() => JSON.parse(str));

const processData = (jsonString) =>
  parseJSON(jsonString)
    .map((obj) => obj.user)
    .map((user) => user.name)
    .map((name) => name.toUpperCase())
    .map((name) => `Hello, ${name}!`)
    .fold(
      (error) => `Error: ${error}`,
      (result) => result,
    );

console.log(processData('{"user":{"name":"alice"}}')); // "Hello, ALICE!"
console.log(processData('invalid json')); // "Error: Unexpected token..."

Either for Validation

// ✅ Either for validation chains
const validateEmail = (email) => {
  if (!email) return Either.left('Email is required');
  if (!email.includes('@')) return Either.left('Email must contain @');
  if (email.length < 5) return Either.left('Email too short');
  return Either.right(email);
};

const validateAge = (age) => {
  if (age === undefined) return Either.left('Age is required');
  if (age < 0) return Either.left('Age must be positive');
  if (age > 150) return Either.left('Age must be realistic');
  return Either.right(age);
};

const createUser = (email, age) =>
  validateEmail(email).flatMap((validEmail) =>
    validateAge(age).map((validAge) => ({
      email: validEmail,
      age: validAge,
      id: Math.random(),
    })),
  );

// Test validation
console.log(createUser('john@example.com', 25)); // Either.Right({...})
console.log(createUser('invalid', 25)); // Either.Left('Email must contain @')
console.log(createUser('john@example.com', -5)); // Either.Left('Age must be positive')

IO Functor

The IO functor wraps side-effectful operations, allowing you to compose them while deferring execution.

IO Implementation

// ✅ IO functor for side effects
class IO {
  constructor(effect) {
    this.effect = effect;
  }

  map(fn) {
    return new IO(() => fn(this.effect()));
  }

  flatMap(fn) {
    return new IO(() => fn(this.effect()).effect());
  }

  run() {
    return this.effect();
  }

  static of(value) {
    return new IO(() => value);
  }

  static from(effect) {
    return new IO(effect);
  }
}

// Side-effect functions wrapped in IO
const readFile = (filename) =>
  IO.from(() => {
    console.log(`Reading file: ${filename}`);
    return `Contents of ${filename}`;
  });

const writeFile = (filename, content) =>
  IO.from(() => {
    console.log(`Writing to file: ${filename}`);
    console.log(`Content: ${content}`);
    return `Written to ${filename}`;
  });

const log = (message) =>
  IO.from(() => {
    console.log(`LOG: ${message}`);
    return message;
  });

// Compose IO operations without executing them
const fileOperation = readFile('input.txt')
  .map((content) => content.toUpperCase())
  .flatMap((content) => log(`Processing: ${content.slice(0, 20)}...`))
  .map((content) => content + '\n\nProcessed by IO Functor')
  .flatMap((content) => writeFile('output.txt', content));

// Execute the composed operation
console.log('About to run IO operations...');
const result = fileOperation.run();
console.log('Final result:', result);

Pointed Functors

A pointed functor is a functor with an of method (also called pure or return) that can lift a value into the functor context.

Pointed Functor Interface

// ✅ Generic pointed functor
class Pointed {
  constructor(value) {
    this.value = value;
  }

  map(fn) {
    return Pointed.of(fn(this.value));
  }

  // The 'of' method makes it a pointed functor
  static of(value) {
    return new Pointed(value);
  }

  // Additional utility methods
  flatMap(fn) {
    return fn(this.value);
  }

  apply(functor) {
    return functor.map(this.value);
  }
}

// All the functors we've seen are pointed functors
console.log(Container.of); // Function
console.log(Maybe.of); // Function
console.log(Either.of); // Function
console.log(IO.of); // Function

Applicative Functor Pattern

// ✅ Applicative functor for multi-argument functions
class Applicative {
  constructor(value) {
    this.value = value;
  }

  map(fn) {
    return Applicative.of(fn(this.value));
  }

  apply(functor) {
    return functor.map(this.value);
  }

  static of(value) {
    return new Applicative(value);
  }
}

// Lift multi-argument functions
const add = (a) => (b) => (c) => a + b + c;

const result = Applicative.of(add)
  .apply(Applicative.of(1))
  .apply(Applicative.of(2))
  .apply(Applicative.of(3));

console.log(result.value); // 6

// More practical example with validation
const validateAndCreate = (name) => (email) => (age) => ({
  name,
  email,
  age,
  valid: true,
});

const user = Maybe.of(validateAndCreate)
  .apply(Maybe.of('John'))
  .apply(Maybe.of('john@example.com'))
  .apply(Maybe.of(25));

console.log(user.inspect()); // Maybe.Some({name: 'John', ...})

Real-World Applications

Safe DOM Manipulation

// ✅ Safe DOM operations with Maybe
const $ = (selector) => Maybe.of(document.querySelector(selector));

const updateUserProfile = (userId) =>
  $(`#user-${userId}`)
    .map((element) => element.querySelector('.name'))
    .map((nameEl) => nameEl.textContent)
    .map((name) => name.trim())
    .filter((name) => name.length > 0)
    .map((name) => `Welcome, ${name}!`)
    .map((welcome) => {
      $(`#welcome-${userId}`).map((el) => (el.textContent = welcome));
      return welcome;
    })
    .getOrElse('User not found');

// Safe event handling
const handleClick = (selector, handler) =>
  $(selector)
    .map((element) => element.addEventListener('click', handler))
    .getOrElse(console.warn(`Element ${selector} not found`));

Async Operations with Promise Functors

// ✅ Promise as functor for async operations
const fetchUser = (id) => fetch(`/api/users/${id}`).then((response) => response.json());

const fetchUserPosts = (userId) =>
  fetch(`/api/users/${userId}/posts`).then((response) => response.json());

// Compose async operations
const getUserWithPosts = (id) =>
  fetchUser(id)
    .then((user) => fetchUserPosts(id).then((posts) => ({ ...user, posts })))
    .then((userData) => ({
      ...userData,
      summary: `${userData.name} has ${userData.posts.length} posts`,
    }))
    .catch((error) => ({ error: error.message }));

// Usage
getUserWithPosts(123)
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

Configuration Pipeline

// ✅ Configuration with Either functor
const loadConfig = () =>
  Either.try(() => {
    // Simulate config loading
    return {
      apiUrl: 'https://api.example.com',
      timeout: 5000,
      retries: 3,
    };
  });

const validateConfig = (config) => {
  if (!config.apiUrl) return Either.left('API URL is required');
  if (config.timeout < 1000) return Either.left('Timeout too low');
  if (config.retries < 0) return Either.left('Retries cannot be negative');
  return Either.right(config);
};

const enrichConfig = (config) =>
  Either.right({
    ...config,
    version: '1.0.0',
    timestamp: new Date().toISOString(),
  });

const initializeApp = () =>
  loadConfig()
    .flatMap(validateConfig)
    .flatMap(enrichConfig)
    .fold(
      (error) => console.error(`Config error: ${error}`),
      (config) => {
        console.log('App initialized with config:', config);
        return config;
      },
    );

initializeApp();

Advanced Functor Patterns

Functor Composition

// ✅ Compose functors
const compose = (F, G) => ({
  of: (value) => F.of(G.of(value)),
  map: (fn) => (functor) => F.map(G.map(fn))(functor),
});

// Compose Maybe and Array
const MaybeArray = compose(Maybe, Array);

const result = Maybe.of([1, 2, 3, 4])
  .map((arr) => arr.map((x) => x * 2))
  .map((arr) => arr.filter((x) => x > 4));

console.log(result.inspect()); // Maybe.Some([6, 8])

Functor Transformers

// ✅ Functor transformer for nested contexts
class MaybeT {
  constructor(innerFunctor) {
    this.innerFunctor = innerFunctor;
  }

  map(fn) {
    return new MaybeT(this.innerFunctor.map((maybe) => maybe.map(fn)));
  }

  static lift(innerFunctor) {
    return new MaybeT(innerFunctor.map(Maybe.of));
  }

  run() {
    return this.innerFunctor;
  }
}

// Usage with Promise<Maybe<T>>
const asyncMaybe = MaybeT.lift(Promise.resolve(42));
const result = asyncMaybe.map((x) => x * 2).map((x) => x + 10);

result.run().then((maybe) => console.log(maybe.inspect())); // Maybe.Some(94)

Covariant and Contravariant Functors

// ✅ Covariant functor (normal functor)
class Covariant {
  constructor(value) {
    this.value = value;
  }

  map(fn) {
    return new Covariant(fn(this.value));
  }

  static of(value) {
    return new Covariant(value);
  }
}

// ✅ Contravariant functor (transforms input, not output)
class Contravariant {
  constructor(predicate) {
    this.predicate = predicate;
  }

  contramap(fn) {
    return new Contravariant((value) => this.predicate(fn(value)));
  }

  test(value) {
    return this.predicate(value);
  }

  static of(predicate) {
    return new Contravariant(predicate);
  }
}

// Example: string length validator
const minLength = (min) => Contravariant.of((str) => str.length >= min);
const emailValidator = minLength(5).contramap((email) => email.trim());

console.log(emailValidator.test('  test@example.com  ')); // true
console.log(emailValidator.test('  a@b  ')); // false

🎯 Key Takeaways

Functors provide safe transformation - apply functions without unwrapping values
Obey functor laws - identity and composition laws ensure predictable behavior
JavaScript has built-in functors - Arrays, Promises, and Functions
Maybe handles null values - prevents null pointer exceptions elegantly
Either handles errors - functional error handling without exceptions
IO manages side effects - compose effectful operations while deferring execution
Pointed functors lift values - the of method brings values into functor context
Composition is powerful - combine functors for complex data transformations

Functors are essential for functional programming, providing a consistent interface for transforming values while preserving structure and handling context.

Table of Contents​

What is a Functor?​

Mathematical Definition​

Basic Functor Interface​

Why Functors Matter​

Functor Laws​

1. Identity Law​

2. Composition Law​

Verifying Functor Laws​

Built-in JavaScript Functors​

Array as a Functor​

Promise as a Functor​

Function as a Functor​

Creating Custom Functors​

Container Functor​

Box Functor with Debugging​

Maybe Functor​

Basic Maybe Implementation​

Maybe with Real-World Examples​

Either Functor​

Either Implementation​

Either for Validation​

IO Functor​

IO Implementation​

Pointed Functors​

Pointed Functor Interface​

Applicative Functor Pattern​

Real-World Applications​

Safe DOM Manipulation​

Async Operations with Promise Functors​

Configuration Pipeline​

Advanced Functor Patterns​

Functor Composition​

Functor Transformers​

Covariant and Contravariant Functors​

🎯 Key Takeaways​

Table of Contents