DEV Community


Posted on

Maybe. Functional programming in Javascript with React.

Before I get into the main point of this article, which is to showcase the amazing Maybe monad. I would like cover a high level functional programming concept, composition. Composition is at the root of functional programming.

const compose = f => g => x => f(g(x))
Enter fullscreen mode Exit fullscreen mode

Composition allows us to compose functions together.

// Add 10%
const addFederalTax = x => x * 1.1
// Add 15%
const addStateTax = x => x * 1.15

// Traditional
// const addTaxes = price => compose(addStateTax)(addFederalTax)(price)

// Point Free
const addTaxes = compose(addStateTax)(addFederalTax)

// Lets add State and Federal taxes to 5 Dollars
addTaxes(5.00) // 6.32
Enter fullscreen mode Exit fullscreen mode

Another cool concept being used above is point free style.


We will use the Maybe Monad in traversing some data, and then outputting safe to use data.

My love for McDonald's has inspired me to create a data set that represents a slice of some McDonald's restaurant's breakfast menu.

const restaurant = { 
    name: 'McDonalds',
    location: 'Kansas City',
    menu : {
    breakfast : [
            {name: 'Pancakes', options: ['Bacon', 'Sausage']},
            {name: 'McMuffin', options: ['Egg', 'Cheese', 'Sausage', 'Ham', 'Bacon']},
            {name: 'Coffee', sizes: ['Small', 'Medium', 'Large', 'X-Large'], options: ['Milk', 'Creme', 'Sugar']},
Enter fullscreen mode Exit fullscreen mode

Maybes are great when working with data structures that are not reliable.
For example in our breakfast items example above, Coffee is the only option that includes sizes. Checking for sizes in Pancakes or Muffins would cause a runtime error. Not to mention that some locations may not even offer breakfast!

First, we want to make sure that breakfast is offered.

Before we get into the functional stuff.
Let's look at the imperative way, or more conventional style of checking if breakfast is offered.

function hasBreakfastMenu (restaurant){
    if( &&{
    } else {
        // Do Something
        console.log('Not found')

const breakfastMenuItems = hasBreakfastMenu(restaurant)
Enter fullscreen mode Exit fullscreen mode

Now, we will do the same in a functional style.

To achieve this we will use get from the Pratica library. The Pratica get function returns a Monad. Monads are safe, and protect against runtime errors.

// breakfastMenu.js
import { Maybe, get } from 'pratica'

const hasBreakfastMenu = get(['menu', 'breakfast'])

    Just: breakfastMenuItems => breakfastMenuItems,
    Nothing: () => console.log('Not found'),
Enter fullscreen mode Exit fullscreen mode

Great. Pretty simple? Right?

Check out the code below.

// breakfastMenu.js
import { Maybe, get } from 'pratica'

const hasBreakfastMenu = get(['menu', 'breakfast'])

 *  hasSizes & hasOptions return us a Monad. 
 *  In this exampe we will see how Moands can be implemented in our UI.
 *  Using Monads will free us from using if / else statements in our UI Components.
 * */

const hasSizes = sizes => Maybe(sizes).chain(sizes => get(['sizes'])(sizes)) // Returns a Monad
const hasOptions = options => Maybe(options).chain(options => get(['options'])(options)) // Returns a Monad

const safeBreakfastMenuItems = breakfastMenuItems =>
    items => => ({
            sizes: hasSizes(item), // Returns a Monad
            options: hasOptions(item) // Returns a Monad
// Entry point
export const breakfastMenuItems = compose(safeBreakfastMenuItems)(hasBreakfastMenu)
Enter fullscreen mode Exit fullscreen mode

Lets break this up into 3 sections.

First, let's focus on export const breakfastMenuItems. This is our entry point function that implements a compose and some neat point free syntax. We are composing 2 functions that return us a safe data set that we can use in a UI component. As you can see, there is no if or else, no mutability and no variable assignment.

Secondly hasBreakfastMenu uses get to check for the presense of menu.breakfast. Get returns us a Maybe Monad. If menu or breakfast are not found the result will be Maybe.Nothing. The rest of the code execution will not fire.

Finally, safeBreakfastMenuItems the purpose of this code is to check for 2 fields sizes and options, which may be null or undefined. We wrap the fields in a Maybe so we can check the results in a safe way without any unexpected side-effects.

Now, I will show how we can use the output of the above code in a React UI Component.

import { React } from 'react'
import Options from './Options'
import Sizes from './Sizes'
import { breakfastMenuItems } from './breakfastMenu'
import restaurant from './restaurant' // Restaurant object data found above.

 *  This is not necessarily how I would go about calling this function...
 *  It probably belongs in a reducer. But I think it is important to show how we get the result.
 * */

const breakfastMenu = breakfastMenuItems(restaurant)

const MenuItem = ({ item }) => 

    // Here we avoid using `if else`, instead we unwrap our Monad
        Just: options => <Options options={optons}/>,
        Nothing: () => false

    // Here we avoid using `if else`, instead we unwrap our Monad
        Just: sizes => <Sizes sizes={sizes}/>,
        Nothing: () => false


const MenuItems = ({ breakfastMenu }) => breakfastMenu.cata({
    Just : items => => <MenuItem item={item}/>),
    Nothing : () => <div>No breakfast menu offered</div>,

const App = () => <div> <MenuItems breakfastMenu={breakfastMenu} /> </div>

Enter fullscreen mode Exit fullscreen mode

So what are some take aways that I would like to pass on here.

  1. Composition
  2. No use of if / else.
  3. No imperative code.
  4. Monads Monads Monads.

Check out Pratica! It's neat!

Top comments (2)

rametta profile image

Great article! Very informative and love the mcdonalds references 💯🍔

simonam profile image

I dont know my way around monads yet. Can someone explain to me why sizes are wrapped into a Maybe before using get in 'hasSizes'? Seems redundant to me as get should already put it into a Maybe?