JavaScript Joel

Posted on Oct 16, 2018

Functional vs Imperative Patterns in JavaScript

#functional #javascript #mojiscript

The intention of this post is not to say one paradigm is better than the other. It is just to show common patterns you run into and their functional equivalents.

If there is a pattern I missed and you would like to see, post it in the comments below. Warning, boil your pattern down to the least common denominators. I can't convert a 100 line function! ;)

if / else

Imperative

const hour = 14
let greeting

if (hour < 18) {
  greeting = 'Good day';
} else {
  greeting = 'Good evening';
}

Functional

The if can now be re-usable as function getGreeting.

const isDay = hour => hour < 18
const getGreeting = hour => isDay(hour) ? 'Good Day' : 'Good Evening'
const greeting = getGreeting (hour)

import ifElse from 'mojiscript/logic/ifElse'

const isDay = hour => hour < 18
const getGreeting = ifElse (isDay) (() => 'Good Day') (() => 'Good evening')
const greeting = getGreeting (hour)

if (no else)

Imperative

let name = 'joel'

if (name != null) {
  name = name.toUpperCase()
}

Functional

isNotnull and toUpperCase are re-usable functions. name is not overwritten, instead upperName is created.

import when from 'mojiscript/logic/when'

const isNotNull = obj => obj != null
const toUpperCase = when (isNotNull) (string => string.toUpperCase ())

const name = 'joel'
const upperName = toUpperCase (name)

Summing an Array

Imperative

const values = [1, 2, 3]

let sum = 0
for (const x of values) {
  sum = sum + x
}

Functional

Do not mutate sum.

const values = [1, 2, 3]

const add = (x, y) => x + y
const sum = values.reduce(add)

import reduce from 'mojiscript/list/reduce'

const add = x => y => x + y
const sum = reduce (add) (0)

const values = [1, 2, 3]
sum (values)

for / if (1)

Imperative

const values = [1, 2, 3, 4, 5]

let evens = []
for (const x of values) {
  if (x % 2 === 0) {
    evens.push(x)
  }
}

Functional

Do not mutate evens.

import filter from 'mojiscript/list/filter'

const values = [1, 2, 3, 4, 5]

const isEven = num => num % 2 === 0
const evens = filter (isEven) (values)

for / if (2)

Imperative

const values = [1, 2, 3, 4, 5]

for (const x of values) {
  if (x % 2 === 0) {
    console.log(`${x} isEven`)
  }
}

Functional

Use when for conditional execution.

import map from 'mojiscript/list/map'
import when from 'mojiscript/logic/when'

const isEven = num => num % 2 === 0
const logWhenEven = when (isEven) (x => console.log (`${x} isEven`))

const values = [1, 2, 3, 4, 5]
map (logWhenEven) (values)

Breaking a loop early

Imperative

const values = [1, 2, 3]
let sum = 0
for (const x of values) {
  if (x > 3) break
  sum = sum + x 
}

Functional

reduceWhile is like reduce, but accepts a predicate to "break" early.

import reduceWhile from 'mojiscript/list/reduceWhile'

const add = x => y => x + y
const lte3 = num => num <= 3

const sum = reduceWhile (() => lte3) (add) (0) (values)

if / else if / else

Imperative

const fn = temp => {
   if (temp === 0) return 'water freezes at 0°C'
   else if (temp === 100) return 'water boils at 100°C'
   else return `nothing special happens at ${temp}°C`
}

fn(0) //=> 'water freezes at 0°C'
fn(50) //=> 'nothing special happens at 50°C'
fn(100) //=> 'water boils at 100°C'

Functional

import cond from 'mojiscript/logic/cond'
import $ from 'mojiscript/string/template'

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

fn(0) //=> 'water freezes at 0°C'
fn(50) //=> 'nothing special happens at 50°C'
fn(100) //=> 'water boils at 100°C'

Setting properties

Imperative

const obj = {
  one: 1
}

obj.two = 2

Functional

Do not mutate original object, shallow clone it and then add the new prop.

note: When objects are mutable, you must deep clone. If objects are immutable, you can shallow clone, which has obvious performance benefits.

const obj = {
  one: 1
}

const newObj = {
  ...obj,
  two: 2
}

Modifying Arrays

Imperative

const values = [1, 2, 3]
values.push(4)

Functional

Do not mutate values.

const values = [1, 2, 3]
const newValues = [...values, 4]

For large arrays, use an immutable library like list for high performance immutable Arrays.

import L from 'list'

const values = L.from([1, 2, 3])
const newValues = L.append(4, values)

Classes

Imperative

Prone to errors.

class Cat {
  constructor() {
    this.sound = 'Meow'
  }

  talk() {
    return this.sound
  }
}

const cat = new Cat()
const talk = cat.talk

cat.talk() //=> 'Meow'
talk() //=> Error: Cannot read property 'sound' of undefined

Functional

Separation of function from data for maximum reusability.

const cat = {
  sound: 'Meow'
}

const dog = {
  sound: 'Woof'
}

const talk = animal => animal.sound

talk (cat) //=> 'Meow'
talk (dog) //=> 'Woof'

Nested for loop

Imperative

let box = ''
for (let y = 0; y < 5; y++) {
  for (let x = 0; x < 5; x++) {
    box = box + '* '
  }
  box = box + '\n'
}

Functional

No more nesting. Immutable.

import reduce from 'mojiscript/list/reduce'
import range from 'mojiscript/list/range'

const makeCols = cols =>
  reduce (acc => () => acc + '* ') ('') (range (0) (cols))

const makeBox = ({ cols, rows }) =>
  reduce (acc => () => `${acc}${makeCols (cols)}\n`) ('') (range (0) (rows))

const box = makeBox ({ cols: 5, rows: 5 })
//=> * * * * * 
//=> * * * * * 
//=> * * * * * 
//=> * * * * * 
//=> * * * * *

And reusable!

const makeTriangle = length =>
  reduce
    (acc => i => `${acc}${' '.repeat(length - i)}${makeCols (i + 1)}\n`)
    ('')
    (range (0) (length))

const triangle = makeTriangle (5)
//=>     * 
//=>    * * 
//=>   * * * 
//=>  * * * * 
//=> * * * * *

Null guard

Imperative

const toUpper = string => {
  if (string != null) {
    return string.toUpperCase()
  }
}

Functional

This example wraps the argument in a Maybe type and then unwraps it at the end. In a typical FP app, you would be using the Maybe throughout your app, so you would not need to wrap and unwrap the string. So this is a little more verbose than you would normally see.

import S from 'sanctuary'

const toUpper = S.pipe ([
  S.toMaybe,
  S.map (string => string.toUpperCase ()),
  S.maybeToNullable
])

// If you use `Maybe` throughout your app, this would be your `toUpper` function.
const toUpper = S.map (string => string.toUpperCase ())

maybe is a function decorator that executes the function only if an argument is supplied. Now our null guard is reusable. More on function decorators here: Functional JavaScript: Function Decorators Part 2 #JavaScript

const maybe = func => (...args) =>
  args.length === 0 || args[0] == null
    ? args[0]
    : func(...args)

const toUpper = maybe(string => string.toUpperCase ())

End

My articles are very Functional JavaScript heavy, if you need more FP, follow me here, or on Twitter @joelnet!

More articles
Ask me dumb questions about functional programming
Let's make a DEV.to CLI... together
Let's talk about auto-generated documentation tools for JavaScript

Top comments (11)

Avalander • Oct 17 '18

reduceWhile (() => lte3) (add) (0) (values)

This almost looks like lisp, I like it ❤️

JavaScript Joel • Oct 17 '18

One trick I learned recently to making curried functions readable is to format them with spaces between the parens. I live this style :

I also have eslint-config-mojiscript to enforce this with eslint!

Cheers!

Avalander • Oct 17 '18

Yeah, I add the spaces between the parenthesis too, but I don't curry all functions by default, only when I need so to do function composition.

JavaScript Joel • Oct 17 '18

That was one requirement of MojiScript, all functions must be curried. When every function is curried, every function can be composed!

There are also no callbacks. Every callback-style function must be promisified.

Cheers!

JavaScript Joel • Oct 16 '18

If you allow mutations, you have to deep clone. If you disallow mutations, shallow cloning is enough.

This is how libraries like list or immutable.js are so fast. They disallow mutations.

One of the advantages of FP.

maple • Oct 20 '18

I found that for-loop sometimes is more readable than functional version, but functional version is better in most case.
For example, I will use for-or along with awaitwhen I want to await multiple promises one by one.

for(const url of urls){
  await fetch(url)
}

await urls.reduce((p,url)=>p.then(()=>fetch(url)),Promise.resolve())

JavaScript Joel • Oct 20 '18 • Edited

I agree with you about that example being easier to read. I would still prefer consistency in the app and ban all for loops in favor of map reduce and filter.

You could also break the one liner down a bit to help with readability and reusability.

const serialFetch = (promise, url) => promise.then(() => fetch(url))
await urls.reduce(serialFetch, Promise.resolve())

Fox Donut • Oct 24 '18

Great article, @joelnet !

JavaScript Joel • Oct 24 '18

Thanks! I appreciate the kudos. They keep me writing more :)

Cheers!

Jamal Al • Oct 17 '18

I think functional style is nice but not in all cases. For loops and if statements are part of the language, why would u use external library over something that's already available to u?

JavaScript Joel • Oct 17 '18

You can't be immutable with for loop. If statements also encourage side effects and mutations.

When your code base is all functions, you can create new functions from existing functions.

Composability depends on limiting side effects and preventing mutations.

There are many many benefits that aren't fully realized until you inmerse yourself into an FP codebase.

View full discussion (11 comments)

DEV Community

Functional vs Imperative Patterns in JavaScript

if / else

if (no else)

Summing an Array

for / if (1)

for / if (2)

Breaking a loop early

if / else if / else

Setting properties

Modifying Arrays

Classes

Nested for loop

Null guard

End

Top comments (11)

Read next

Performance Analysis of JSON, Buffer / Custom Binary Protocol, Protobuf, and MessagePack for Websockets

Data Fetching in React

The Resurgence of Server-Side Rendering in the JavaScript Era

TIL: Block tabs and Get IP in Javascript