DEV Community

Cover image for What is a Pure Function ?
Gena Kainovskiy
Gena Kainovskiy

Posted on

What is a Pure Function ?

A Pure Function is a function which :

  1. Given the same input, will always return the same output.
  2. Produces no side effects.

Side effect

A side effect is when function modifies some state variable value(s) outside its local environment.

Side effects include:

  • Logging to the console
  • Making a HTTP request
  • Mutating data
  • Writing to the screen
  • Writing to a file
  • DOM query or manipulation
  • Triggering any external process
  • Calling any other functions with side-effects

Let's see example and try to understand.

1  const f = () => {
2    y = Math.pow(x,2);
3  }
4
5  let x, y;
6 
7  x = 2;
8
9  f() // y = 4
10
11 x = 3;
12
13 f() // y = 9
Enter fullscreen mode Exit fullscreen mode

In the example above the function f doesn’t return value. It has variable x as indirect input and there is no direct output. It sets state to the outside variable, so it is a side effect. Why should we avoid side effects ?

As you can see, the function f depends on state outside, so it is not easy to predict the result. We execute function at the string 9 and the result depends on string 7. So you can imagine that your function f was executed at the string 1000 and to understand what has happened you need to analyze your code from the first string. It is hard to do πŸ˜“ .

What if we change this code in next way:

1  const f = (y) => Math.pow(x, y);
2  
3  let x;
4
5  x = 2;
6 
7  f(2) // 4
8
9  x = 4;
10 
11 f(2) // 16
12
Enter fullscreen mode Exit fullscreen mode

It works, but what is opposite pure function definition? In this example the output of function f depends on state outside, whether the input of this function is still the same. So we remember that pure function has to produce the same output if given the same input.

To fix this code we have to do x variable as direct input of the function f and this function will return direct output.

1  const f = (x, y) => Math.pow(x, y);
2
3  f(2, 2); // 4
4  
5  f(4, 2) // 16
6 
Enter fullscreen mode Exit fullscreen mode

Can we write a code without side effects ?

Any application can contain request to the server, DOM manipulation or writing to the file system. And it looks like if we want to write a function without side effect we can't send request to the server πŸ˜•. Of course it is impossible.

Side effects, as we saw in example before, do hard to find an issue, but we can't create a program without side effect. What should we do ?

☝️ The key moment in avoiding side effect is trying to write pure function but if you need side effect you should isolate side effects in your code, and if there is an issue, it will be much easier to find it.

Conclusion

It is hard to imagine the application without side effects and using only pure functions. But we should detect side effects and try to isolate them, that helps us in debugging application.

Thanks for reading and I guess it will help you.

πŸš€ πŸš€ πŸš€

Top comments (0)