Adventures in Javascript pt.2
Tags: filters, javascript, composing, functional
Published: 2017-10-01 11:07:34

---
title: "Adventures in Javascript pt.2"
published: true
tags: filters,javascript,composing,functional
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/888/1*2kLbv7LDPIw0dq7cRnR4Kg.png)

Well, as [last week’s article](https://dev.to/triplejdev/adventures-in-javascript-pt1) was such a success (thanks for all the likes and retweets, by the way), I thought I should continue where it left&nbsp;off!

So, last time, we talked about map, filter and reduce, how they work and what they look like behind the&nbsp;scenes.

This time, we will talk about **composing** those functions, or **chaining** them together.

Again, we will look at how this looks done with our hand-made functions to get a feel for it, then do it with the “real JS functions.

Short and sweet. Nice. Let’s crack&nbsp;on.

We had an&nbsp;array:

```
let nums = [1,2,3,4,5,6,7,8,9];
```

Using our last functions, we will map over it, adding one to each, filter it down to numbers over 5, then reduce what is left down to a total of these values. Expecting a total of 40. I think… (quick maths, u&nbsp;know).

![](https://cdn-images-1.medium.com/max/571/1*AgQYwKPN_IkoMcNUuJVjmQ.png)<figcaption>Man’s notÂ hot</figcaption>

Here goes:

```
let ourMapResults = map(nums, addOne);
// [2, 3, 4, 5, 6, 7, 8, 9, 10]

let ourFilterResults = filter(ourMapResults, moreThanFive);
// [6, 7, 8, 9, 10]

let ourReduceResults = reduce(0, ourFilterResults);
// 40
```

Hurrah, and indeed,&nbsp;HUZZAH.

![](https://cdn-images-1.medium.com/max/312/1*ehHnVThWqH1kGs5upYtGvQ.jpeg)<figcaption>So, soÂ happy</figcaption>

And, as expected, this works fine. It’s fairly&nbsp;simple.

“So, what’s the beef&nbsp;? you may find yourself asking (you do,&nbsp;right?).

Firstly, you are creating all of these new variables just for the sake of being able to pass them to the next function in the chain. They won’t be used again, they won’t fulfil their life goal as variables. Or something. You wouldn’t want that for your variables, would&nbsp;you?

Also, each item in the chain is doing **just one thing.** It is easy to keep track of what is going&nbsp;on.

Also, this is a VERY simple example. These chains can go on for a very long time and can get vey complicated. You would have extra variables everywhere, your code base would be (probably) a lot bigger, less maintainable and a lot less&nbsp;clear.

There are probably lots more reasons it is better, but look - it’s a Sunday morning. Stop picking on&nbsp;me!

Anyway - now, let’s do than the “real”&nbsp;way:

```
let reduceResults = nums.map(addOne)
  .filter(n => n > 5)
  .reduce((sum, num) => sum + num, 0)
// 40
```

![](https://cdn-images-1.medium.com/max/640/1*tk06nEalW_g3TbQlNODQJA.png)<figcaption>Great success</figcaption>

Something to watch out for in&nbsp;this:

```
let reduceResults = nums.map(addOne)
  .filter(n => n > 5)
  .reduce((sum, num) => sum + num, 0)
```

is the values being used. Firstly, this looks quite&nbsp;strange:

```
let reduceResults = nums.map(addOne)
```

addOne doesn’t have anything passed in to it. Really, this is&nbsp;just:

```
let reduceResults = nums.map(eachNumber => addOne(eachNumber))
```

map walks through the array and passes each value to the function given (remember, it is just a for&nbsp;loop).

Each function after it is taking the result of the previous one in the chain and bringing it&nbsp;in:

```
// n = nums.map(addOne)

.filter(n => n > 5)

/*
* It is worth noting here that the name of n can be anything. It is
* generally shortened as much as possible, but this is where it is
* made, you can call it what you want!
*/

.filter(numberOfMagicBeans => numberOfMagicBeans > 5)
```

Just as an aside, some of you may be familiar with PHP and its dot concatenation (I’m thinking of you here,&nbsp;Bert):

```
“this .  is , “a . “string”
```

It may help to think of chaining functions to work in a similar&nbsp;way:

```
"nums.map(addOne)" . "filter(n => n > 5)" . "reduce((sum, num) => sum + num, 0)"
```

All you are really doing with the dot is accessing the methods stored on the JS [array prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) object, over and over again. Remember:

```
nums.map(addOne) 
// nums is an array (array.prototype.map)

thatNewArray.filter(n => n > 5) 
// (array.prototype.filter)

newerArray.reduce((sum, num) => sum + num, 0) 
// (array.prototype.reduce)
```

Also, don’t let the ES6 arrow functions confuse&nbsp;you.

They make chains like this easier to read, but watch out for the [way they bind to this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) if you have any OO-ish&nbsp;code.

Really, all we are saying&nbsp;is,

```
nums.filter(function (number) { 
    return number > 5;
}
```

The filter might look a bit tricksy because of all the equals signs and angle brackets (especially if we were checking for \>= instead of just&nbsp;\>)!

So, there we go. Nice, pretty composed functions.

As before, you can try this in your own terminalâ€Š–â€Šcopy and paste, it should work the same&nbsp;way.

If you have any questions, drop me a&nbsp;line.

Maybe there will be more (if I can think of a&nbsp;topic…).

![](https://cdn-images-1.medium.com/max/420/1*M4q-Tm9RCI1oXuXprPyHCQ.png)