reading-notes

Refactoring

Functional Programming

Source: Concepts of Functional Programming in Javascript

Programming paradigm foucsed on building structure and elements

Pure Functions

• Returns the same result if given the same arguments (e.g. deterministic)
• No observable side effects
• Easier to test (dont’t need mocks)

Impure

• Uses global variable that was not passed in as a parameter
• What if mathematicians decide PI is different? The global changes, so we get a new result with the same parameteres (radius)

let PI = 3.14;

const calculateArea = (radius) => radius * radius * PI;

calculateArea(10); // returns 314.0

Some functions can’t be pure:

• Reading files (content can change)
• Functions using number generator

Pure

let PI = 3.14;

const calculateArea = (radius, pi) => radius * radius * pi;

calculateArea(10, PI); // returns 314.0

No Side Effects

• Don’t update globals

Impure - Global Mutated

let counter = 1;

function increaseCounter(value) {
  counter = value + 1;
}

increaseCounter(counter);
console.log(counter); // 2

Pure - No Global Mutibility

let counter = 1;

const increaseCounter = (value) => value + 1;

increaseCounter(counter); // 2
console.log(counter); // 1

Immuntibility

• Unchanging over time / unable to be changed
• Avoid mutability in functional programming

Mutable

var values = [1, 2, 3, 4, 5];
var sumOfValues = 0;

for (var i = 0; i < values.length; i++) {
  sumOfValues += values[i];
}

sumOfValues // 15

Immutable

let list = [1, 2, 3, 4, 5];
let accumulator = 0;

function sum(list, accumulator) {
  if (list.length == 0) {
    return accumulator;
  }

  return sum(list.slice(1), accumulator + list[0]);
}

sum(list, accumulator); // 15
list; // [1, 2, 3, 4, 5]
accumulator; // 0

Function Chaining

const string = " I will be a url slug   ";

const slugify = string =>
  string
    .toLowerCase()
    .trim()
    .split(" ")
    .join("-");

slugify(string); // i-will-be-a-url-slug

Referential transparency

• If a function constistently yeilds same result for same input

pure functions + immutable data = referential transparency

Functions as first-class entities

• Functions = treated as values AND used as data
  • refer to it from constants and variables
  • pass it as a parameter to other functions
  • return it as result from other functions

const doubleSum = (a, b) => (a + b) * 2;
const doubleSubtraction = (a, b) => (a - b) * 2;

// Instead, make simple functions and use them in complex functions!

const sum = (a, b) => a + b;
const subtraction = (a, b) => a - b;

const doubleOperator = (f, a, b) => f(a, b) * 2;

doubleOperator(sum, 3, 1); // 8
doubleOperator(subtraction, 3, 1); // 4

Higher-Order Functions

• takes one or more functions as arguments, or
• returns a function as its result

doubleOperator is higher-order function

Examples:

• .filter()
• .reduce()
• .map()
• .reduce()

Refactoring in JS

• Rewriting code
• Think about tradeoffs for speed versus maintanability
• Ensure proper error handling
• Do on own code before PR
• Do on existing code when making changes

Example

Unfactored

• User creator doing multiple things
• Duplicated logic in random functions

// Unrefactored code

const friendlyWords = require('friendly-words');

function randomPredicate() {
  const choice = Math.floor(Math.random() * friendlyWords.predicates.length);
  return friendlyWords.predicates[choice];
}

function randomObject() {
  const choice = Math.floor(Math.random() * friendlyWords.objects.length);
  return friendlyWords.objects[choice];
}

async function createUser(email) {
  const user = { email: email };
  user.url = randomPredicate() + randomObject() + randomObject();
  await db.insert(user, 'Users')
  sendWelcomeEmail(user);
}

Refactored

• Factored out duplicate logic
• Factored out URL to separate function

// Refactored code

const friendlyWords = require('friendly-words');

const generateURL = user => {
  const pick = arr => arr[Math.floor(Math.random() * arr.length)];
  user.url = `${pick(friendlyWords.predicates)}-${pick(friendlyWords.objects)}` +
    `-${pick(friendlyWords.objects)}`; // This line would've been too long for linters!
};

async function createUser(email) {
  const user = { email: email };
  // The URL-creation algorithm isn't important to this function so let's abstract it away
  generateURL(user);
  await db.insert(user, 'Users')
  sendWelcomeEmail(user);
}

Strategies

• Return early from functions, oneline simple returns
  • if (user.authenticated === false) { return; }
• Cache variables, functions read like sentances
• Check for Web APIs before making your own functionality

Source

Back