Introduction

In this post, I will explain how it is possible to use fold (in Haskell) or reduce (in JavaScript) to rewrite some common array functions to get a basic understanding of how they work and how much you can do with it.

So, if you want to learn how fold`/ reduce` work and what a powerful function it is, this post is for you.

How does fold/reduce work?

fold`/ reduce` iterates over a list and operates on the current element and the already processed ones.

I must admit that this sounds a bit confusing, but I hope you will understand what that means while reading this article.

There is a slight difference in the Haskell fold and the JavaScript reduce , the Haskell one is curried by default but that shouldn't bother us. Let us look at the function definition first:

foldl :: Foldable t => (b -> a -> b) -> b -> t a -> b

This look weird, an annotated version would look like this:

( first param ) -> ( second param ) (third param) ( Accumulator -> CurrentElement -> Result ) ( NeutralElement ) -> ( Foldable ) -> Result foldl :: Foldable t => ( b -> a -> b ) -> b -> t a -> b

Foldable is a so-called Type class and says that the type t must implement the Foldable interface, as long as it does nothing matters.

The first argument is a function which takes two arguments, the so-called accumulator which contains the already calculated result until this stage and the current element of the Foldable which is processed now. This function returns a result which is the accumulator in the next run.

The second argument is the neutral element which is the accumulator of the first iteration of this function. You can think of it as the default value or the starting value.

The third argument is the Foldable over which the function is iterating, this can be a List/Array for example.

So, fold`/ reduce` needs a function which gets two arguments the current element of the iteration and the result of the already processed iterations, a neutral element and a list and returns something the same type as the neutral element.

fold`/ reduce iterates over a list( Foldable`) and operates on the current element and the already processed ones. Does this sound more clear now? Don't worry if not, you will get it when looking at the examples.

Theoretically, you can do everything on a Foldable you want. You can calculate a single result out of it (like a sum function or a length function), calculate a new value for each element (like map ) or transform the values into a completely new structure. Still confused? Then go and read on how we implement some functions.

Length

Length is a function that gets an array and returns the amount of the elements inside an array. So it counts the array elements.

Haskell implementation:

length' :: [a] -> Int length' = foldl ( \ acc _ -> acc + 1 ) 0 length' [ 1 .. 5 ] -- 5

JavaScript implementation:

const length = arr => arr . reduce ( acc => acc + 1 , 0 ) length ([ 1 , 2 , 3 , 4 , 5 ]); // 5

We iterate over the array and add one for each element to the accumulator, which is zero as the default. As we don't need the actual value of the current element we leave this argument blank.

Sum/Max/Min

Sum

Sum is a function that gets an array and returns the sum of the elements of that array.

Haskell implementation:

sum' :: [ Int ] -> Int sum' = foldl ( \ acc curr -> acc + curr) 0 sum' [ 1 .. 5 ] -- 15

JavaScript implementation:

const sum = arr => arr . reduce (( acc , curr ) => acc + curr , 0 ); sum ([ 1 , 2 , 3 , 4 , 5 ]); // 15

We iterate over the array and add the value of the current value to the accumulator, which is zero as the default.

Max

Max is a function that gets an array and returns the maximum of that array.

Haskell implementation:

max' :: [ Int ] -> Int max' (x : xs) = foldl ( \ acc curr -> if curr > acc then curr else acc) x xs max' [ 1 .. 5 ] -- 5

JavaScript implementation:

const max = arr => arr . reduce (( acc , curr ) => ( curr > acc ? curr : acc ), arr [ 0 ]); max ([ 1 , 2 , 3 , 4 , 5 ]); // 5

We iterate over the array and look if the current element is greater than the accumulator, if so we use the current element otherwise we use the accumulator and the neutral element is the first element of the array. This returns the maximum of an array.

Min

Min is a function that gets an array and returns the minimum of that array.

The implementation is similar to the max -function but with the opposite comparison.

Haskell implementation:

min' :: [ Int ] -> Int min' (x : xs) = foldl ( \ acc curr -> if curr < acc then curr else acc) x xs min' [ 1 .. 5 ] -- 1

JavaScript implementation:

const min = arr => arr . reduce (( acc , curr ) => ( curr < acc ? curr : acc ), arr [ 0 ]); min ([ 1 , 2 , 3 , 4 , 5 ]); // 1

Elem(Includes)/Delete

Elem(Includes)

Elem, in JavaScript it is called includes, is a function that gets an element and an array and returns whether the element is an element of that array or not.

Haskell implementation:

elem' :: Eq a => a -> [a] -> Bool elem' item = foldl ( \ acc curr -> if item == curr then True else acc ) False elem' 3 [ 1 .. 5 ] -- True elem' 8 [ 1 .. 5 ] -- False

JavaScript implementation:

const includes = item => arr => arr . reduce (( acc , curr ) => ( item === curr ? true : acc ), false ); includes ( 3 )([ 1 , 2 , 3 , 4 , 5 ]); // true includes ( 8 )([ 1 , 2 , 3 , 4 , 5 ]); // false

We iterate over the array and check if the current element is the same as the element we are searching for if it is we return true otherwise we return false and on the first run the accumulator is set to false. So if the element is inside the array we set the accumulator to true and it has no possibility to be set to false again.

Delete

Delete is a function that gets an element and an array and returns the array without every occurrence of that element.

Haskell implementation:

delete' :: Eq a => a -> [a] -> [a] delete' item = foldl ( \ acc curr -> if item == curr then acc else acc ++ [curr] ) [] delete' 3 [ 1 .. 5 ] -- [1,2,4,5]

JavaScript implementation:

// delete is a keyword in JavaScript const myDelete = item => arr => arr . reduce (( acc , curr ) => ( item === curr ? acc : acc . concat ( curr )), []); myDelete ( 3 )([ 1 , 2 , 3 , 4 , 5 ]); // [ 1, 2, 4, 5 ]

We iterate over the list and check if the current element is the same as the one we want to delete from the list, if so we return the accumulator otherwise we concatenate the accumulator with the current element and return the result. The neutral element is an empty array.

Head/Last/Tail/Reverse

Head

Head is a function that gets an array and returns the first element of that array.

Haskell implementation:

head' :: [a] -> a head' (x : xs) = foldl ( \ acc _ -> acc) x xs head' [ 1 .. 5 ] -- 1

JavaScript implementation:

const head = arr => arr . reduce ( acc => acc , arr [ 0 ]); head ([ 1 , 2 , 3 , 4 , 5 ]); // 1

We set the neutral element to the first element of the array and in the processing function, we return only the accumulator, so the result can't be anything but the first element.

Last

Last is a function that gets an array and returns the last element of that array.

Haskell implementation:

last' :: [a] -> a last' (x : xs) = foldl ( \ _ curr -> curr) x xs last' [ 1 .. 5 ] -- 5

JavaScript implementation:

const last = arr => arr . reduce (( _ , curr ) => curr , arr [ 0 ]); last ([ 1 , 2 , 3 , 4 , 5 ]); // 5

We set the neutral element to the first element of the array and in the processing function, we always return the current element, so the result is the last element eventually.

Tail

Tail is a function that gets an array and returns all except the first element of that array.

Haskell implementation:

tail' :: [a] -> [a] tail' (x : xs) = foldl ( \ acc curr -> acc ++ [curr]) [] xs tail' [ 1 .. 5 ] -- [2,3,4,5]

JavaScript implementation:

const tail = arr => arr . reduce (( acc , curr , index ) => ( index > 0 ? acc . concat ( curr ) : acc ), []); tail ([ 1 , 2 , 3 , 4 , 5 ]); // [ 2, 3, 4, 5 ]

This time the Haskell and the JavaScript implementation is slightly different.

In Haskell, we use everything but the first element as the processing list and concatenate every element onto the accumulator.

In JavaScript, we iterate over the whole list but use the index argument which is coming from reduce to check if the current element is the first element (index 0) or not and concatenate the elements onto the accumulator.

The neutral element is an empty array.

Reverse

Reverse is a function that gets an array and returns the array in the opposite order.

Haskell implementation:

reverse' :: [a] -> [a] reverse' = foldl ( \ acc curr -> curr : acc ) [] reverse' [ 1 .. 5 ] -- [5,4,3,2,1]

JavaScript implementation:

const reverse = arr => arr . reduce (( acc , curr ) => [ curr ]. concat ( acc ), []); reverse ([ 1 , 2 , 3 , 4 , 5 ]); // [ 5, 4, 3, 2, 1 ]

We iterate over the array and concatenate the accumulator onto the current element on each iteration.

The neutral element is an empty array.

All/Any

All

All is a function that gets a function (from the element of that list to bool) and an array and returns whether every element in that array matches the condition.

Haskell implementation:

all' :: (a -> Bool ) -> [a] -> Bool all' f = foldl ( \ acc curr -> f curr && acc) True all' ( > 2 ) [ 1 .. 5 ] -- False all' ( > 0 ) [ 1 .. 5 ] -- True

JavaScript implementation:

const all = fn => arr => arr . reduce (( acc , curr ) => fn ( curr ) && acc , true ); all ( i => i > 2 )([ 1 , 2 , 3 , 4 , 5 ]); // false all ( i => i > 0 )([ 1 , 2 , 3 , 4 , 5 ]); // true

We get a function as an argument and we set the neutral element to True .

We process every element with the function and do a logical and with the accumulator.

Any

Any is a function that gets a function (from the element of that list to bool) and an array and returns whether any element in that array matches the condition.

Haskell implementation:

any' :: (a -> Bool ) -> [a] -> Bool any' f = foldl ( \ acc curr -> f curr || acc) False any' ( > 2 ) [ 1 .. 5 ] -- True any' ( > 10 ) [ 1 .. 5 ] -- False

JavaScript implementation:

const any = fn => arr => arr . reduce (( acc , curr ) => fn ( curr ) || acc , false ); any ( i => i > 2 )([ 1 , 2 , 3 , 4 , 5 ]); // true any ( i => i > 10 )([ 1 , 2 , 3 , 4 , 5 ]); // false

Similar to all but we set the neutral element to false and do a logical or with the accumulator and the processed element.

Take

Take is a function that gets a positive integer and an array and returns an array with the first elements until the list is as big as the passed integer.

Haskell implementation:

take' :: Int -> [a] -> [a] take' n = foldl ( \ acc curr -> if length acc == n then acc else acc ++ [curr]) [] take' 2 [ 1 .. 5 ] -- [1,2]

JavaScript implementation:

const take = n => arr => arr . reduce (( acc , curr ) => ( acc . length === n ? acc : acc . concat ( curr )), []); take ( 2 )([ 1 , 2 , 3 , 4 , 5 ]); // [ 1, 2 ]

The neutral element is an empty list and we check if the accumulator is of the length of the number of elements we want to receive, if so we just return the accumulator otherwise we concatenate the accumulator with the current element and return that result.

Map

Map is a function that gets a function and an array and returns an array of the same size where every element was applied to that function.

Haskell implementation:

map' :: (a -> b) -> [a] -> [b] map' f = foldl ( \ acc curr -> acc ++ [f curr]) [] map' ( * 2 ) [ 1 .. 5 ] -- [2,4,6,8,10]

JavaScript implementation:

const map = fn => arr => arr . reduce (( acc , curr ) => acc . concat ( fn ( curr )), []); map ( i => i * 2 )([ 1 , 2 , 3 , 4 , 5 ]); // [ 2, 4, 6, 8, 10 ]

We concatenate the accumulator with the result of the function we get as an argument and the current element and return that inside our processing function.

Filter

Filter is a function that gets a function (from the element of that list to bool) and an array and returns a new array with the elements of the first list matching these condition.

Haskell implementation:

filter' :: (a -> Bool ) -> [a] -> [a] filter' f xs = foldl ( \ acc curr -> if f curr then acc ++ [curr] else acc ) [] xs filter' ( < 4 ) [ 1 .. 5 ] -- [1,2,3]

JavaScript implementation:

const filter = fn => arr => arr . reduce (( acc , curr ) => ( fn ( curr ) ? acc . concat ( curr ) : acc ), []); filter ( i => i < 4 )([ 1 , 2 , 3 , 4 , 5 ]); // [ 1, 2, 3 ]

In our processing function, we check if the current element applied to the passed function is True , if so we concatenate the accumulator with the current element otherwise we only return the accumulator.

Closing

I hope you can see that fold`/ reduce` is a very powerful tool and that you can do anything on arrays with it. If we would reread the sentence from before I think it feels much clearer now:

fold`/ reduce iterates over a list( Foldable`) and operates on the current element and the already processed ones.

If you want to read more about it I would recommend these three links: