DEV Community

Basic monads in Javascript

Jason on September 03, 2018

I'm going to explain some common monads that you can start using in your javascript today. Monads will help make your code easier to read, more mai...

Read full post

Ed Williams • Dec 20 '19 • Edited

This looks a excellent library; looking forward to using this. Could you help with the following example?

const data = [
  { wrongName: 'Jason', level: 7, cool: true },
  { wrongName: 'Blanche', level: 8, cool: false }
]

Maybe(data)
  .map(people => people.filter(person => person.cool))
  .map(people => people[0])
  .map(person => person.name)
  .map(name => name.toUpperCase())
  .cata({
    Just: data => console.log(data), // JASON
    Nothing: () => console.log('No data available')
  })

this appears to give me a Uncaught TypeError: Cannot read property 'toUpperCase'... but I imagined it might deal with the error in a similar way to Promises

Jason • Dec 20 '19

For this example the following would be better if you weren't sure if some fields would be available

const data = [
  { wrongName: 'Jason', level: 7, cool: true },
  { wrongName: 'Blanche', level: 8, cool: false }
]

Maybe(data)
  .map(people => people.filter(person => person.cool))
  .chain(head)
  .chain(get(['name']))
  .map(name => name.toUpperCase())
  .cata({
    Just: data => console.log(data), // JASON
    Nothing: () => console.log('No data available')
  })

Yuri Kostin • Apr 19 '20

It seems to looks better with Ramda, isn't it:

const data = [
  { wrongName: 'Jason', level: 7, cool: true },
  { wrongName: 'Blanche', level: 8, cool: false }
];

Maybe(data)
  .map(filter(propEq('cool', true)))
  .map(head)
  .map(prop('name'))
  .map(toUpper)
  .cata({
    Just: console.log
    Nothing: () => console.log('No data available')
  })

PS: thanks a lot for the article

Jason • Apr 19 '20

This isn't exactly the same because Ramdas prop() does not return a Maybe, so if that prop did not exist then ramda would return an undefined, which will cause problems down the line. Same with head()

Yuri Kostin • Apr 19 '20

You are totally right. Sorry for my mistake.

artydev • Nov 7 '23 • Edited

The first example could be written:

const data = [
  { name: 'Jason', level: 7, cool: false },
  { name: 'Blanche', level: 8, cool: false },
  { name: 'Hary', level: 8, cool: true }
]

for (let p of data) {
  if (p.cool) {
    console.log(p.name.toUpperCase())
    break;
  }
  else {
    continue
  }
}

But I don't like it :-)
Regards

Chuang Yu • Sep 10 '18

This is so cool.

FYI if you don't quite get the point this article shows, give a taste on Haskell. The monad thing is from Haskell which is an extremely neat programing language.

Stijn Winand • Sep 4 '18

Great stuff. I'll share this with my brother-in-law because it'll do a great job at explaining some FP fundamentals for us to start another conversation with.

asic • Sep 4 '18

Thanks, really cool example.
A preference for the lib apart from Oncha ?

Jason • Sep 4 '18 • Edited

Thanks! I prefer pratica because I wrote it :)

lewis • Sep 17 '19

Thanks so much for this Jason! I've always felt FP was a bit over my head but this is a great little example and explanation. Thanks again 👍

Ariel Gueta • Sep 5 '18

Thanks, I wonder what the implications are for performance?

Jason • Sep 5 '18

Typically pretty negligible. The Maybe monad just checks the value against null and undefined and calls the callback function. So, not much happening.

Ariel Gueta • Sep 6 '18

Yes, but you also create a new callback function for each step, and the gc should clean them up.

elprosystem • Jan 26 '21

Hello. My dear for those who do not know what monads is still the same. have to talk about how to make and use but without a lib

jakubgawlikowski • Sep 11 '19

I find using Result very neat for modeling AND logic, but what about if I need to branch my logic and provide two different Ok results depending on OR logic?

Jason • Sep 12 '19

That should be no problem either, instead of returning Result's you can use values, example:

Ok('some value')
  .map(x => x.length > 4 ? 'long' : 'short') // .map() will stay an 'Ok'
  .map(x => x.toUpperCase())
  .chain(x => x === 'LONG' ? Err('too long') : Ok(x)) // switch to Err branch if you want
  .cata(...)