Functional JavaScript and Ramda.js

Zhuoran (John) Li

What is FP? 🤯

A programming paradigm mapped from mathematical functions

 

Declarative

(what)

Imperative

(how)

vs

🥳

Pure Function 💦 

Given the same input, will always return the same output and produces no side effects


// Pure
const add = (a, b) => a + b

add(1, 2) // 3
add(1, 2) // 3

[1, 2, 3].slice(0, 1) // [1]

// Impure
let a = 1;

const increment = n => a += n

increment(1) // 2
increment(1) // 3

[1, 2, 3].splice(0, 1) // [1]

Math.random() // 0.8227538687335922
Math.random() // 0.6780092463695311

In Reducer

Side Effects ✍️

  • I/O (reading and writing a file)
  • Calling an API to modify an object
  • Mutations
  • Calling any other functions with side-effects

Using side effects is NOT forbidden!

Currying

Transforms a function with multiple arguments into a sequence/series of functions each taking a single argument.

const add = a => b => a + b

const increment = add(1)

const increment(2) // 3 === add(1)(2)

Pointfree Style!

Cleaner and More Expressive

const water = cond([
  [equals(0),   always('water freezes at 0°C')],
  [equals(100), always('water boils at 100°C')],
  [T,           temp => `nothing special happens at ${temp}°C`]
])


const isEligibleToVote = both(isOverEighteen, isCitizen)
const water = temperature => cond([
  [val => equals(0, val),   val => always('water freezes at 0°C')],
  [val => equals(100, val), val => always('water boils at 100°C')],
  [T,           temp => `nothing special happens at ${temp}°C`]
])(temperature)


const isEligibleToVote = age => 
    both(
        val => isOverEighteen(val), 
        val => isCitizen(val)
    )(age)

Another Example

(code snippet from our product)

Before
🥳 After  
🤪 Before  

Function Composition

Applying a function to the output of another function

h(g(f(x)))

compose(h, g, f)(x)

const toAlladin = compose(g, f)

toAlladin(aPerson)
const toAlladin = pipe(f, g)

toAlladin(aPerson)

compose: right -> left

pipe: left -> right

Example

More Examples

(Code snippet from our product)

Functors

🤓 Simplified Answer:

A functor is an object that has a map method

Better Answer

🧐 A functor in an object that obeys the functor laws

Identity and Associativity

// Identity
[2].map(x => x) === [2]

// Associativity
const f = x => x * 2
const g = x => x + 2

[2].map(g).map(f) === [2].map(compose(f, g)) // [8] [8]

Bonus Track:

Tagged Union (Sum Types),

Redux and calling API

UI Design:

  • Initial state
  • Loading state
  • Success state
  • Error state

Initial

(Not Asked)

Verifying One-time URL

(Loading)

Invalid URL

(Failure)

Valid URL

(Success)

Remote Object - Tagged Union (Sum Types)

Verifying One-time URL

Error (e.g. Invalid Reset Password URL)

Initial State

Success

You can chain Remote during rendering

Productivity plugin in Alfred

The End

Functional JavaScript with Ramda.js

By LI Zhuoran

Functional JavaScript with Ramda.js

Video: https://www.youtube.com/watch?v=7MDIZ0S4nA0&t=588s

  • 632