Conditional Data Creation in JS (Part 1): Strings

We often have to create various data types conditionally: e.g. when forming a string, we might need to add a substring x if condition a is correct. Or to return a list that is formed according to particular boolean rules. Even the same can go for object.

The problem is easy at the first glance. Before the conditions start to be more complex and there are many variables in the context, so a simple if statement is no longer an option.

In part 1 of Conditional Data Creation, I am going to speak about conditional creation of strings. I like talking more about practical usage and examples, let’s dive in straight into a problem that we want to solve: URL forming with query parameters.

So let’s say we have to call some API: http://api.vendor.com/users?minAge=5&nationality=LT&nameQuery=Tom (this is fake).

The query parameters minAge=x, nationality=y and nameQuery=z should be passed only when needed through function fecthUsers which will accept the parameters and add them to URL.

Note: in order to focus on conditional string creation we will ignore the need to encode whole string after creating it to have a valid URL.

So let’s dive into what options do we have:

Nice and simple (bad option 1)

This imperative example looks understandable and straightforward. Though, it adds undefined query parameters and we don’t know how the api will react to that — will it query users whose nationality is undefined? Will it ignore this query parameter? This vagueness is not what we want.

Simple IFs (bad option 2)

Everyone knows how the if statement works. Now we no longer have undefined query parameters. But, we doubled in lines, we had to handle a case that any parameter might start with a question mark. Also, if we had 20 parameters — this would be a hell. And we do not DRY.

Functions in imperative way

Okay, so this is somewhere closer to what we could use. We don’t have undefined values, we don’t repeat ourselves, we have some single responsibility helper functions that could be reused in other URL creations. But we have more options.

Adding a helper to String.prototype

So the idea of injecting own methods into String.prototype is like first cigarette: you see some people do it, you know it’s unhealthy, you know people around you won’t like that — but you want to try that.

So String.prototype.concatIf looks vastly reusable, not only for query parameter concatenation, but for merely any conditional string concatenation.

I love the idea of chaining — you need to look at one line at a time and care only about one line above.

And since I like chaining so much…

Chain everything…

So here we introduced a new structure Url that has withQueryParam and build methods so we can chain easily without using let and mutating the same string line by line.

Here we mixed two things: having a String.prototype extension and having a functor.

Since we’ve added so many reusable stuff, that we have to maintain, why don’t we just…

…use URI.js or any other library

Yes, in JS — we have a library for everything!

But, it’s amazing that URI.js has no functionality that emits blank parameters (https://github.com/medialize/URI.js/issues/332) and it does not even plan to do that.

So even by using one of the most popular URI forming libraries, we are getting back to the initial problem — how to get rid off of the useless query params?

What if we conditionally defined an object or a list of query parameters and only then form an url accordingly?

More about that — in Part 2 and Part 3 of “Conditional Data Creation in JS” — coming soon.

Conclusion

So we had six examples here. For me, none of them is a perfect-sillver-bullet-sexy-works-for-all and has its pros and cons.

Since the software engineering is moving towards functional programming, I do believe we should see more functors that could help us form strings by particular rules. But since JavaScript capabilities are quite limited for this, we need some helpers. And rare developers team loves adding a 3rd party library or overriding String.prototype globally just for something so simple and stupid (at first glance) as string formation.

In later parts we are going to talk about conditional creation of lists and objects.

Follow and clap to see more! Cheers.