JS: Pure Functions

Learning Goals

• Speak to what makes a function pure and the benefits it can offer
• Understand what side effects are and why it’s important to avoid them
• Practice transforming impure functions into more pure and predictable functions

Vocab

• Pure Function A function that has no side effects.
• Side Effect It is a state change that can be seen outside of a function call. (such as changing a variable outside of a function’s scope)

What is a pure function?

Over the last few weeks, you’ve begun writing multiple functions that complete various tasks and utilize parameters & arguments in different ways. These tasks can include generating a random number, returning a new object, manipulating data, or making an update to the DOM.

A pure function is a function that is predictable and always returns the same results or output when given the same input. It is very likely that you have already written some pure functions in past projects. Let’s take a look at an example:

var userEmail = "jeremiah@turing.io";

function confirmEmail() {
  return `Your email address is currently ${userEmail}`;
}

confirmEmail();  // "Your email address is currently jeremiah@turing.io"

userEmail = "jeremiah@turing.edu";
confirmEmail(); // "Your email address is currently jeremiah@turing.edu"

function confirmEmail(userEmail) {
  return `Your email address is currently ${userEmail}`;
}

confirmEmail("jeremiah@turing.io") // "Your email address is currently jeremiah@turing.io"

confirmEmail("jeremiah@turing.edu") // "Your email address is currently jeremiah@turing.edu"

Side Effects! What are they?

Another way of describing a pure function is that it’s a function that has no side effects. In other words, it does not make any updates to the outside world. What do we mean by the outside world though? This can involve anything outside of the function’s scope such as making an update to a global variable like in the previous example. Let’s look at another example of a side effect:

var totalSpent = 100;

function addCost(cost) {
  totalSpent += cost
}

addCost(20)

Take note of the global variable that is keeping track of how much a user has spent. Can you tell if this function is pure or not? Experiment running this code in the console and then log the totalSpent variable. Did the value change? Note that there are actually TWO side effects here:

1. Our addCost function is dependant on totalSpent in order to successfully perform it’s task. addCost will return an error if for some reason totalSpent was no longer available. It is not completely dependant on it’s input.
2. The second side effect is that addCost is programmed to mutate the totalSpent variable. It is making an “update to the outside world.”

Getting More Practice

Let’s look at a few more examples. In breakout groups, you will look at the next 3 exercises and determine if the function is pure or impure. If the function is impure, pseudocode it out so that the function is pure!

function determineSum(num1, num2) {
  return num1 + num2;
}

determineSum(2, 5) // 7
determineSum(-1, 4) // 3

var friendsList = ["Jeremiah Black", "Robbie Jaeger"];

function addFriend(newFriend) {
  friendsList.push(newFriend);
  return friendList;
}

addFriend("Kayla Gordon");
// ["Jeremiah Black", "Robbie Jaeger", "Kayla Gordon"]

addFriend("Travis Rollins");
// ["Jeremiah Black", "Robbie Jaeger", "Kayla Gordon", "Travis Rollins"]

var order = { restaurant: "Dominos", status: "delayed", remainingTime: 30 };

function updateOrder(status, newWaitTime) {
    order.status = status;
    order.remainingTime = newWaitTime;
    return "Delivery has been updated!";
}

updateOrder('on time', 15); // Delivery has been updated!
console.log(order); // { restaurant: "Dominos", status: 'on time", remainingTime: 15 }