What is a function?
In high school maths

f(x)= x^2

What is a function?
In JavaScript

f = x => x * x

What is functional programming?

  1. ​Write pure functions
  2. Compose pure functions
  3. Avoid shared mutable states
  4. Isolate side effects

What is a pure function?

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

What is a pure function?

let _counter = 0; const increment = () => { _counter++; return _counter; }; // not pure because it mutates and returns external variable increment();// 1 increment();// 2 const tomorrow = () => { const date = new Date(); date.setDate(now.getDate() + 1); return date; }; // not pure because new Date() is current time tomorrow(); // Mon Sep 14 2020 20:15:52 GMT+1000 (Australian Eastern Standard Time) tomorrow(); // Mon Sep 14 2020 20:15:53 GMT+1000 (Australian Eastern Standard Time)

What is a pure function?

const increment = x => x + 1; // pure increment(1); // 2 increment(1); // 2 const nextDay = (date) => { const next = new Date(date.valueOf()); next.setDate(next.getDate() + 1); return next; } nextDay(new Date(2020, 08, 13)) // Mon Sep 14 2020 00:00:00 GMT+1000 (Australian Eastern Standard Time) nextDay(new Date(2020, 08, 13)) // Mon Sep 14 2020 00:00:00 GMT+1000 (Australian Eastern Standard Time)

What is a pure function?

  1. ​Most of the side effects happen in OOP can be avoided
  2. Essential side effects (disk I/O, network I/O, database I/O, UI) should be isolated from pure functions

Why is FP better

  1. Pure functions are concise, predictable and testable
  2. Code is ​simpler
  3. Modules are better separated
  4. Works better with parallel/asynchronous programming because the lack of shared mutable states

Case Study

Conway's Game of Life

Conway's Game of Life

The universe of the Game of Life is an infinite, two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, live or dead, (or populated and unpopulated, respectively). Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:

Any live cell with two or three live neighbours survives.
Any dead cell with three live neighbours becomes a live cell.
All other live cells die in the next generation. Similarly, all other dead cells stay dead.

Conway's Game of Life - implementation in OOP

input
output
side effects
event
f:(a:A)=>B
User Input  |  Network/Disk/Database Input  |  Scheduled Task
UI  |  Network/Disk/Database Output  |  Task schedule  |  Launching Missiles
A
B
An abstraction works for most of the programs
input
output
side effects
event
render:(states: State)=Element
Page loaded
Render
state:{email:string, password:string, isEmailValid:bool, isPasswordValid:bool, isRequestPending:bool}
DOM Element
Case Study: User Registration
input
output
side effects
event
onEmailChange:(email:string, state:State)=>State
Email input changed
Update states, schedule next render
email, state  
Case Study: User Registration
state with updated email and isEmailValid
input
output
side effects
event
render:(states: State)=Element
Scheduled render
Render
state:{email:string, password:string, isEmailValid:bool, isPasswordValid:bool, isRequestPending: true}
DOM Element
Case Study: User Registration
input
output
side effects
event
render:(email, password,
  isEmailValid, isPasswordValid)=>Element   
state changed
Render
email, password, isEmailValid, isPasswordValid
DOM Element
Case Study: User Registration
input
output
side effects
event
 submit:()=>DOM
submit button clicked
Render, web request with email, password
void
DOM indicates registration is being processed
Case Study: User Registration
input
output
side effects
event
register:(request:HttpRequest)=>HttpResponse
Network input
Network output
HttpRequest
HttpResponse indicates if registration is successful
Case Study: User Registration
input
output
side effects
event
onRequestComplete:(response:HttpResponse)=>DOM 
Network output
Render
HttpResponse
DOM indicates if registration is successful
Case Study: User Registration
input
output
side effects
event
validatePassword:(password:string)=>DOM 
password input changed
Render, store password in states
password
DOM indicates if password is valid
Case Study: User Registration
input
output
side effects
event
onEmailChange:(email:string, state:State)=>State
Email input changed
Update states, schedule next render
email, state  
Case Study: User Registration
state with updated email and isEmailValid
input
output
side effects
event
render:(states: State)=Element
load
Render
state:{email:string, password:string, isEmailValid:bool, isPasswordValid:bool, isRequestPending:bool}
DOM Element
Case Study: User Registration