Map, Filter, Reduce vs For Loops (syntax)
Tags: javascript, functional
Published: 2018-11-21 04:13:30

---
title: Map, Filter, Reduce vs For Loops (syntax)
published: true
description: 
tags: javascript, functional
---

The intention of this post is not to say one paradigm is better than the other. It is just to show common imperative patterns you run into and their functional equivalents.

Sometimes things are easier to learn if you can relate it to something you are already familiar with and be given a map on how to transition back and forth.

Previously, I had done something similar at [Functional vs Imperative Patterns in JavaScript](https://dev.to/joelnet/functional-vs-imperative-patterns-in-javascript-505h)

# Map

`map` takes a list and runs a function on each item in the list, returning the same length list.

**Imperative**

```javascript
const double = x => x * 2
const input = [ 1, 2, 3 ]
const output = []
for (let i = 0; i < input.length; i++) {
  output.push(double(input[i]))
}

output //=> [ 2, 4, 6 ]
```

**Functional**

```javascript
const double = x => x * 2
const input = [ 1, 2, 3 ]
const output = input.map(double)

output //=> [ 2, 4, 6 ]
```

# Filter

`filter` takes a list and returns a list containing all items that match the predicate. In this example `isEven` is the predicate.

**Imperative**

```javascript
const isEven = x => x % 2 === 0
const input = [ 1, 2, 3, 4, 5 ]
const output = []
for (let i = 0; i < input.length; i++) {
  if (isEven(input[i])) {
    output.push(input[i])
  }
}

output //=> [ 2, 4, 6 ]
```

**Functional**

```javascript
const isEven = x => x % 2 === 0
const input = [ 1, 2, 3, 4, 5 ]
const output = input.filter(isEven)

output //=> [ 2, 4, 6 ]
```

# Reduce

`reduce` takes a list and returns any data structure. It could be another list or an object.

## Simple

**Imperative**

```javascript
const add = (x, y) => x + y
const input = [ 1, 2, 3 ]
const initial = 0
let output = initial
for (let i = 0; i < input.length; i++) {
  output = add(output, input[i])
}

output //=> 6
```

**Functional**

```javascript
const add = (x, y) => x + y
const input = [ 1, 2, 3 ]
const initial = 0
const output = input.reduce(add, initial)

output //=> 6
```

## Complex

**Imperative**

```javascript
const isEven = x => x % 2 === 0
const double = x => x * 2
const input = [ 1, 2, 3, 4, 5 ]
const initial = []

let output = initial
for (let i = 0; i < input.length; i++) {
  if (isEven(input[i])) {
    output.push(double(input[i]))
  }
}

output //=> [ 4, 8 ]
```

**Functional**

It could be written like (below) but know that it will iterate over the Array twice.

```javascript
const isEven = x => x % 2 === 0
const double = x => x * 2
const input = [ 1, 2, 3, 4, 5 ]
const initial = []

let output =
  input
    .filter(isEven)
    .map(double)

output //=> [ 4, 8 ]
```

Alternatively, you can create a reducer that can both `filter` and `map` in a single iteration.

```javascript
const isEven = x => x % 2 === 0
const double = x => x * 2
const input = [ 1, 2, 3, 4, 5 ]
const initial = []

const reducer = (filter, map) => (acc, x) => {
  if (filter(x)) {
    acc.push(map(x))
  }
  return acc
}

const output = input.reduce(reducer(isEven, double), initial)

output //=> [ 4, 8 ]
```

# End

I'm currently available for part time contract work (C#, JavaScript, React). Hit me up on [Twitter](https://twitter.com/joelnet) or [linkedin](https://www.linkedin.com/in/joel-thoms) to get ahold of me.

My articles are very Functional JavaScript heavy, if you need more FP, follow me here, or on Twitter [@joelnet](https://twitter.com/joelnet)!

**More articles**
[Deconstructing Map, Filter, and Reduce](https://dev.to/joelnet/deconstructing-map-filter-and-reduce-1d1a)
[Ask me dumb questions about functional programming](https://dev.to/joelnet/ask-me-dumb-questions-about-functional-programming-bho)
[Let's make a DEV.to CLI... together](https://dev.to/joelnet/lets-make-a-devto-cli-together-4eh1)
[Let's talk about auto-generated documentation tools for JavaScript](https://dev.to/joelnet/lets-talk-about-auto-generated-documentation-tools-for-javascript-49ol)

![Cheers!](https://thepracticaldev.s3.amazonaws.com/i/6jsy3a866frzp3u5oda0.jpg)