JavaScript Monads

If you want to navigate this series of posts, here is the basic table of contents:

This story will just get you started with bootstrapping an application

This is part 2, where we define the problem and introduce the Maybe monad

This is part 3 where we add some mapping capability to our monad

This is part 4 where we take a look at point free

This is part 5 where we add chaining

This is part 6 where we bring in real world data

I found this wonderful article on that you can find here. I thought for my first post on Medium, I would try to throw out my thoughts and my experimentations on this project. This should be a series of posts that I plan on working on.

All of this code is going to be hosted on GitHub here.

Firstly, what are we talking about today, well a Monad called Maybe. This is a wonderful function that has a lot of uses which I intend to show you in these posts. I’m not going to go into all the math with monads, well, because most of it is over my head, but I can show you what this monad can do for you and how you can use it in a real work example.

Let’s get started shall we. We are going to basically write all the code ourselves. No third party libraries, we shall create the meat and potatoes of the code ourselves. Sounds great, right?

We are going need to be able to get started. I’m sure you have a folder where you like to keep your javascript, so let’s start there and create a new folder. I dont’ know, let’s say call it js-monads. Here is where we will play with our new monads that we are going to create. After creating that folder, you can open a comand prompt and navigate to that folder. There are many ways of doing that based on the OS that you are working on, but I’m a Windows user, so I just put my cursor in the address bar and type cmd and I get a command prompt in that folder already:

Make sure your command prompt is in the folder in which to wish to cretae the project, because it will operate on that folder.

Now type in this command into the command prompt:

npx kreat

This is an npm package that I wrote, to bootstrap out some test projectcs. This is going to bring you in some options

I’m going to choose to create a javascript-playground. If you are interested in the source code for this project, you can find it here.

After that you are going to get two more prompts. One to create an empty git repository

Then I am going to choose to install the dependencies

Now, your project should be ready to go

Your project structure so far should look like this

I’m not going to go into what all these files do. You can also choose to create your project in another way, but I like this option for myself. Feel free to fork the repo for this Kreat project and make the templates your own. I may write another article on the creation of that project as well. If and when I do, I link it up here.

Let’s now open this up in vscode. You can do that in a number of ways, but I have chosen to install this in my Windows contextual menu, so I am just going to right click in the folder and select Open with vscode

Now that we have our folder structure in place and we have opened this project in vscode, let’s give it a test try and see what it does. Open a terminal in vscode. You can do this by going to the

And now type

npm start

Once webpack start up, this should open a window in your browser. Let’s right click and choose inspect to bring up the developer tools of our browser and you should see something like this:

That’s a little bit long of a setup, but I wanted for us to have a place where we can play with these monads and we will continue in the next post with looking at the Maybe monad a little bit.

Click here to move on to the next post in this series.