Pure Functions

_PureFunctions.md

Pure functions

A pure function for given the same input will always return the same output and evaluation of this function will not cause any side effects.

Advantages of using pure functions:

• easy to test, as they always return the same value,
• easy to debug, as they shouldn't cause any race conditions and circular dependencies,
• simple and independent, as they don't cause any side effects (it makes design clean),
• easy to scale application up, as they shouldn't rely on machine state.

Where can I use pure functions:

• components in React
• reducers in Redux (the state isn't mutable)

example1.js

/**
 * Very simple example of the pure function
 * @param {*} x 
 * @param {*} y 
 */
function sum (x, y) {
  return x + y
}

// no matter how many times i call this method output will be always the same.
sum(1, 1) // => 2
sum(1, 1) // => 2
sum(1, 1) // => 2
sum(1, 1) // => 2
// still pure...
sum(2, 1) // => 3
sum(2, 1) // => 3
sum(2, 1) // => 3
sum(2, 1) // => 3
sum(2, 1) // => 3

// Math.random method isn't pure as it returns always different output 
// ("random" number between 0 and 1) for the same input 
Math.random(); // => 0.7325953424584757
Math.random(); // => 0.2666709610168234
Math.random(); // => 0.9421822796909656

// It isn't pure as it's returns the same output only within one second timespan
Date().toLocaleString() // => "Thu Jul 27 2017 11:39:11 GMT+0200 (CEST)"
Date().toLocaleString() // => "Thu Jul 27 2017 11:39:11 GMT+0200 (CEST)"
Date().toLocaleString() // => "Thu Jul 27 2017 11:39:11 GMT+0200 (CEST)"

setTimeout(() => {
  Date().toLocaleString() // => "Thu Jul 27 2017 11:39:16 GMT+0200 (CEST)"
}, 5000);

// console.log isn't a pure function as it has a side effect. It causes output on the device side.
console.log('aaaaa'); 
console.log('aaaaa'); 
console.log('aaaaa'); 
console.log('aaaaa'); 

example2.js

import React from 'react';

/**
 * Example of using pure functions to define components in React 
 * @param {string} name 
 */
const HelloWorld = ({name}) => {
  const showAlert = (event) => {
    alert('Hello!')
  }
  return (<a href="#" onClick={showAlert}>{`Hi ${name}`}</a>)
}

export default HelloWorld;

example3.js

import {AUTHENTICATED, UNAUTHENTICATED} from '../actions/authorization';

/**
 * React reducers are examples of pure functions
 * @param {array} state 
 * @param {*} action 
 */
export default function (state = [], action) {
  switch (action.type) {
    case UNAUTHENTICATED:
      // if user is unauthenticated than reset roles
      return [];
      // ---
    case AUTHENTICATED:
      // if user is authenticated than assign roles
      return action.scopes;
      // ---
    default:
      return state;
  }
}