Identify Side Effects by Comparing Pure and Impure JavaScript Functions

Instructor: [00:00] A pure function is a function that derives its output solely from its inputs, and causes no side effects in the application or outside world. The most common pure functions people have encountered are mathematical functions.

[00:12] You might recall seeing a function that looks something like this. This is a function that receives one value, X, and derives its output from that value, in this case x+1. We can write this in JavaScript as this.

[00:25] It's pretty easy to reason that this is a pure function. We get the same output given the same input, and there's no outside world for us to cause a side effect in. To understand this further, let's compare this with several impure functions.

[00:37] The first impure function we're going to make is one whose output is not solely derived from its inputs. For example, let's consider you're making a cart total function. For one reason or another, you've decided that one of the prices needs to be a global constant. Our cart total function takes a quantity and multiplies that against this constant.

[00:56] On the surface, this will seem like a pure function, because we always get the same output based on the same input. We can see this by calling it multiple times with the same value and logging it out to the terminal. In both cases, we get 38.

[01:09] While we're getting the same result, this is an impure function, because the state of our application has an effect on the output of our function. We can see this by changing the value of cost of item and outputting that to the terminal.

[01:21] I'm going to comment these out, so they don't continue to log out in the terminal throughout the rest of the exercise.

[01:27] Our second example of an impure function is one that gets the same input and gives us different outputs. Oftentimes in our applications, we'll need to create objects that have unique identifiers, such as IDs.

[01:39] Let's create a generate ID function. This function will return several integers randomly. We can see that this itself is an impure function. We can call it several times and we'll get a different result each time.

[01:53] Let's use our impure generate ID function inside of a factory function to create user objects for us. To create a user, we'll take a name and an age, and we'll return an object with an ID using the generate ID function to create it, and just return the name and age.

[02:12] Let's call this several times, giving it the same inputs. In this case, I'll use my own name, Kyle, and my own age, 33. We'll save it and print it to the terminal. We'll see that we get similar objects, but they're not the same. The ID is different in each one.

[02:29] The impurity of the generate ID function makes our factory function impure as well. The way to fix this is to move the impure function outside of the factory and call it somewhere where we're expecting the side effect to happen, and pass the ID as a parameter into our create user factory.

[02:48] Again, I'm going to comment out this code so we don't see it repeated in the terminal as the lesson continues.

[02:55] Our third example is a function that creates a side effect within our application. Similar to our global state example, we can create functions that mutate the state of our application, thus causing a side effect.

[03:09] Let's say we're keeping track of a mutable value, in this case ID, in our application. If we then create a function that mutates this value, we have an impure function. Let's say, for example, you're creating an application that involves food items, and we make a factory function called create food item.

[03:27] If we generate our ID for that object by mutating the global ID value, this is an impure function. We can call this function. We'll do it several times with different food items. We'll see that the ID increments like we expect, but if we also log out the ID value itself, it has been mutated and is a different value.

[03:49] Once more, commenting out these logs, so that they don't continue to show up in the terminal throughout the lesson.

[03:55] Let's make our final impure function example. That would be a side effect of the outside world. Believe it or not, I've been using an impure function this entire time to teach you this concept. Console.log is an impure function, because it creates a side effect in the outside world.

[04:11] Every time I use console.log, it affects the terminal. That's a side effect. If I have any function that uses console.log in it, such as a logger function that takes a message and outputs it, that's an impure function as well, even if it's just a nice message to say, "Hi, eggheads."