Creating Data Structures with Array.reduce()

Published:
April 27, 2023
October 12, 2023
Updated:
October 12, 2023

I recently saw an older youtube video on using array.reduce to build data structures on the fly in ways that you may find surprising or unintuitive. Normally we always think of reduce when it comes to doing math on array elements or something similar, and while that is a great use case, lets explore some of the more unique ways leverage this array method.

Create An Object From An Array

To do this you could use any old loop, but lets say you need to build an object of objects, with the properties equal to one of the objects property values, eg.

Basically we want build an object containing author objects that each contain an array of any posts they've written. A map won't do because we don't really want to return an array of course (contrived on purpose for the example) and we would like to easily aggregate them into the appropriate arrays keyed by the name. Also the specification says we should rename the date to created_at and name to title.

So how could we reduce this array to the data structure specified in a functional way and it make sense to the reader of our code?

Remember that array.reduce will return any value you want it to...aha...so we want to return an object.

This above is the function we'll use. Notice the initialValue argument. That'll set the stage for our returned value.

Let's Reduce

This is our basic setup. We'll pass acc or the accumulated value and the curr or current array element into the callback, returning an expression, which is an object literal. Our default value you may notice is an empty object.

This is our workhorse above. We'll step through each stage of working with the data. It's done in a functional way meaning we're copying data, never overwriting it.

First, we spread the value of acc into the object that we're returning

Second, we'll use the computed value to set our property name of an author

This way it ensures we're preserving any objects that don't match the computed property name in the carry. We use the toLowerCase bc the spec says it wants lowercase author names as the object property.

Third, we'll set and spread on the posts property of a computed name author object

Success

If we serialize the result and pretty print it we'd get....

Please leave me any thoughts on optimization or better ways to accomplish the given task. The primary focus of this is to get people thinking about array.reduce in interesting ways but I always enjoy learning new or better ways to do stuff.

Written by...

Software Engineer at Overflow

More to Read...