
The [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) function of an `Array` is one of the most versatile functions in JavaScript. With it you can accomplish a lot of the functions from the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and [Math](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) objects. It's job is to start with an array, and reduce those elements into some other type of data... which sounds vague, but you could use it to convert from an array to an object, an array to another array, an array to a number or an array to a boolean. Understanding how it works opens up a world of possibilities.

<YouTube id="7o0KR-wAMwg" />

A few of the Math/Array functions we will cover in this article:

- [Math.min()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min)
- [Math.max()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
- [Array.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length)
- [Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- [Array.prototype.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
- [Array.prototype.every()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
- [Array.prototype.some()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
- [Array.prototype.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

## Let's Recreate Reduce

Before we see all of reduce's flexibility, let's understand how it works! Reduce's job is to iterate over each element of an array, calling a function (callback), passing both the current element, and what is called an "accumulator" value. The callback's job is to take the accumulator and the array element, and return the new version of that accmulator.

<Image
  src="/images/reduce.jpg"
  width={1703}
  height={980}
  alt="reduce explanation not found"
/>

This may mean taking an accumulator that is a number and returning its value + 1, or taking an accumulator which is an array and returning that array with an additional element on the end. It's up to you, depending what type of data you would like to _reduce_ your array to.

We also need an _initial value_, which will be the first value our accumulator takes before the callback is ever called.

```js
function reduce(array, callback, initial) {
  // start our accumulator off as the initial value
  let acc = initial;
  // iterate over each element in the array
  for (let i = 0; i < array.length; i++) {
    // pass the accumulator and current element to callback function
    // override the accumulator with the callback's response
    acc = callback(acc, array[i], i);
  }
  // return the final accumulator value
  return acc;
}

result = reduce([1, 2, 3], (acc, num) => acc + num, 0);
```

## Counting Array Length

The data we are starting with is an array of objects which represent people:

```js
const people = [
  { id: '1', name: 'Leigh', age: 35 },
  { id: '2', name: 'Jenny', age: 30 },
  { id: '3', name: 'Heather', age: 28 },
];
```

Although `people.length` would be the more performant and better solution, we can count an array's length by using reduce. Our initial value is 0, and each iteration will add 1 to the previous accumulated value.

```js
result = people.reduce((acc, person) => acc + 1, 0);
```

## Sum Numbers

We can sum numbers using reduce. Much like the length example above, we can start with 0, and instead of adding 1 upon each iteration, we can add the `person.age` property to our accumulated value.

```js
result = people.reduce((acc, person) => acc + person.age, 0);
```

## Mapping with Reduce

Yup... you can map using reduce! In this case our initial value is an empty array, and upon each iteration we can return an array with its previous value, plus the newest value added to the end of our array.

```js
result = people.reduce((acc, person) => [...acc, person.name], []);
```

## Array to Object

This is a technique I use all the time when I have an array of some object with an `id`, and I want to easily access these objects by their ID, rather than having to find them in an array each time. By having an object with each person's ID as the key, I can access them using the ID's value.

```js
result = people.reduce((acc, person) => {
  return { ...acc, [person.id]: person };
}, {});
```

## Find Max Value

The `Math.max()` function can be immitated using reduce by checking if the current element's value is greater than the accumulator. If it is, that becomes (by returning the value) the new max value, otherwise the previous accumulator (current max value) is returned.

```js
result = people.reduce((acc, person) => {
  if (acc === null || person.age > acc) return person.age;
  return acc;
}, null);
```

## Find Min Value

The `Math.min()` function can be immitated using reduce by checking if the current element's value is less than the accumulator. If it is, that becomes (by returning the value) the new min value, otherwise the previous accumulator (current min value) is returned.

```js
result = people.reduce((acc, person) => {
  if (acc === null || person.age < acc) return person.age;
  return acc;
}, null);
```

## Find Matching Element

The reduce callback function when immitating `Array.prototype.find()` contains three possibilities:

- The accumulator is not null, meaning we have already found the value, so let's return it.
- The current array element meets our criteria, so let's return it.
- By returning null we tell the next iteration that the value has not yet been found.

```js
result = people.reduce((acc, person) => {
  if (acc !== null) return acc;
  if (person.name === 'Leigh') return person;
  return null;
}, null);
```

## Check If Every Value Matches

When checking if every value matches a specific criteria, we will start with the assumption that every value will match... very optimistic!! If the accumulator becomes false, our callback will continue to return false, since every value must match, and otherwise will return `true` or `false` for the current element.

```js
result = people.reduce((acc, person) => {
  if (!acc) return false;
  return person.age > 18;
}, true);
```

## Check If Some Value Matches

Checking if some value matches a condition in our array involves a bit of pessimism. We'll start off with the assumption of `false`, and our callback function will return true as soon as the accumulator is true for the first time, and otherwise will return `true` or `false` on the current element.

```js
result = people.reduce((acc, person) => {
  if (acc) return true;
  return person.age > 18;
}, false);
```

## Group and Count Occurrences

As we've seen in the "Array to Object" example above, we can convert an array to an object, but this time we are looking to count the occurrences for a given key, in this case the `status`. Our return value will take the existing accumulated object, adding 1 for the current key's value (or initializing it to 0 if this is the first occurrence).

```js
const orders = [
  { id: '1', status: 'pending' },
  { id: '2', status: 'pending' },
  { id: '3', status: 'cancelled' },
  { id: '4', status: 'shipped' },
];

result = orders.reduce((acc, order) => {
  return { ...acc, [order.status]: (acc[order.status] || 0) + 1 };
}, {});
```

## Flatten Nested Arrays

In this last example we will start with an array of nested arrays, and reduce it into a flattened array of values. Because we will need to recursively reduce (flatten) arrays, we'll need to give our callback function a name (so it can be called within itself).

If the current element is an `Array`, it means we must reduce it until we arrive at at an element that can be appended to the end of the array we are producing. The _initial_ value of our inner reduce call is the _current_ accumulator value.

```js
const folders = [
  'index.js',
  ['flatten.js', 'map.js'],
  ['any.js', ['all.js', 'count.js']],
];

function flatten(acc, element) {
  if (Array.isArray(element)) {
    return element.reduce(flatten, acc);
  }
  return [...acc, element];
}

result = folders.reduce(flatten, []);
```


The reduce function of an array is one of the most versatile functions in JavaScript. With it you can accomplish a lot of the functions from array and math objects.

How to use Reduce in JavaScript


[SWR](https://swr.now.sh/) is a great package from [Zeit](http://zeit.co/) to help make it easier to fetch remote data with hooks. It is based on the [stale-while-revalidate](https://tools.ietf.org/html/rfc5861) RFC, which in simple terms says to show stale (old) data while you are fetching a new version of the data. The idea is that it is better to show something old if you have it rather than a blank screen.

We will show how to use SWR, how to configure it globally, and a pattern I like to use which separates data fetching from data display.

<YouTube id="MC2fKmp_xcs" />

Code is available at: [https://github.com/leighhalliday/crime-mapping](https://github.com/leighhalliday/crime-mapping)

## An SWR Fetcher

The `useSWR` hook requires two things to make it work:

```js
useSWR('/crimes/passion', fetcher);
```

- A key: This is a little vague, but think it if as something that uniquely identifies the data you want to fetch... which for a RESTful API endpoint can be the URL.
- A fetcher: This is a function who will do the work of making the actual API request. In our case we'll be using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), but you could use [axios](https://github.com/axios/axios) if you prefer. Its only requirement is that it returns a promise which resolves the data you are fetching.

The fetcher we'll be working with receives the incoming arguments (in our case the URL), passes them on to `fetch`, and then resolves the response to produce JSON.

```js
const fetcher = (...args) => fetch(...args).then((res) => res.json());
```

## Global Config Provider

Rather than having to pass the `fetcher` function, and any other config options you may want to set on every call to the `useSWR` hook, you can wrap your components with a provider called `SWRConfig`. This allows you to globally set config options to be used with every `useSWR` hook call. In our example we'll pass the fetcher function to it so it can be used globally.

```jsx
export default function App() {
  return (
    <SWRConfig value={{ fetcher }}>
      <Crimes />
    </SWRConfig>
  );
}
```

## Separating Data From Display

When working with data, be it GraphQL or data from a REST API, I like to separate out data fetching logic from display logic. We'll be doing the same here in this example, and the psuedo-code/logic looks like:

```jsx
function Crimes() {
  // fetch data
  // handle errors
  // handle loading state
  // render display component
}

function DisplayCrimes({ crimes }) {
  // only have to deal with displaying data
}
```

Separating data from display also allows you to test visual changes in isolation, useful for testing or showing how the component would look like in [Storybook](https://storybook.js.org/) without having to mock all of your API calls.

## Fetching Data

Because we are using `SWRConfig` to configure our `useSWR` hook calls globally, we don't have to worry about passing the fetcher function to this hook, we only have to worry about passing our "key" (URL to fetch the data). As a response we get an object that we can extract `{data, error}` from.

After dealing with error states and lack of data (loading state), we are now ready to pass the data onto our `DisplayCrimes` component whose job is to simply render the fetched data.

```jsx
function Crimes() {
  const url =
    'https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2019-10';
  const { data, error } = useSWR(url);

  if (error) return <div>Error...</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <DisplayCrimes
      crimes={data}
      categories={[...new Set(data.map((crime) => crime.category))]}
    />
  );
}
```

### Unique Values in JavaScript

In order to display (and filter) the crime data, I want a unique list of the crime categories. JavaScript doesn't have a way to do this out of the box like you might do `values.uniq` in Ruby. We can make our own very quickly though using a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).

```js
// find all categories
const allCategories = data.map((crime) => crime.category);
// convert all categories into a set
const categorySet = new Set(allCategories);
// convert set back to an array
const categories = [...categorySet];

// final/shortened solution
[...new Set(data.map((crime) => crime.category))];
```

## Displaying & Filtering Data

Displaying the data really has nothing to do with SWR at this point, but that is sort of the point. The display logic shouldn't really care where the data comes from, only how to display it to the user.

We will keep track of a `filterCategory` if the user wants only a subset of all the crimes, producing a filtered list of crimes using the [array filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) function.

```jsx
function DisplayCrimes({ crimes, categories }) {
  const [filterCategory, setFilterCategory] = React.useState(null);
  const filteredCrimes = filterCategory
    ? crimes.filter((crime) => crime.category === filterCategory)
    : crimes;

  return (
    <>
      {categories.map((category) => (
        <button
          onClick={() => {
            setFilterCategory(category);
          }}
          key={category}
        >
          {category}
        </button>
      ))}
      {filterCategory && (
        <button
          onClick={() => {
            setFilterCategory(null);
          }}
        >
          reset
        </button>
      )}

      <pre>{JSON.stringify(filteredCrimes, null, 2)}</pre>
    </>
  );
}
```

## Conclusion

Based on my experience with the SWR package, I think it would be my go-to approach when working with RESTful APIs in React. That said, I don't think I would switch from Apollo if my data were coming from GraphQL. Apollo provides a lot of nice utilities specific to GraphQL that you wouldn't get with SWR, which admittedly is a lower-level tool that you could build on top of.


SWR is a great package from Zeit to help make it easier to fetch remote data with hooks. It is based on the stale-while-revalidate RFC.

Faisal Tariq

Continuously learning and improving as a self-taught frontend developer

How to use Reduce in JavaScript

How Does SWR Work?