Skip to content
Swizec Teller - a geek with a

About achieving polymorphism in Javascript

Over the weekend I started working on a node.js client library for Toshl's new API. An old side project stopped working recently and I need to fix it because life without frequent emails about my money is disorienting as hell.

The Toshl beta API opened up in July is well thought out, has good documentation and provides everything you could possibly want. I love the well granulated permissions system.

But for users of my node.js library I wanted to make life even simpler. Let's look at fetching expenses.

After you authenticate - testing OAuth clients sucks, and Toshl invalidates your token very often. Think I had to refresh it four times in a five hour coding spree. - you can talk to to get a list of expenses for the current user.

This will return the last 30 entries.

But there are a bunch of options. You have pagination, you can set specific to and from dates, you can filter things by tags and by not-tags.

How can a library make this easy to use?

One approach is to offer a way of specifying an options hash when calling a function, but can we make it even simpler?

The answer lies in polymorphism.

Let's say you have a function called toshl.expenses, in Haskell you could do something like this:

expenses = general_expenses ""
expenses::Number -> Result
expenses N = general_expenses "?per_page="+str(N)
expenses::[String] -> Result
expenses tags = general_expenses "?tags="+(tags.join "&")
expenses::Date -> Date -> Result
expenses from to = general_expenses "?from="+str(from)+"&"+str(to)
expenses::Json -> Result
expenses params = general_expenses "?"+to_query(params)
general_expenses::String -> Result
general_expenses query = make_request "/expenses" query
make_request::String -> String -> Result
make_request endpoint query = ;; do stuff to read from full URL

The syntax is likely wrong but you get what I'm pointing at. You can always call expenses with the argument you care about and it will construct a call to the more generalized version of the function magically.

You can tell what calling expenses will do in each case at a glance and checking what type of arguments the function accepts is trivial. Even somebody who isn't familiar with Haskell could understand that code.

Here's that same polymorphic code in Javascript. This time tested working code.

exports.Toshl.prototype.expenses = function (params, to, callback) {
var options = {},
query = "";
callback = arguments[arguments.length - 1];
if (params) {
if (typeof params == "number") {
options["per_page"] = params;
} else if (arguments.length == 3) {
options["from"] = util.iso_date(params);
options["to"] = util.iso_date(to);
} else if (params instanceof Array) {
var tags = util.transform_tags(params);
options[tags.type] = tags.tags;
} else if (params instanceof Object) {
options = params;
["from", "to"].forEach(function (key) {
if (options[key]) {
options[key] = util.iso_date(options[key]);
query = "?" + querystring.stringify(options);
this._request("/expenses" + query, callback);

Oh wow, what?

Even if you're very comfortable with Javascript you're going to have a hard time figuring out what's going on. It seems the majority of the function deals with translating arguments into a query, then it defers to this._request for the hard work.

This is the cleanest implementation I could think of so far. Let's investigate.

First we ensured that callback is always the last supplied argument, that makes sense when you expect variable amounts of arguments. Everything from one to three is okay.

Then, if params is a number we use it to construct a ?per_page=N query. If there are three arguments, we use the first two to construct a ?from=Date&to=Date query. If the first argument is an Array we use it to get tags and if it's an Object we assume it represents a parameters hash for the API.

The result is that we can do this:

var toshl = new Toshl();
toshl.expenses(console.log); // prints last 30 expenses
toshl.expenses(5, console.log); // prints last 5 expenses
toshl.expenses("2013-10-01", new Date(), console.log); // prints all expenses between October 1st and now
toshl.expenses(["coffee", "food"], console.log); // prints last 30 expenses tagged with coffee or food
toshl.expenses({ per_page: 10, tags: ["coffee", "food"] }, console.log); // prints last 10 expenses tagged coffee or food

The date magic is done with the wonderful moment.js library - you can supply a Date object, a date string or a moment object, but we could obviously improve on this by assuming the to date is "now", if none is provided.

But the code is getting complicated as it is.

Does anyone know a better way to achieve polymorphism in Javascript? I really like it when I'm using libraries, but I hate implementing it this way ...

Enhanced by Zemanta

Did you enjoy this article?

Published on October 15th, 2013 in Application programming interface, Haskell, JavaScript, Languages, Programming, Toshl, Uncategorized

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works 👇

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet 📖

Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet:

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️