Forem: Kevin Smith 🏴󠁧󠁢󠁳󠁣󠁴󠁿

Functional Basics #3: Reduce

Kevin Smith 🏴󠁧󠁢󠁳󠁣󠁴󠁿 — Wed, 30 Oct 2019 18:02:28 +0000

Welcome back! In the third part of this mini-series on functional programming basics, I'll be taking a more in-depth look at a slightly more complex array function -reduce.

If you haven't already read it, I recommend starting with the first article in this series, Functional Basics #1: Map. I'll be building on some ideas as the series progresses.

What is it?

Let's recap on the array functions we've looked at so far:

map runs a function on each element of an array, and returns an array of the results.
filter checks each element of an array by running a predicate function on it, and returns an array with only the elements for which the predicate returns true.

So what's reduce? Well, like the name suggests:

reduce runs a function on each element of an array, and reduces the array to a single value.

Cue a simple example - we have an array of numbers, and we want to add the square of each number to get a total. Before we look at how reduce could do this, let's just implement it ourselves, in imperative style, with a for loop:

const myArray = [2, 9, 34, 22]
let total = 0

for (let i = 0; i < myArray.length; i++) {
  const num = myArray[i]
  const square = num * num
  total += square
}

// total: 1725

If you've been following this series, you know the drill here - let's refactor the calculation out of the for loop:

const myArray = [2, 9, 34, 22]
let total = 0

const addSquare = (total, num) => total + num * num

for (let i = 0; i < myArray.length; i++) {
  const num = myArray[i]
  total = addSquare(total, num)
}

// total: 1725

The addSquare function which we've extracted here is known as a reducer function. It takes the current total and the next number in the array, and returns the new total. This means that if we apply this function to every number in the array, passing in the running total each time, we'll eventually reduce the array down to a single value - the final total.

Here's how that looks using reduce:

const myArray = [2, 9, 34, 22]

const addSquare = (total, num) => total + num * num

const total = myArray.reduce(addSquare, 0)

// total: 1725

So much cleaner! There's a couple of things to note here:

The first argument to reduce is our reducer function, addSquare.
The second argument (0 in this case) is the initial value of total. This is equivalent to where we had previously used let total = 0.

Getting the right initial value is important! If we miss it out, Javascript will take the first element in the array as the initial value instead of running our reducer on it, and we'll get the wrong result:

const myArray = [2, 9, 34, 22]

const addSquare = (total, num) => total + num * num

const total = myArray.reduce(addSquare)

// total: 1723 - wrong!

A brief interlude for some terminology:

The total value, the first argument to a reducer function, is more generally known as the accumulator - it 'accumulates' the result of running the reducer on each array element. Commonly shortened to acc.

num here is referred to as the current element, shortened to cur.

Important to note that a reducer should always return the value which will be the acc for the next iteration. Therefore, the definition for ALL reducer functions should look like:

(acc, cur) => {
  // do stuff here
  return nextAccValue
}

What else can `reduce` do?

It can build anything! You can use it to generate any value - a number, a string, an object, even another array (because an array itself is a value). Here's an example to categorise words into an object by their length:

const words = ['the', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog']

const result = words.reduce((acc, cur) => {
  // If the key for this word length doesn't exist yet, make it an empty array
  if (!acc[cur.length]) {
    acc[cur.length] = []
  }
  // Add the current word to the right key for its length
  acc[cur.length].push(cur)
  return acc
}, {})

/* result:
{
  '3': [ 'the', 'fox', 'the', 'dog' ],
  '4': [ 'over', 'lazy' ],
  '5': [ 'quick', 'brown' ],
  '6': [ 'jumped' ]
}
*/

Note how this time the reducer function is passed directly to reduce as an anonymous function - this is common. Also note that the initial value is an empty object, {}. The reducer takes this empty object and builds the result by adding keys and values as it goes.

Another handy use of reduce is to avoid having to iterate over an array more times than necessary. Assume we have an array of numbers which we want to:

multiply by 4
then filter to only include numbers greater than 20
then sum the total

We could do it like this:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const times4 = num => num * 4
const greaterThan20 = num => num > 20
const sum = (acc, cur) => acc + cur

const result = nums
  .map(times4)
  .filter(greaterThan20)
  .reduce(sum, 0)

// result: 120

This looks nice and clean gives the right result, but has a problem - it loops over the array three times, once each for map, filter and reduce. This could have a noticeable impact on the performance of our code if we're processing very large arrays. Instead, we can refactor the map, filter and reduce into a single reducer which does everything required in one loop of the array:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const result = nums.reduce((acc, cur) => {
  // Multiply by 4
  const product = cur * 4
  // If not greater than 20, filter this number out by returning the acc unchanged
  if (!(product > 20)) {
    return acc
  }
  // Otherwise return the sum of the acc and the product
  return acc + product
}, 0)

// result: 120

From this we can begin to see how flexible and powerful reduce can be. Since we have replaced a map and a filter operation with a single reducer, it's apparent that we could actually write our own version of the map and filter functions using only reduce (if you're up for the challenge, give it a go and post your solution in the comments!)

Hope this has been helpful, stay tuned for more articles on functional programming soon!

If you found this article helpful, follow me! I'll be adding more articles soon. Liked it? Like it ❤️! Suggestions/improvements? Comment ⬇️! :)

Functional Basics #2: Filter

Kevin Smith 🏴󠁧󠁢󠁳󠁣󠁴󠁿 — Sun, 20 Oct 2019 17:33:15 +0000

Welcome back! In the second part of this mini-series on functional programming basics, I'll be taking a quick look at another common array function - filter.

If you haven't already read it, I recommend starting with the first article in this series, Functional Basics #1: Map. I'll be building on some ideas as the series progresses.

What is it?

Let's again start by defining what filter does: it takes an array and removes some elements, leaving only the elements that we're interested in. Okay, but how does it do that? We'll first take a look at how we'd do it in the imperative style, using for loops:

const myArray = [1, 2, 3, 4, 5]
let oddNumbers = []

for (let i = 0; i < myArray.length; i++) {
  if (myArray[i] % 2 === 1) {
    oddNumbers.push(myArray[i])
  }
}

// myArray: [1, 2, 3, 4, 5]
// oddNumbers: [1, 3, 5]

As we did with map in Part 1, we can tidy this up by extracting some of the logic from our loop - specifically, we can extract the condition of the if statement to make it clear what that condition actually means:

const isOdd = num => num % 2 === 1

const myArray = [1, 2, 3, 4, 5]
let oddNumbers = []

for (let i = 0; i < myArray.length; i++) {
  if (isOdd(myArray[i])) {
    oddNumbers.push(myArray[i])
  }
}

// isOdd(1): true
// isOdd(2): false
// myArray: [1, 2, 3, 4, 5]
// oddNumbers: [1, 3, 5]

Having extracted the logic to an isOdd function, you can now see clearly that we're checking for odd numbers in our if statement.

A function like isOdd which determines whether a value meets a certain criteria is known as a predicate function.

But we still have a for loop which is a potential opportunity to introduce bugs, and we still have to mutate our oddNumbers array by adding results to it one by one.

If we try to describe what we want in a declarative way, we could say, "take myArray and produce a new array which only contains the elements for which isOdd is true". And filter allows us to express exactly that:

const isOdd = num => num % 2 === 1

const myArray = [1, 2, 3, 4, 5]

const oddNumbers = myArray.filter(isOdd)

// myArray: [1, 2, 3, 4, 5]
// oddNumbers: [1, 3, 5]

Calling filter on an array, and passing it a predicate function, returns a new array containing the elements for which the predicate returns true.
Also note the original array is not mutated by filter - as with map, the result must be assigned to a variable or used immediately!

Also, as with map, we're not restricted to using our own functions as the predicate. We can use any function which takes one value and returns true or false. Javascript has a global function isNaN which returns true if the value passed to it is not a number, and false if it is. Let's use that to filter out numbers from an array:

const myArray = [1, 2, 'apple', 3, 'orange', 4, 'banana']

const arrayWithoutNumbers = myArray.filter(isNaN)

// myArray: [1, 2, 'apple', 3, 'orange', 4, 'banana']
// arrayWithoutNumbers: ['apple', 'orange', 'banana']

And that pretty much sums it up for filter. Again, aside from looking specifically at filter, it's important to reinforce the idea that functions are just values which can be passed to and returned from other functions, like any other value. Stay tuned for Part 3!

If you found this article helpful, follow me! I'll be adding more articles in this series soon. Liked it? Like it ❤️! Suggestions/improvements? Comment ⬇️! :)

Functional Basics #1: Map

Kevin Smith 🏴󠁧󠁢󠁳󠁣󠁴󠁿 — Mon, 14 Oct 2019 14:53:37 +0000

Welcome! This is the first of a mini-series of articles which I hope will shed a little light on 'functional' programming. It's intended for those who have a knowledge of fundamental coding techniques, and are looking for the next steps to refining their code. Sounds like you? Read on!

In the beginning...

Beginners to coding are often taught the style of coding referred to as 'imperative' style, in which code is a sequence of explicit instructions which lay out every step of the program from start to finish. This is fine, and it works, but one issue with this style is that writing each step of code explicitly can result in a lot more lines of code, and more lines of code means more potential places to introduce mistakes and bugs. Enter...

Functional Programming?

If you haven't heard this term before, don't worry, it's exactly as it sounds - it's the technique of building programs using functions as the basic building blocks, and joining those blocks together in different ways to produce the desired result. This results in a different style of code, known as 'declarative' style, in which code merely describes how a program will execute, rather than explicitly listing every instruction. This generally results in code which is more concise, and more robust.

The first technique of functional programming that many will encounter, and the subject of this article, is...

Map

So what is map? We can describe map as ‘taking an array, doing something with each element, and ending up with an array of the results’. First, let's look at how we might do that with a for loop.

In this example, we have an array of numbers and we want to double each number in the array:

let myArray = [2, 3, 4]

for (let i = 0; i < myArray.length; i++) {
  myArray[i] = myArray[i] * 2
}

// myArray: [4, 6, 8]

This works fine, but we can improve it. If we were doing a calculation more complicated than multiplying a number by 2, we might want to tidy up our for loop by moving the calculation into its own function. Let's do that by creating a double function:

const double = num => num * 2

let myArray = [2, 3, 4]

for (let i = 0; i < myArray.length; i++) {
  myArray[i] = double(myArray[i])
}

// myArray: [4, 6, 8]

This still works fine, but it has some issues. We have to introduce a variable i which only exists because we need a counter for the for loop, and if we make a mistake in the loop declaration (let i = 0; i < myArray.length; i++) we'll get the wrong answer or errors.

It would be cleaner if, instead of typing out our loop, manually accessing each element one by one and running our double function on it, we could simply say, "take this array, and run double on each element". This is what map lets us do.

Here's our previous example, with the loop replaced with map:

const double = num => num * 2

let myArray = [2, 3, 4]

myArray = myArray.map(double)

// myArray: [4, 6, 8]

That's it! Much cleaner, and no loop constructs to introduce errors. We just call map on our array and pass in the function we want it to run on each element, and we get back a new array with the results.

Note that the original array is not changed by map, it just returns a new array which we assign back to myArray. We could just as easily assign the result to a new variable, and myArray would not change:

const double = num => num * 2

const myArray = [2, 3, 4]

const myDoubledArray = myArray.map(double)

// myArray: [2, 3, 4]
// myDoubledArray: [4, 6, 8]

map does not change myArray, so the result of map must always be assigned to a variable or used immediately!

Now that we've seen how map works, let's look at some different ways to use it. Our double function takes a single value as an argument and returns a single value; this means that map can work with any function which will take a single value and return a single value - even ones we didn't write ourselves!

What if we wanted the square root of every number in an array? Javascript's Math library has Math.sqrt, which takes a number and returns its square root. Let's use that:

var myArray = [4, 9, 16];

var squareRoots = myArray.map(Math.sqrt);

// myArray: [4, 9, 16]
// squareRoots: [2, 3, 4]

When the String object is used as a function, it converts other values to strings:

const myArray = [-1, 9.3e2, false, NaN]

const stringArray = myArray.map(String)

// myArray: [-1, 9.3e2, false, NaN]
// stringArray: ['-1', '930', 'false', 'NaN']

The key takeaway of functional programming here is the idea of passing functions as arguments. We pass a function to map as an argument, and map applies that function to each element in the array.

This about wraps it up for map, hopefully I've explained how it is used and why it is preferable to explicitly writing loops.

If you found this article helpful, follow me! I'll be adding more articles in this series soon. Liked it? Like it ❤️! Suggestions/improvements? Comment ⬇️! :)

Forem: Kevin Smith 🏴󠁧󠁢󠁳󠁣󠁴󠁿

Functional Basics #3: Reduce

What is it?

What else can reduce do?

Functional Basics #2: Filter

What is it?

Functional Basics #1: Map

In the beginning...

Functional Programming?

Map

What else can `reduce` do?