## DEV Community # Practical Functional Programming in JavaScript - Intro to Transformation

Welcome back ladies and gentlemen to another round of Practical Functional Programming in JavaScript. Today we will develop some intuition on transformation - a process that happens when one thing becomes another. At the most basic level, transformation is thing A becoming thing B; `A => B`. This sort of thing happens quite a lot in programming as well as real life; you'll develop a strong foundation for functional programming if you approach problem solving from the perspective of transformations.

Here is a classic transformation: TransformerRobot => SportsCar transformation [of data] is the process of converting data from one format or structure into another format or structure.

Looks like transformation is a process, but what exactly is the "data" that we are converting? Here's a definition from the wikipedia article for data.

Data (treated as singular, plural, or as a mass noun) is any sequence of one or more symbols given meaning by specific act(s) of interpretation.

Data can be both singular or plural? What about poor old datum? I guess it didn't roll off the tongue so well. In any case, with this definition, we can refer to any JavaScript type as data. To illustrate, here is a list of things that we can call data.

### Just data things in JavaScript

• a number - `1`
• an array of numbers - `[1, 2, 3]`
• a string - `'hello'`
• an array of strings - `['hello', 'world']`
• an object - `{ a: 1, b: 2, c: 3 }`
• a JSON string - `'{"a":1,"b":2,"c":3}'`
• `null`
• `undefined`

I like functional programming because it inherently deals with transformations of data, aka transformations of anything, aka As becoming Bs (or hopefully, if you're a student, Bs becoming As). Pair that with JavaScript and you have transformations that come to life. We will now explore several transformations.

Here's a simple transformation of a value using a JavaScript arrow function:

``````const square = number => number ** 2

square(3) // 9
``````

`square` is a function that takes a number and transforms it into its square. number => squaredNumber. `A => B`.

Let's move on to transformations on collections. Here is a transformation on an Array using `square` and the built in .map function on the Array prototype.

``````const square = number => number ** 2

const map = f => array => array.map(f)

map(square)([1, 2, 3]) // [1, 4, 9]
``````

To get our new Array, we `map` or "apply" the function `square` to each element of our original array `[1, 2, 3]`. We haven't changed square, we've just used it on each item of an array via `map`. In this case, we've transformed the data that is the array `[1, 2, 3]` into another array `[1, 4, 9]`. Putting it in terms of A and B: `map(a => b)(A) == B`.

The following statements are equivalent

• `map(square)([1, 2, 3]) == [1, 4, 9]`
• `map(number => number ** 2)([1, 2, 3]) == [1, 4, 9]`
• `map(number => number ** 2)(A) == B`
• `map(a => b)(A) == B`

When you `map`, all the `a`s in `A` have to become `b`s in `B` to fully convert `A` to `B`. This is intuition for category theory, which I won't go into too much here. Basically A and B are nodes of some arbitrary category, lets say Arrays, and `map(a => b)` is an "arrow" that describes how you get from A to B. Since each `a` maps one-to-one to a `b`, we say that `map(a => b)` is a linear transformation or bijective transformation from A to B.

Here's another kind of transformation on collections for filtering out elements from a collection. Just like `.map`, you can find .filter on the Array prototype.

``````const isOdd = number => number % 2 === 1

const filter = f => array => array.filter(f)

filter(isOdd)([1, 2, 3]) // [1, 3]
``````

When we supply the array `[1, 2, 3]` to `filter(isOdd)`, we get `[1, 3]`. It's as if to say we are "filtering" the array `[1, 2, 3]` by the function `isOdd`. Here is how you would write `filter` in terms of A and B: `filter(a => boolean)(A) == B`.

The following statements are equivalent

• `filter(isOdd)([1, 2, 3]) == [1, 3]`
• `filter(number => number % 2 === 1)([1, 2, 3]) == [1, 3]`
• `filter(number => number % 2 === 1)(A) == B`
• `filter(a => boolean)(A) == B`

Unlike `map`, `filter` does not convert `a`s into `b`s. Instead, `filter` uses boolean values derived from `a`s given by the function `a => boolean` to determine if the item should be in `B` or not. If the boolean is true, include `a` in B. Otherwise don't. The transformation `filter(a => boolean)` transforms A into a subset of itself, B. This "filtering" transformation falls under the general transformations.

Our last transformation is a generalized way to say both `map(a => b)(A) == B` and `filter(a => boolean)(A) == B`. Hailing once again from the Array prototype, welcome .reduce. If you've used `reduce` before, you may currently understand it under the following definition:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

I fully endorse this definition. However, it isn't quite what I need to talk about transformation. Here's my definition of reduce that fits better into our context.

The reduce() method executes a transformation F (A => B) defined by a reducer function and initial value

All this definition says is a general formula for transformations is `reduce(reducerFunction, initialValue)` == `F` == `A => B`. Here is a quick proof.

``````const reduce = (f, init) => array => array.reduce(f, init)

const sum = reduce(
(a, b) => a + b, // reducerFunction
0, // initialValue
) // F

sum( // F
[1, 2, 3, 4, 5], // A
) // 15; B

// sum([1, 2, 3, 4, 5]) == 15
// F(A) == B
// F == (A => B)
// QED.
``````

It follows that `reduce(reducerFunction, initialValue)` can express any transformation from A to B. That means both `map(a => b)(A) == B` and `filter(a => boolean)(A) == B` can be expressed by `reduce(reducerFunction, initialValue)(A) == B`.

`reducerFunction` can be expressed as `(aggregate, curValue) => nextAggregate`. If you've used or heard of redux, you've had exposure to reducer functions.

The reducer is a pure function that takes the previous state and an action, and returns the next state.

``````(previousState, action) => nextState
``````

`initialValue` is optional, and acts as a starting value for `aggregate`. If `initialValue` is not provided, `aggregate` starts as the first element of `A`.

I will now rewrite our Array `.map` example from before with `.reduce`.

``````const square = number => number ** 2

// reduce(reducerFunction, initialValue)
const map = f => array => array.reduce(
(prevArray, curValue) => [...prevArray, f(curValue)], // reducerFunction
[], // initialValue
)

map(square)([1, 2, 3]) // [1, 4, 9]

// map(square)(A) == B
// F(A) == B
``````

Each iteration for a given `array`, tack on `f(curValue)` to the end of the `prevArray`.

Here's our previous Array `filter` example with `reduce`.

``````const isOdd = number => number % 2 === 1

// reduce(reducerFunction, initialValue)
const filter = f => array => array.reduce(
(prevArray, curValue) => (
f(curValue) ? [...prevArray, curValue] : prevArray
), // reducerFunction
[], // initialValue
)

filter(isOdd)([1, 2, 3]) // [1, 3]

// filter(isOdd)(A) == B
// F(A) == B
``````

Each iteration for a given `array`, tack on `curValue` to the end of the `prevArray` only if `f(curValue)` is truthy.

So yeah, `reduce` is cool and can do a lot. I should warn you that even though it's possible to write a lot of transformations in terms of reduce, `map` and `filter` are there for a reason. If you can do it in `map` or `filter`, don't use `reduce`. That said, there are certain things even Array `.reduce` cannot do. These things include

• reducing values of any iterable
• reducing values of an async iterable
• reducing values of an object

I think it is valuable to be able to transform these things, so I authored a functional programming library, rubico, with a highly optimized reduce that works on any collection. The same goes for map and filter. In addition, any functions you supply to these special transformation functions (or for that matter any function in rubico) have async and Promises handled automagically. That's because functional code that actually does stuff shouldn't care about async - it takes away from the mathiness.

I'll leave you today with some guidelines for map, filter, and reduce.

• If you want to apply a function to all elements of a collection, use map
• if you want to get a smaller collection from a larger collection based on some test, use filter
• Most everything else, use reduce

I hope you enjoyed this longer-ish intro to transformation. If you have any questions or comments, please leave them below. I'll be here all week. Also you can find the rest of my articles on my profile or in the awesome resources section of rubico's github. See you next time on Practical Functional Programming in JavaScript - Techniques for Composing Data