Transducers, functors & monads

Plain words first

This lesson has big names: transducer, functor, monad, Observable. Don't learn the names first. Look at the working JavaScript first, then learn the name for it.

Each idea answers a normal question you meet in real code:

• How can I run map and filter without making extra arrays?
• How can I read a value that might be missing, without many if checks?
• How can a form check return an error message without throwing an error?
• How can I handle many values that arrive over time, like clicks?

This table lists every new word in this lesson. Read across a row to see what the word means and when it helps.

You will use tools from earlier lessons: map, filter & reduce, pure functions, optional chaining, promise chaining, and events. The transducer code also uses a compose helper from Composition & pipelines.

Start with code you know. map always returns a new array. filter also returns a new array. So a chain of three steps makes an array after each step.

The code below gives those arrays names, doubled and large, so you can see them. It also counts how many times each function runs.

1const numbers = [1, 2, 3, 4, 5];2 3let mapCalls = 0;4let filterCalls = 0;5let labelCalls = 0;6 7const doubled = numbers.map((number) => {8  mapCalls += 1;9  return number * 2;10});11 12const large = doubled.filter((number) => {13  filterCalls += 1;14  return number > 5;15});16 17const labels = large.map((number) => {18  labelCalls += 1;19  return "#" + number;20});21 22console.log(labels.join(", "));23console.log("intermediate arrays:", doubled.join(" "), "|", large.join(" "));24console.log("callback calls:", mapCalls + filterCalls + labelCalls);

1. Line 7 doubles every number. The new array doubled is [2, 4, 6, 8, 10].
2. Line 12 keeps numbers above 5. The new array large is [6, 8, 10].
3. Line 17 turns each kept number into a label like "#6".
4. Line 22 prints #6, #8, #10. Line 23 prints the two arrays made on the way.

This chain is easy to read, and it is usually the right choice. But with a very long list, the extra arrays cost time and memory. Then you can join the steps into one pass.

A reducer is the function you give to reduce. It takes the result so far and one value, and returns the new result. A transducer is a function that takes a reducer and returns a new reducer with one more step built in.

• mapping(fn) makes a reducer that changes each value with fn first.
• filtering(test) makes a reducer that skips a value when test says no.
• compose joins them, so one reducer does all three steps.

1const numbers = [1, 2, 3, 4, 5];Run2 3const mapping = (project) => (reducer) => (list, value) =>4  reducer(list, project(value));5const filtering = (keep) => (reducer) => (list, value) =>6  keep(value) ? reducer(list, value) : list;7const compose = (...fns) => (value) =>8  fns.reduceRight((next, fn) => fn(next), value);9 10const xform = compose(11  mapping((number) => number * 2),12  filtering((number) => number > 5),13  mapping((number) => "#" + number),14);15let visits = 0;16const append = (list, value) => {17  list.push(value);18  return list;19};20const reducer = xform(append);21const result = numbers.reduce((list, value) => {22  visits += 1;23  return reducer(list, value);24}, []);25console.log(result.join(", "));26console.log("reduce visits:", visits);

Joining the steps is a trade-off, not always a win. It saves the extra arrays, but the code is harder to read. Use it when the saved work matters.

Newer JavaScript also has iterator helpers. They give you map and filter that work one value at a time, with no extra arrays. They look like Iterator.from(values).map(...).filter(...). Check that the browsers you support have them before you use them.

You already know one functor: the array. [1, 2, 3].map(fn) changes each value, and the result is still an array.

The code below makes a tiny container called Box. It holds one value. Its map method runs a function on that value and puts the answer in a new Box.

1const Box = (value) => ({2  map(fn) {3    return Box(fn(value));4  },5  valueOf() {6    return value;7  },8  toString() {9    return `Box(${value})`;10  },11});12 13const sameBox = (left, right) => Object.is(left.valueOf(), right.valueOf());14const id = (value) => value;15const compose = (after, before) => (value) => after(before(value));16const double = (number) => number * 2;17const increment = (number) => number + 1;18 19console.log([1, 2, 3].map(id).join(","));20console.log(sameBox(Box(7).map(id), Box(7)));21console.log(sameBox(22  Box(7).map(compose(double, increment)),23  Box(7).map(increment).map(double),24));

A good map follows two rules. People call them the functor laws. The last three console.log lines check them.

1. The identity rule: mapping (value) => value changes nothing. The function gives back what it gets, so the container stays the same. Lines 19 and 20 check this for the array and for Box.
2. The composition rule: one map with two functions joined gives the same result as two map calls, one function each. Lines 21 to 24 check this. Both ways give 16, so it prints true.

Here is the array again, with a real task. Its values change, but the result is still an array.

1const prices = [3, 5];2const withTax = prices.map((price) => (price * 1.1).toFixed(2));3console.log(withTax.join(", "));

1. Line 1 makes an array with two prices.
2. Line 2 adds 10% tax to each price. toFixed(2) turns it into text with two decimals. This also hides tiny rounding errors, like 3.3000000000000003.
3. Line 3 prints 3.30, 5.50. The result is still an array, now of text.

A Maybe is a container that is one of two things:

• Just(value): a real value is inside.
• Nothing: the value is missing.

In the code below, Maybe.fromNullable turns null and undefined into Nothing. Any other value becomes a Just. The map method runs your function only on a Just. On a Nothing, it skips the function.

1const Maybe = {2  fromNullable(value) {3    return value == null ? Nothing() : Just(value);4  },5};6function Just(value) {7  return {8    map(fn) { return Maybe.fromNullable(fn(value)); },9    chain(fn) { return fn(value); },10    withDefault() { return value; },11    toString() { return `Just(${value})`; },12  };13}14function Nothing() {15  return {16    map() { return Nothing(); },17    chain() { return Nothing(); },18    withDefault(fallback) { return fallback; },19    toString() { return "Nothing"; },20  };21}22const users = {Run23  ada: { profile: { email: "ada@example.com" } },24  lin: {},25};26const key = "lin";27const label = Maybe.fromNullable(users[key])28  .map((user) => user.profile)29  .map((profile) => profile.email)30  .withDefault("No email");31console.log(label);

For one property path, plain JavaScript is simpler. ?. stops when a value is missing, and ?? gives a fallback value:

1const user = {};2console.log(user.profile?.email ?? "No email");

Maybe helps more when many small functions all return a value that might be missing. Then they can all share the same map and chain methods.

Either, often called Result, is like Maybe, but the "missing" side keeps an error message. It is one of two things:

• Ok(value): the step worked, and here is the value.
• Err(message): the step failed, and here is why.

The match method takes two functions, ok and err. It runs ok for an Ok and err for an Err.

1const Ok = (value) => ({2  map(fn) { return Ok(fn(value)); },3  chain(fn) { return fn(value); },4  match(arms) { return arms.ok(value); },5});6const Err = (message) => ({7  map() { return Err(message); },8  chain() { return Err(message); },9  match(arms) { return arms.err(message); },10});11 12function validateSignup(form) {13  if (!form.email.includes("@")) return Err("Email needs @");14  if (form.password.length < 8) return Err("Password too short");15  return Ok({ email: form.email.toLowerCase() });16}17 18const good = validateSignup({ email: "ADA@EXAMPLE.COM", password: "correct horse" });19const bad = validateSignup({ email: "ada", password: "short" });20 21console.log(good.map((data) => data.email).match({22  ok: (email) => "ok: " + email,23  err: (message) => "error: " + message,24}));25console.log(bad.map((data) => data.email).match({26  ok: (email) => "ok: " + email,27  err: (message) => "error: " + message,28}));

1. Lines 1 and 6 make Ok and Err. Err's map skips the function and keeps the message.
2. Lines 13 and 14 return an Err for a bad email or a short password. Line 15 returns an Ok.
3. Line 21 prints ok: ada@example.com. Line 25 prints error: Email needs @.

Result also keeps a longer check easy to read. chain passes the value to the next check only when the step before gave an Ok. An Err skips the next check and keeps its first message.

1const parseAge = (text) => {2  const age = Number(text);3  return Number.isInteger(age) ? Ok(age) : Err("Age must be a number");4};5const Ok = (value) => ({6  chain(fn) { return fn(value); },7  match(arms) { return arms.ok(value); },8});9const Err = (message) => ({10  chain() { return Err(message); },11  match(arms) { return arms.err(message); },12});13const adult = (age) => age >= 18 ? Ok("allowed") : Err("Must be 18 or older");14console.log(parseAge("20").chain(adult).match({15  ok: (message) => message,16  err: (message) => message,17}));

1. parseAge("20") gives Ok(20), because 20 is a whole number.
2. Line 6: Ok's chain passes 20 to adult. Line 10: Err's chain would skip it.
3. adult(20) gives Ok("allowed"), so the code prints allowed.

Errors with throw are still right for real surprises, like a bug. Result is useful when a failure is normal, like a wrong form field. You show the message, the page keeps working, and you don't need try/catch around every check.

In this lesson, a monad is a container with one more method. That method is for functions that already return the same kind of container.

If you use map with such a function, you get a container inside a container. The extra method takes the value out first, so the next step gets a plain value. Here is that method in four containers:

• Maybe.chain(fn) runs fn(value) for Just and skips it for Nothing.
• Result.chain(fn) runs the next check for Ok and keeps the first Err.
• Array.prototype.flatMap maps each item to an array, then removes one level of nesting.
• Promise.prototype.then does the same for steps that wait and return a promise.

A thenable is any object with a then method. A promise treats a thenable like a promise. It calls the then method and takes the value out.

1const thenable = {2  then(resolve) {3    resolve("flattened by Promise");4  },5};6 7Promise.resolve(thenable).then((value) => {8  console.log(value);9});

1. Line 1 makes a plain object with a then method.
2. Line 7 gives it to Promise.resolve. The promise calls then, gets the text, and logs flattened by Promise. You never see the object itself.

A promise chain also carries errors. If a then step throws an error, the promise is rejected, which means it failed. The next catch gets the error. So success and failure stay in one chain, with no nested try blocks.

1Promise.resolve("Asha")2  .then((user) => user + " loaded")3  .then(() => { throw new Error("offline"); })4  .catch((error) => console.log("error: " + error.message));

1. Line 2 turns "Asha" into "Asha loaded".
2. Line 3 throws an error with the message offline.
3. Line 4 catches it and prints error: offline.

Arrays have the same idea for work that does not wait. map would give one inner array per basket. flatMap maps and then removes that one level.

1const baskets = [["tea", "bread"], ["rice"]];2const items = baskets.flatMap((basket) => basket);3console.log(items.join(", "));

One warning about promises. A promise takes the value out of any thenable, as you saw above. This helps on the web, where many libraries make their own thenables. But it means a promise does not follow the strict monad rules in every case.

A promise gives one answer. An Observable can give many. It works with these methods:

• subscribe: start listening. This is what starts the Observable.
• next: send one value to the listener. It can run many times.
• complete: say "no more values".
• unsubscribe: stop listening and clean up.
• map and filter: change or skip values on the way.

The code below builds a tiny Observable class with only these parts. It is small on purpose. Once you can read it, you can read code that uses RxJS, a popular library for Observables.

1class TinyObservable {2  constructor(start) {3    this.start = start;4  }5  subscribe(observer) {6    let closed = false;7    let cleanup = () => {};8    const safe = {9      next(value) {10        if (!closed) observer.next?.(value);11      },12      complete() {13        if (!closed) {14          closed = true;15          observer.complete?.();16          cleanup();17        }18      },19    };20    cleanup = this.start(safe) || (() => {});21    if (closed) cleanup();22    return {23      unsubscribe() {24        if (!closed) {25          closed = true;26          cleanup();27        }28      },29    };30  }31  map(project) {32    return new TinyObservable((observer) => {33      const subscription = this.subscribe({34        next: (value) => observer.next(project(value)),35        complete: () => observer.complete(),36      });37      return () => subscription.unsubscribe();38    });39  }40  filter(keep) {41    return new TinyObservable((observer) => {42      const subscription = this.subscribe({43        next: (value) => {44          if (keep(value)) observer.next(value);45        },46        complete: () => observer.complete(),47      });48      return () => subscription.unsubscribe();49    });50  }51}52TinyObservable.of = (...values) => new TinyObservable((observer) => {53  values.forEach((value) => observer.next(value));54  observer.complete();55});56 57const numbers = TinyObservable.of(1, 2, 3, 4);58numbers59  .map((number) => number * 2)60  .filter((number) => number > 4)61  .subscribe({62    next(value) { console.log(value); },63    complete() { console.log("done"); },64  });

1. Line 5, subscribe, runs the start function. Line 9, next, passes each value on until the stream is closed.
2. Line 12, complete, closes the stream. Line 23, unsubscribe, closes it and runs the clean-up.
3. Lines 31 and 40 add map and filter. Each one makes a new Observable around the old one.
4. Lines 59 to 61 double 1, 2, 3, 4, keep values above 4, and print 6, 8, then done.

1const numbers = TinyObservable.of(1, 2, 3, 4, 5);2 3numbers4  .map((number) => number * 2)5  .filter((number) => number >= 6)6  .subscribe({7    next(value) { console.log(value); },8    complete() { console.log("done"); },9  });

An Observable is lazy. That means making it does not start it. It starts at subscribe. Then unsubscribe runs its clean-up function. That makes it easy to stop timers, close connections, and clean up when a part of the page goes away.

1let starts = 0;2const stream = new TinyObservable((observer) => {3  starts += 1;4  observer.next("tea");5  return () => console.log("cleaned up");6});7console.log("before:", starts);8const subscription = stream.subscribe({ next: console.log });9console.log("after:", starts);10subscription.unsubscribe();

1. Line 2 makes the stream. Its start function does not run yet.
2. Line 7 prints before: 0, so nothing has started.
3. Line 8 subscribes. The start function runs and sends tea.
4. Line 9 prints after: 1. Line 10 unsubscribes, which prints cleaned up.

This table compares a promise, an Observable, and an EventTarget (any object you can add an event listener to, like a button). Read down a column for one tool.

For simple page events, addEventListener and custom events are often the clearest. Observables help when you want a chain of steps on a stream: map, filter, wait before sending, try again, and stop, all with the same methods. Many teams use RxJS for this.

1const button = document.querySelector("button");2 3if (button && typeof button.when === "function") {4  const subscription = button5    .when("click")6    .map((event) => event.type)7    .subscribe({ next: (type) => console.log(type) });8 9  subscription.unsubscribe();10} else {11  console.log("EventTarget.when is not available in this browser.");12}

1. Line 3 checks that the button has a when method.
2. Line 5 turns the button's clicks into an Observable.
3. Line 11 runs in browsers without when, and says so.

These ideas are useful only when they make code easier to change. Pick the simplest tool that does the job. Each tool in this lesson is the right answer somewhere in a web app.

This table goes from a situation to a tool. Find your situation in the first column, then read across.

Start with code a teammate can read quickly. A custom Maybe helps when a whole project uses it. For one missing field, it is only extra code.

1const user = {};2const email = user.profile?.email ?? "No email";3console.log(email);

In Composition & pipelines, you joined small functions into longer chains. The same habit works here. Keep each step pure when you can, and keep side effects, like logging or network calls, at the edges.

Common misconceptions

• "A monad is a special class." In JavaScript, it is just a way of writing a container. The container has chain, flatMap, or a method that works like then.
• "Maybe is always better than ?.." For one property path, ?. and ?? are clearer. Maybe helps when many functions share the same missing-value checks.
• "With Either, you never throw." Use Result for normal failures, like a wrong form field. Still throw for bugs, broken rules in your own code, and surprise failures like a server crash.
• "Transducers always make code faster." They skip the extra arrays. But they add more function calls and are harder to read. Measure before you switch.
• "Observables replace promises." A promise is the built-in tool for one value that comes later. Observables are for many values, starting late, and stopping.
• "The functor rules don't matter in real code." The rules are why you can safely change box.map(f).map(g) into box.map((x) => g(f(x))).

This table puts three containers side by side. Read down a column to see what one container is for.

Key takeaways

• A transducer joins map and filter steps into one reducer, so each value goes through all steps in one pass.
• A functor is a container with a map that follows two rules. Array and Box are examples.
• Maybe handles values that might be missing. Either, or Result, keeps an error message for normal failures.
• A monad is a container with chain, flatMap, or then, for functions that return a container.
• An Observable sends many values, starts on subscribe, and can be stopped. A promise gives one value later.

Up next: the Regular expressions module begins with Patterns & flags.