Introduction to Functional Programming in JavaScript: Monoids, Applicatives, and Lenses #8
Tags: javascript
Published: 2024-07-10 22:00:00

Functional programming offers a rich set of tools and patterns that can help you write more expressive, modular, and maintainable code. Among these tools are monoids, applicatives, and lenses. These advanced concepts can initially seem daunting, but they provide powerful abstractions for dealing with data and computations. 

#### Monoids

A monoid is a type with a binary associative operation and an identity element. This might sound abstract, but many common data types and operations form monoids.

##### Monoid Properties

1. **Associativity**: \( (a \cdot b) \cdot c = a \cdot (b \cdot c) \)
2. **Identity Element**: There exists an element \( e \) such that \( a \cdot e = e \cdot a = a \)

##### Example: String Concatenation

```javascript
const concat = (a, b) => a + b;
const identity = '';

console.log(concat('Hello, ', 'World!')); // 'Hello, World!'
console.log(concat(identity, 'Hello')); // 'Hello'
console.log(concat('World', identity)); // 'World'
```

String concatenation with an empty string as the identity element is a monoid.

##### Example: Array Concatenation

```javascript
const concat = (a, b) => a.concat(b);
const identity = [];

console.log(concat([1, 2], [3, 4])); // [1, 2, 3, 4]
console.log(concat(identity, [1, 2])); // [1, 2]
console.log(concat([1, 2], identity)); // [1, 2]
```

Array concatenation with an empty array as the identity element is also a monoid.

#### Applicatives

Applicatives are a type of functor that allow for function application lifted over a computational context. They provide a way to apply functions to values that are wrapped in a context, such as Maybe, Promise, or arrays.

##### Applicative Properties

1. **Identity**: \( A.of(x).map(f) \equiv A.of(f).ap(A.of(x)) \)
2. **Homomorphism**: \( A.of(f).ap(A.of(x)) \equiv A.of(f(x)) \)
3. **Interchange**: \( A.of(f).ap(u) \equiv u.ap(A.of(f => f(x))) \)

##### Example: Applying Functions with Applicatives

```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 maybe.map(this.value);
  }
}

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, the `ap` method is used to apply the function inside the `Maybe` context to the values inside other `Maybe` instances.

#### Lenses

Lenses are a functional programming technique for focusing on and manipulating parts of data structures. They provide a way to get and set values in immutable data structures.

##### Basic Lens Implementation

A lens is typically defined by two functions: a getter and a setter.

```javascript
const lens = (getter, setter) => ({
  get: obj => getter(obj),
  set: (val, obj) => setter(val, obj)
});

const prop = key => lens(
  obj => obj[key],
  (val, obj) => ({ ...obj, [key]: val })
);

const user = { name: 'Alice', age: 30 };

const nameLens = prop('name');

const userName = nameLens.get(user);
console.log(userName); // 'Alice'

const updatedUser = nameLens.set('Bob', user);
console.log(updatedUser); // { name: 'Bob', age: 30 }
```

In this example, `prop` creates a lens that focuses on a property of an object. The lens allows you to get and set the value of that property in an immutable way.

#### Combining Lenses

Lenses can be composed to focus on nested data structures.

```javascript
const addressLens = prop('address');
const cityLens = lens(
  obj => obj.city,
  (val, obj) => ({ ...obj, city: val })
);

const userAddressCityLens = {
  get: obj => cityLens.get(addressLens.get(obj)),
  set: (val, obj) => addressLens.set(cityLens.set(val, addressLens.get(obj)), obj)
};

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zip: '12345'
  }
};

const userCity = userAddressCityLens.get(user);
console.log(userCity); // 'Wonderland'

const updatedUser = userAddressCityLens.set('Oz', user);
console.log(updatedUser); // { name: 'Alice', address: { city: 'Oz', zip: '12345' } }
```

By composing lenses, you can focus on and manipulate nested properties in complex data structures.


Monoids, applicatives, and lenses are advanced functional programming patterns that enable you to write more expressive and maintainable JavaScript code. Monoids provide a way to combine values in a structured manner, applicatives allow for function application within a context, and lenses offer a powerful way to access and update immutable data structures.

By incorporating these patterns into your programming toolkit, you can handle complex data transformations, manage side effects, and maintain immutability in your applications.