This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Learn to take advantage of them!
Not all functions are created equal, that’s one of the first things you need to understand when learning how to code, and in particular this is true for JavaScript functions.
For this article, I want to cover one type of function: pure functions. No, I’m not talking about functions that haven’t had s*x yet, this is a completely different topic.
Let’s get into the nitty-gritty.
What are pure functions?
What is a function to you? Let’s start there.
A function is a piece of code that can be called, potentially with attributes, performs a set of actions and finally can return another value.
In other words, something comes in, “stuff happens”, something comes out. Sort of like our digestive system. Maybe not the best analogy, but you get the idea.
Pure functions, are functions that do the above, but they do it exactly the same way every single time for every combination of input parameters. That means that every time you call a pure function with the same set of parameters, you’ll get the exact same result and there will be no side effects.
Think about this function:
This function is pure because the results are predictable. For every input you’ll get the same result every time:
Input -> Output
1 -> 2
2 -> 4
3 -> 6
4 -> 8
5 -> 10
And so on. We’ve essentially created a mapping function. It maps every number to its double. That’s what a pure function is, a map between input and output.
I can already hear your question: isn’t every function a map between input and output?
Well, no, not really. Let’s take a look at some impure functions so you can see what I mean:
There are 3 functions there that show different levels of impurity:
- whatTimeIsIt: This function does not accept any parameters, which means that by pure function standards, it should always return the same result, however, it returns a different value every time you execute it, unless you execute it multiple times during a second, but you get the point. It won’t be constant over time.
- getTotalCost: This function is impure because it depends on a global variable. As it is right now, without making any changes it’ll always return the same result, but the minute someone updates the value of tax your seemingly pure function now starts returning different values, thus breaking the existing mapping. Pure functions cannot use global variables, end of discussion.
- updateUserName: This one is impure because it has a big side effect: it’s modifying the object it receives as a parameter. In JavaScript, objects are passed as reference, so any change you make on them inside the function will affect the original one.
Can we fix them? Can we make those impure functions turn to the light and become pure as the sunset? We can! Well, actually, in most cases. The first one can’t be changed, since it’s only returning the current date and time, and by definition that is not a pure function. However, the other two can be updated:
To fix getTotalCost we had to add the tax variable as an attribute, that way we can map any changes on it with new results.
For the updateUserName function what made it pure was that instead of modifying the original object, we’re cloning it and updating the new one before returning it.
Why would you go want to work with pure functions?
This is a very valid question, after all it looks like if we want to make pure functions, in some situations, we have to jump through some hoops to get there. Are those extra jumps worth it?
I’d say “yes”, but let me explain.
Pure functions avoid unexpected behavior
By not writing logic that relies on global variables or an external state you avoid the uncertainty that comes with it. With pure functions your logic will be rock-solid, always deterministic and predictable.
A side effect of this deterministic behavior, is that you’re capable of avoiding bugs due to your external state not containing valid values.
Pure functions as simpler
Careful though: simpler doesn’t mean less powerful.
Instead, it just means they’re easier for developers to understand because they have every bit of the logic inside them. They’re also simpler because they have no hidden side effects. Instead they’re very straightforward: they receive some parameters, perform their logic, and produce an output. This makes them also easier to combine by using the output of a function as the input of another. Can you imagine doing that with impure functions? The number of side effects can be potentially disastrous.
Another big benefit of the simplicity of pure functions, is that it makes them a lot easier to test as well. Unit tests dealing with pure functions only have to worry about the input they provide and the output their receive in exchange.
Pure functions are memoizable
Long story short, this means that you can cache the results of the calls to your functions because they will always return the same results.
For instance, imagine having a pure function that takes a few seconds to run because it needs to do some very complex calculations. By memoizing this function, the first time you execute it, it’ll run taking that time, but the result will be cached along with the parameters used. So next time you call the same function, with the same parameters, instead of executing the code, you’ll instead jump straight into the result.
The memoize function from above is a simple version of what I meant. You can definitely use 3rd party modules that will do this with more checks and will provide a better performance, but as an example this should do.
As you can see, the memoize function is returning a new one, that checks whether our function was already called with the particular combination of attributes or not. If it was called, then it just returns the cached result, otherwise it calls the function and then it caches the result for next time.
We can use it like this:
The output you’d get by executing this code, is:
As you can see, the last call is using the memoized version, as expected! In a real-world scenario this would be a huge optimization.
All in all, pure functions provide 3 major levels of benefits:
- You get fewer unexpected bugs, thus making your code a lot more stable, especially when working on big teams where you can’t control every bit of logic.
- They’re easier to understand, reason about and combine with each other.
- They provide you with the ability to improve their performance by memoizing them.
Are you still wondering if you should pay more attention to the way you write your functions? I’d say go pure as much as you can, it’ll make your life a lot easier!
What do you think? Have I left a major benefit of pure functions out? Leave a comment and let’s discuss!
Build component-driven. It’s better, faster, and more scalable.
Forget about monolithic apps, start building component-driven software. Build better software from independent components and compose them into infinite features and apps.
OSS Tools like Bit offer a great developer experience for building component-driven. Start small and scale with many apps, design systems or even Micro Frontends. Give it a try →
Learn more
- Building a React Component Library — The Right Way
- Microservices are Dead — Long Live Miniservices
- 7 Tools for Faster Frontend Development in 2022
Pure Functions in JS: Avoiding Unwanted Problems was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Fernando Doglio | Sciencx (2022-01-28T09:26:26+00:00) Pure Functions in JS: Avoiding Unwanted Problems. Retrieved from https://www.scien.cx/2022/01/28/pure-functions-in-js-avoiding-unwanted-problems/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.