Functional JavaScript — Functional Programming and Arrays
Tags: webdev, programming, javascript, functional
Published: 2021-01-25 01:33:41

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


JavaScript is partly a functional language.

To learn JavaScript, we got to learn the functional parts of JavaScript.

In this article, we’ll look at how to create our own array methods.

### Working Functionally on Arrays

Array functions are useful for manipulating arrays.

There are many built-in array methods like `map` and `forEach` .

Many of them take callbacks which let us do something with the array entries.

### map

The `map` method lets us convert array entries from one thing to another.

To implement it, we can loop through each entry and call a function that we pass in.

The function’s returned value will be pushed into a new array and returned.

For example, we can write:

```
const map = (array, fn) => {
  const results = []
  for (const a of array) {
    results.push(fn(a));
  }
  return results;
}
```

The `map` function takes an `array` and `fn` function.

We use the for…of loop to loop through the entries.

`fn` is used to map a value from one to another value.

Then we push the returned item in the `results` .

And we return the `results` array.

Then we can use it by writing:

```
const arr = map([1, 2, 3], (x) => x ** 3);
```

Then `arr` is:

```
[1, 8, 27]
```

### filter

We can implement our own `filter` function which lets us return a new array with entries that meets a given condition.

The condition is in the callback.

For example, we can write:

```
const filter = (array, fn) => {
 let results = [];
  for (const a of array) {
    if (fn(a)) {
      results.push(a)
    }
  }
  return results;
}
```

We loop through the array with a for…of loop.

Then we check with the `fn` function with the argument `a` whether it returns `true` or not.

If it returns `true` , then we push the item `a` into `results` .

Once we looped through all the items, we return `results` .

Then we can use it by writing:

```
const arr = filter([1, 2, 3], a => a % 2 === 1);
```

Then we get:

```
[1, 3]
```

as the value of `arr` .

### Chaining Operations

We can chain the 2 operations since they’re both pure functions.

For instance, we can filter our items and then map them to the values of our choice:

```
const map = (array, fn) => {
  const results = []
  for (const a of array) {
    results.push(fn(a));
  }
  return results;
}

const filter = (array, fn) => {
  let results = [];
  for (const a of array) {
    if (fn(a)) {
      results.push(a)
    }
  }
  return results;
}

const arr = map(filter([1, 2, 3], a => a % 2 === 1), a => a ** 3);
```

We first called the `filtet` function to return an array of odd numbers.

Then we cube all the odd numbers and return the array of cubed odd numbers.

So `arr` is:

```
[1, 27]
```

We can rewrite that in a cleaner way by writing:

```
const odd = filter([1, 2, 3], a => a % 2 === 1);
const arr = map(odd, a => a ** 3);
```

### Conclusion

We can create our own `map` and `filter` functions to map array entries and return a filtered array.