Adding Dynamic and Async Functionality to JAMstack Sites

24ways.org 24ways.org3 years ago in #Dev Love263

Of all the modern array methods, the one I had the hardest time wrapping my head around was Array.reduce(). On the surface, it seems like a simple, boring method that doesn’t do much. But below its humble exterior, Array.reduce() is actually a powerful, flexible addition to your developer toolkit. Today, we’re going to look at some cool things you can do with Array.reduce(). How Array.reduce() works Most of the modern array methods return a new array. The Array.reduce() method is a bit more flexible. It can return anything. Its purpose is to take an array and condense its content into a single value. That value can be a number, a string, or even an object or new array. That’s the part that’s always tripped me up – I didn’t realize just how flexible it is! The syntax The Array.reduce() accepts two arguments: a callback method to run against each item in the array, and a starting value. The callback also accepts two arguments: the accumulator, which is the current combined value, and the current item in the loop. Whatever you return is used as the accumulator for the next item in the loop. On the very first loop, that starting value is used instead. var myNewArray = [].reduce(function (accumulator, current) { return accumulator; }, starting); Let’s look at some examples to make this all tangible. 1. Adding numbers together Let’s say you had an array of numbers that you wanted to add together. Using Array.forEach(), you might do something like this: var total = 0; [1, 2, 3].forEach(function (num) { total += num; }); This is the cliche example for using Array.reduce(). I find the word accumulator confusing, so in this example, I’m calling it sum, because that’s what it is. var total = [1, 2, 3].reduce(function (sum, current) { return sum + current; }, 0); Here, we pass in 0 as our starting value. In the callback, we add the current value to the sum, which has our starting value of 0 on the first loop, then 1 (the starting value of 0 plus the item value of 1), then 3 (the sum value of 1 plus the item value of 2), and so on. Here’s a demo. 2. Combining multiple array methods into Array.map() and Array.filter() into a single step Imagine you had an array of wizards at Hogwarts. var wizards = [ { name: ‘Harry Potter’, house: ‘Gryfindor’ }, { name: ‘Cedric Diggory’, house: ‘Hufflepuff’ }, { name: ‘Tonks’, house: ‘Hufflepuff’ }, { name: ‘Ronald Weasley’, house: ‘Gryfindor’ }, { name: ‘Hermione Granger’, house: ‘Gryfindor’ } ]; You want to create a new array that contains just the names of wizards who are in Hufflepuff. One way you could do that is by using the Array.filter() method to get back just wizards whose house property is Hufflepuff. Then, you’d use the Array.map() method to create a new array containing just the name property for the remaining wizards. // Get the names of the wizards in Hufflepuff var hufflepuff = wizards.filter(function (wizard) { return wizard.house === ‘Hufflepuff’; }).map(function (wizard) { return wizard.name; }); With the Array.reduce() method, we can get the same array in a single pass, improving our performance. You pass in an empty array ([]) as the starting value. On each pass, you check to see if the wizard.house is Hufflepuff. If it is, you push it to the newArr (our accumulator in this example). If not, you do nothing. Either way, you return the newArr to become the accumulator on the next pass. // Get the names of the wizards in Hufflepuff var hufflepuff =…

Like to keep reading?

This article first appeared on 24ways.org. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply