Introduction to Functional Programming in JavaScript: Applicatives #10
Tags: javascript
Published: 2024-07-14 22:00:00


Applicatives provide a powerful and expressive way to work with functions and data structures that involve context, such as optional values, asynchronous computations, or lists. Applicatives extend the concept of functors, allowing for the application of functions wrapped in a context to values also wrapped in a context. 


#### What is an Applicative?

An applicative is a type of functor that not only supports mapping a function over a wrapped value (like a functor) but also allows for applying functions that are themselves wrapped in a context to values that are wrapped in a context. Applicatives provide a way to handle operations involving multiple functorial values.

##### Properties of Applicatives

1. **Identity**: Applying a wrapped identity function to a wrapped value should yield the wrapped value.
    \[ \text{A.of(x).ap(A.of(f))} \equiv \text{A.of(f(x))} \]
2. **Homomorphism**: Applying a wrapped function to a wrapped value should produce the same result as applying the function to the value and then wrapping it.
    \[ \text{A.of(f).ap(A.of(x))} \equiv \text{A.of(f(x))} \]
3. **Interchange**: Applying a wrapped function to a wrapped value should be equivalent to applying the wrapped value to a function that applies the wrapped function.
    \[ \text{A.of(f).ap(u)} \equiv \text{u.ap(A.of(f => f(x)))} \]

#### Implementing Applicatives in JavaScript

Let's explore how to implement and use applicatives in JavaScript.

##### Example: Implementing Maybe as an Applicative

The `Maybe` type is often used to represent optional values. Let's extend `Maybe` to support applicative operations.

```javascript
class Maybe {
  constructor(value) {
    this.value = value;
  }

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

  map(fn) {
    return this.value === null || this.value === undefined
      ? Maybe.of(null)
      : Maybe.of(fn(this.value));
  }

  ap(maybe) {
    return this.value === null || this.value === undefined
      ? Maybe.of(null)
      : maybe.map(this.value);
  }
}

// Usage
const add = (a) => (b) => a + b;

const maybeAdd = Maybe.of(add);
const maybeTwo = Maybe.of(2);
const maybeThree = Maybe.of(3);

const result = maybeAdd.ap(maybeTwo).ap(maybeThree);
console.log(result); // Maybe { value: 5 }
```

In this example, `Maybe` implements the `ap` method, which applies a function wrapped in a `Maybe` context to a value wrapped in another `Maybe` context. This allows for chaining operations involving optional values.

#### Working with Applicatives in Practice

Applicatives are particularly useful when dealing with computations that involve multiple contexts, such as combining multiple asynchronous operations or handling multiple optional values.

##### Example: Combining Multiple Promises

Let's see how applicatives can help in combining multiple promises.

```javascript
const fetchData = (url) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Data from ${url}`);
    }, 1000);
  });
};

const add = (a) => (b) => a + b;

const promiseAdd = Promise.resolve(add);
const promiseTwo = fetchData('url1').then((data) => parseInt(data.split(' ')[2]));
const promiseThree = fetchData('url2').then((data) => parseInt(data.split(' ')[2]));

const result = promiseAdd
  .then((fn) => promiseTwo.then((a) => fn(a)))
  .then((fn) => promiseThree.then((b) => fn(b)));

result.then(console.log); // Output after 2 seconds: NaN (since "from" cannot be parsed as an int)
```

In this example, we combine multiple promises using the applicative pattern. While the example has a logical issue with parsing, it demonstrates how applicatives can be used to sequence operations that involve context.

##### Example: Handling Multiple Optional Values

Applicatives are also useful for combining multiple optional values.

```javascript
const add = (a) => (b) => a + b;

const maybeAdd = Maybe.of(add);
const maybeFive = Maybe.of(5);
const maybeNull = Maybe.of(null);

const result1 = maybeAdd.ap(maybeFive).ap(maybeFive); // Maybe { value: 10 }
const result2 = maybeAdd.ap(maybeFive).ap(maybeNull); // Maybe { value: null }

console.log(result1); // Maybe { value: 10 }
console.log(result2); // Maybe { value: null }
```

In this example, we use the applicative pattern to combine multiple `Maybe` values, handling the presence of `null` gracefully.