⚠️ Disclaimer Warning
fp-ts is now dead. Please use effect-ts instead.
Update 2024: effect-ts is the recommended library for functional programming in TypeScript.
## Introduction
Welcome to the fourth post on learning fp-ts the practical way. This series is dedicated to learning fp-ts and functional programming with no mathematical knowledge required.
In this post, I'm going to introduce how to use arrays effectively in fp-ts and how we can use [semigroups](https://en.wikipedia.org/wiki/Semigroup) and [monoids](https://en.wikipedia.org/wiki/Monoid) to easily compose operations over arrays.
## Array Basics
The most basic data structure you'll encounter on a daily basis is the Array data type. Arrays are useful to us because we can use them to perform computations by traversing over its elements. But before we jump into traversals with fp-ts, lets start with the basics by going back to loops.
### For Loop
The traditional way of traversing over an array is to use a loop with an index variable, `i`.
```ts
const foo = [1, 2, 3]
let sum = 0
for (let i = 0; i < foo.length; i++) {
sum += foo[i]
}
console.log(sum) // 6
```
### For-of Loop
Instead of using an index counter, we can also directly iterate over the elements using the `for-of` syntax.
```ts
const foo = [1, 2, 3]
let sum = 0
for (const x of foo) {
sum += x
}
console.log(sum) // 6
```
### Functional Loops
But lets be real, all the cool kids these days are using the fancy functional `map`, `reduce`, `filter` syntax.
```ts
const foo = [1, 2, 3, 4, 5]
const sum = foo
.map((x) => x - 1)
.filter((x) => x % 2 === 0)
.reduce((prev, next) => prev + next, 0)
console.log(sum) // 6
```
In fp-ts, we can do the same thing but with different syntax.
```ts
import * as A from 'fp-ts/lib/Array'
import { pipe } from 'fp-ts/lib/function'
const foo = [1, 2, 3, 4, 5]
const sum = pipe(
A.array.map(foo, (x) => x - 1),
A.filter((x) => x % 2 === 0),
A.reduce(0, (prev, next) => prev + next),
)
console.log(sum) // 6
```
However, this just looks like syntactic sugar, so let us digress. Why should you install fp-ts when you can just use the regular array methods?
## Array Extensions
If you come from the Python world, you'll be shocked to find that Typescript doesn't have built in array methods like [`zip`](https://docs.python.org/3.9/library/functions.html#zip). You should use fp-ts because it gives you the additional batteries you need to do fancy array manipulation.
```ts
import * as A from 'fp-ts/lib/Array'
import { pipe } from 'fp-ts/lib/function'
const foo = [1, 2, 3]
const bar = ['a', 'b', 'c']
const zipped = pipe(foo, A.zip(bar))
console.log(zipped) // [[1, 'a], [2, 'b], [3, 'c']]
```
The cool thing about this is that it preserves the type-safety of the elements in the array. The type of `zipped` is `Array<[number, string]>` rather than `Array