1 of 53

Week 07 and Week 08

Functional Programming

2 of 53

Functions as Parameters

Array filter - Array map - Array reduce

3 of 53

Functional Programming

Functional Programming /ˈfəNG(k)SH(ə)n(ə)l/ /ˈprōˌɡramiNG/ noun

a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data through the use of pure and idempotent functions

Pure Function /pyo͝or/ /ˈfəNG(k)SH(ə)n/ noun

a pure function is one where the return value is only determined by its input values, without observable side effects

Idempotent Function /ˌīdemˈpōt(ə)nt/ /ˈfəNG(k)SH(ə)n/ noun

an idempotent function is one that has no additional effect if it is called more than once with the same input parameters

One of the more popular paradigms of coding currently is the concept of functional programming. Functional programming has its roots in calculus, what it means for programming is essentially a focus on minimizing data mutation and so called side effects. A side effect is a change that takes place during the execution of code that is not the direct purpose of that code.

To avoid these side effects, functional programming emphasises the creation of functions that are pure and idempotent. A pure function is one where the return value is only determined by the input values and has no side effects. This makes the function completely self-contained. Pure functions are great because they are very easy to isolate and test. If the function relies entirely on its parameters and no other external state, then we can completely control the inputs and thus output during testing, giving us higher confidence in our tests.

Idempotent functions are ones that have no addition effect if called more than once with the same input.

4 of 53

Functional Programming

5 of 53

Functional Programming

6 of 53

Functional Programming - Check In

What is a pure function?
What is the primary thing that functional programming seeks to avoid?
Given the code below, is the trimLeft() function pure?
Given the code below, is the trimLeft() function idempotent?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function trimLeft(str) {

let arr = str.split('')

let i = 0

while (arr[i] === ' ') {

arr.shift()

i++

}

return arr.join('')

}

7 of 53

Array.filter( () => {} )

New Arrays by Filtering Other Arrays

8 of 53

Functional Programming

One of the places you see functional programming in JavaScript is with the higher order function, filter(). A higher order function is one that receives another function as a parameter. The filter() function is called on an array and takes a function as its parameter. It will cycle through the array for you, for each item it will call the function you have provided and pass to that function, the current item of the array.

The function passed to filter() must be a predicate function, that is, it must return true or false. For each item of the array, filter() will call the predicate function, pass in the item, and inspect the returned value. If the return is true, filter will place the item in a new array. If it is false, it will skip that item. Once filter() has gone through all of the items in the original array, it will return the new array containing only the elements for which the predicate returned true.

Note that filter() will always return a new array and that this new array will contain either some, all, or none of the items from the original array. The filter() function will never alter the items, it is merely deciding whether or not to include them.

MDN JavaScript Array filter Documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

9 of 53

Functional Programming

10 of 53

Functional Programming

11 of 53

Functional Programming

12 of 53

Filter with Array.filter()

13 of 53

Filter with Array.filter()

14 of 53

Filter with Array.filter()

A common pattern you will see with higher order functions is defining an anonymous function and passing it in at the same time. As we see here we can take the body of the isOdd() function and simply drop it into our filter() call. This will case JavaScript to first define the function and then pass it into filter() to be used as the predicate. Because we are defining it in this context it will not be available to be called by any other code, it will only exist for this instance of filter(). Since it can't be called anywhere else, it doesn't need a name, so we can use an anonymous function here. When using this pattern you will almost always see the ES6 fat arrow syntax used. We've seen this pattern in our tests already.

Code File (index.js)

function ourFilter(arr, func) {

let newArr = []

for (let i = 0; i < arr.length; i++) {

if(func(arr[i])) {

newArr.push(arr[i)

}

return newArr

}

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

const retVal = arr.filter(function (n) {

return n % 2 === 1

})

console.log(retVal)

console.log(arr)

15 of 53

Functional Programming

16 of 53

Functional Programming

17 of 53

Check In

What is a predicate function?
What is a higher order function?
Given the code below, what will be the value stored in retVal?
After the code below runs, what will be the value stored in values?

1

2

3

4

5

6

7

8

9

function isNumeric(n) {

return !isNaN(n)

}

const values = [1, '2', 'a', NaN, null]

const retVal = values.filter(isNumeric)

18 of 53

Array `map`

Mapping Over an Array

19 of 53

Array.map( () => {} )

20 of 53

Array.map( () => {} )

21 of 53

Array.map( () => {} )

22 of 53

Array.map( () => {} )

23 of 53

Array.map( () => {} )

24 of 53

Array.map( () => {} )

25 of 53

Array.map( () => {} )

26 of 53

Array.map( () => {} )

27 of 53

Array.map( () => {} )

28 of 53

Check In

What is a higher order function?
What is an idempotent function?
Given the code below, what will be the value stored in retVal?
After the code below runs, what will be the value stored in values?

1

2

3

4

5

6

7

8

9

function halve(n) {

return n / 1

}

const values = [2, 4, 6, 8]

const retVal = values.map(halve)

29 of 53

Hands On

Calculating the subtotal of each item. This exercise will be completed in class.

Create a new branch named answer to do your work in
Run npm install to have all dependencies installed and then run npm test to see the failing tests
Use what you have learned about functional programming to implement the calculateSubTotals() function to make the tests pass
Commit your changes, push your branch up to GitHub, and create a pull request
Request review from the instructor on your PR

30 of 53

Array.reduce( () => {} )

A Single Value from an Array

31 of 53

Array.reduce( () => {} )

Let's explore the reduce() higher order function. This one has some similarities with map() and filter() but with one major difference. As we'd expect, reduce() is called on an array, is passed a function and iterates over the array calling the function and passing in each item. Where it differs is that reduce() is not building a new array, but rather a single value. To do this, we also pass in an initial value along with our function that reduce() uses to start the process off. This value is referred to as an accumulator since it is accumulating information as it is passed in with each item.

The function passed to reduce() will take two parameters. The first will be the current value of the accumulator and the second is the current item of the array. The return value of this function becomes the new accumulator value. This is why we need an initial value, it is passed in with the first item in the array and the return value from this call will be passed in as the accumulator with the second item of the array and so on down the line. When we're done iterating over the array the final value of the accumulator is what reduce returns.

MDN JavaScript Array reduce Documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

32 of 53

Array.reduce( () => {} )

Let's implement ourReduce() so we can see exactly what is happening. We'll start with a sum() function that will take two numbers and return their sum. In ourReduce() we will take in our array and function as we've seen before but this time we'll include the initial value of the accumulator, in this case we'll start with 0.

We're going to loop over our array and call the sum() function passing in the current accumulator and the current item of the array. We will then assign the return value to the accumulator. This means as we loop over the array, the accumulator will continue to hold the summation of all the numbers we see. Once we've visited the whole array, we return the final value of the accumulator.

Code File (index.js)

function sum(acc, n) {

return acc + n

}

function ourReduce(arr, func, acc) {

for(let i = 0; i < arr.length; i++) {

acc = func(acc, arr[i])

}

return acc

}

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

const retVal = ourReduce(arr, sum, 0)

console.log(retVal)

console.log(arr)

33 of 53

Array.reduce( () => {} )

34 of 53

Array.reduce( () => {} )

35 of 53

Array.reduce( () => {} )

36 of 53

Array.reduce( () => {} )

37 of 53

Check In

What is a pure function?
What is an idempotent function?
What is a higher order function?
What is the primary thing that functional programming seeks to avoid?

38 of 53

Chaining

Less Array Code with Chaining

39 of 53

Less Code by Chaining

40 of 53

Less Code by Chaining

41 of 53

Less Code by Chaining

42 of 53

Less Code by Chaining

43 of 53

Less Code by Chaining

Now with these three functions in hand we can start with an array of items and very quickly arrive at the order total for the user. We start by filter() and hasQuantity() to get only the items with a quantity to speed up our other operations. We then use map() and calculateItemTotal() to make sure every item has a total attribute that is properly calculated. Finally we use reduce(), an initial value of 0, and sumItem() to calculate the orderTotal of all items combined.

This chaining works because of the return values. The filter() call returns an array of items which we immediately call map(). Since map() also returns an array of items we can immediately call reduce() on it. This pattern allows us to write concise and readable code that does a complicated set of steps while keeping those steps atomic and easily tested in isolation.

Code File (index.js)

const items = [{

id: 1, name: 'iPhone Charger', price: 19.95, discount: .12, quantity: 2,

}, {

id: 2, name: 'Video Adapter', price: 12.95, discount: .10, quantity: 1,

}, {

id: 3, name: 'MacBook Charger', price: 51.95, discount: 0, quantity: 0,

}]

function hasQuantity(item) {

return item.quantity > 0

}

function calculateItemTotal(item) {

const unformattedTotal = item.price * (1 - item.discount) * item.quantity

const total = parseInt(unformattedTotal * 100) / 100

return { ...item, total }

}

function sumItem(acc, item) {

return acc + item.total

}

const orderTotal = items.filter(hasQuantity).map(calculateItemTotal).reduce(sumItem, 0)

console.log(orderTotal)

44 of 53

Less Code by Chaining

Another cool pattern you often see with higher order functions is function reuse. Let's take a list of people, the chores they completed, and how long was spent on the chores. We want to use what we've learned map(), filter(), and reduce(), to create a minutesSpentByPerson() function that will allow us to get the total number of minutes an individual spent doing chores. This function will take our list of objects and the person for whom we want the total minutes. We can chain together filter(), map(), and reduce() to arrive at this answer pretty easily.

Code File (index.js)

const chores = [

{ name: 'Erase blackboard', doneBy: 'Jamal', minutes: 6 },

{ name: 'Take the trash out', doneBy: 'Ashley', minutes: 3 },

{ name: 'Sweep up', doneBy: 'Casey', minutes: 14 },

{ name: 'Feed the guinea pig', doneBy: 'Jamal', minutes: 8 },

]

function minutesSpentByPerson(chores, person) {

return chores

.filter((chore) => chore.doneBy === person)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

const total = minutesSpentByPerson(chores,'Jamal')

console.log(total)

45 of 53

Less Code by Chaining

Now let's create for ourselves a minutesSpentByChore() function. This function will take an array of objects and the name of a chore, returning the total minutes everyone spent on that chore. This will be a very easy function to write since it will behave almost identically to minutesSpentByPerson().

Code File (index.js)

const chores = [

{ name: 'Erase blackboard', doneBy: 'Jamal', minutes: 6 },

{ name: 'Take the trash out', doneBy: 'Ashley', minutes: 3 },

{ name: 'Sweep up', doneBy: 'Casey', minutes: 14 },

{ name: 'Feed the guinea pig', doneBy: 'Jamal', minutes: 8 },

]

function minutesSpentByPerson(chores, person) {

return chores

.filter((chore) => chore.doneBy === person)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

function minutesSpentByChore(chores, name) {

return chores

.filter((chore) => chore.name === name)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

console.log(minutesSpentByPerson(chores,'Jamal'))

console.log(minutesSpentByChore(chores,'Take the trash out'))

46 of 53

Less Code by Chaining

These are great functions but we do have a problem here. In programming we advocate for DRY code, that is Don’t Repeat Yourself. As we can see here, the bodies of minutesSpentByPerson() and minutesSpentByChore() are almost identical. This isn't very DRY. Let's go ahead and DRY these up by creating an underlying function that they rely on.

As we can see, the only difference between these two functions is the predicate being used in the filter(). Let's take advantage of our higher order function pattern here to extract out the body of these functions into a minutesSpent() function which will work for either function. We can do this by assuming we will be passed the appropriate predicate function.

Code File (index.js)

const chores = [

{ name: 'Erase blackboard', doneBy: 'Jamal', minutes: 6 },

{ name: 'Take the trash out', doneBy: 'Ashley', minutes: 3 },

{ name: 'Sweep up', doneBy: 'Casey', minutes: 14 },

{ name: 'Feed the guinea pig', doneBy: 'Jamal', minutes: 8 },

]

function minutesSpent(chores, predicate) {

return chores

.filter(predicate)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

function minutesSpentByPerson(chores, person) {

return chores

.filter((chore) => chore.doneBy === person)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

function minutesSpentByChore(chores, name) {

return chores

.filter((chore) => chore.name === name)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

console.log(minutesSpentByPerson(chores,'Jamal'))

console.log(minutesSpentByChore(chores,'Take the trash out'))

47 of 53

Less Code by Chaining

Now with minutesSpent() available to us, both minutesSpentByChore() and minutesSpentByPerson() are simply calls to minutesSpent(), passing it the predicate function needed for that particular implementation. This leaves us with a much cleaner and more maintainable code base.

Code File (index.js)

const chores = [

{ name: 'Erase blackboard', doneBy: 'Jamal', minutes: 6 },

{ name: 'Take the trash out', doneBy: 'Ashley', minutes: 3 },

{ name: 'Sweep up', doneBy: 'Casey', minutes: 14 },

{ name: 'Feed the guinea pig', doneBy: 'Jamal', minutes: 8 },

]

function minutesSpent(chores, predicate) {

return chores

.filter(predicate)

.map((chore) => chore.minutes)

.reduce((total, minutes) => total + minutes, 0)

}

function minutesSpentByPerson(chores, person) {

return minutesSpent(chores, (chore) => chore.doneBy === person)

}

function minutesSpentByChore(chores, name) {

return minutesSpent(chores, (chore) => chore.name === name)

}

console.log(minutesSpentByPerson(chores,'Jamal'))

console.log(minutesSpentByChore(chores,'Take the trash out'))

48 of 53

Hands On

Calculating the class average by assignment. This exercise will be completed in class.

If you are a driver, create a new repo named head-of-the-class in GitHub and make your instructor and your navigator a collaborator
Once your instructor has pushed you code, clone your repo locally
Create a new branch named answer to do your work in
Run npm install to have all dependencies installed and then run npm test to see the failing tests
Use what you have learned about functional programming to implement the calculateAverageByAssignment() function to make the tests pass
Commit your changes, push your branch up to GitHub, and create a pull request
Request review from the instructor on your PR

49 of 53

Homework

Using functional programming create a lineup validation function

Create a new repo named perfect-lineup in GitHub and make your instructor a collaborator
Once your instructor has pushed you code, clone your repo locally
Create a new branch named answer to do your work in
Use what you have learned about functional programming to implement the validateLineup() function according to the rules provided
Commit your changes, push your branch up to GitHub, and create a pull request
Request review from the instructor on your PR

50 of 53

Resources

51 of 53

Vocabulary

Functional Programming: a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data through the use of pure and idempotent functions
Pure Function: a function where the return value is only determined by its input values, without observable side effects
Idempotent Function: a function that has no additional effect if it is called more than once with the same input parameters
Higher Order Function: a function that takes another function as a parameter
Filter Function: a higher order function that filters an array of values by a predicate function. If the predicate function returns true, the value passes through the filter. If it returns false, the value is filtered out of the array.

52 of 53

Vocabulary

Anonymous Function: In Javascript, an anonymous function is one declared without a named function identifier, using the syntax (arguments) => function body
Fat arrow: refers to this: => syntax used in anonymous functions
Find function: a higher order function that finds a value from an array according to a predicate function. The function returns the first value in the array for which the predicate returns true.
Map function: a higher order function that applies the function passed to it to each value in an array, and returns a new array of the transformed values.
Function Chaining: calling a function immediately on the return value of a different function

53 of 53

Vocabulary

Reduce Function: a higher order function that takes an array, an inner function, and optionally a starting “accumulator” value. The inner function takes the current accumulator value (or undefined) and the next array value (starting with the first item in the array). The return value of this function becomes the next accumulator value.
DRY: Don’t Repeat Yourself. A rule of thumb for writing clean and maintainable code