My experience with JS One-Liners
Published: 2020-01-29 12:06:11

##Table Of Contents
 * [JS One-Liners?](#1)
 * [Problem!](#2)
 * [First Attempt](#3)
 * [Not Giving Up!](#4)
 * [Hope!](#5)
 * [Eureka](#6)
 * [After Thoughts](#7)

#JS One-Liners?<a name="1"></a>
For the longest time in my short coding career, I don't like one-liners because I think they are not that readable compared to properly indented codes so naturally, I do not pay a lot of attention to them, until now!

I was working on a project one day and came across a very interesting problem, which I was able to solve using one-liners! So I thought I'd share my journey here because why not! Feel free to give suggestions or let me know how you'd solve the same problem!

#Problem!<a name="2"></a>
The scenario goes something like this. I was trying to use EJS to generate some JSON files. One of the attributes to be generated is an array of strings. The interesting part about this array is that its content is supposed to be an aggregation of up to 3 other arrays based on some condition. Let's write them down in code to better understand the problem:

{% codepen https://codepen.io/jackyeoh/pen/gObJWXW default-tab=js %}

This snippet is basically what I want to achieve. The "result" variable will then be inserted into a JSON file which, for now, function as an EJS template file.

This is where I encounter my first major obstacle. A little refresher for anyone who is not familiar with EJS: EJS is a templating tool that takes in a so-called "template" file which have placeholder strings that looks something like "<%= someVar %>" all over it. EJS will then go through the file to replace every occurrence of "<%= someVar %>" with actual values. The cool thing about EJS is that it can also evaluate the placeholder. For example:

{% codepen https://codepen.io/jackyeoh/pen/YzPbVRN default-tab=js %}

So my initial thoughts were to just copy and paste the logic I already have into the placeholder after I separate each line with ';', and I would get my nicely aggregated array! However, I'm immediately faced with an error stating that EJS failed to parse my file. After some troubleshooting, I found out that apparently EJS doesn't support evaluation for multiple lines of code (correct me if I'm wrong tho!).

#First Attempt<a name="3"></a>
I begin by thinking about ways I can combine my logic into one single line. The first idea I came up with is to use promises and chain them with multiple ".then()", each of which will check for one condition and concatenate the array if necessary and pass it to the next promise. Sounds cool, but it did not work as well as I thought. This is because promises are not immediately fulfilled. Doing so I would only end up with a "[promise]" string in my JSON, not quite what I wanted!

#Not Giving Up<a name="4"></a>
I then recalled seeing some very complex one-liners when I was learning to code and I quickly googled "js one-liners" to see if it helps. Still unsure how one-liners work, I decided to break it into smaller steps that I can tackle one by one. The first thing I do is to try to write the individual steps in one-liners:

{% codepen https://codepen.io/jackyeoh/pen/gObJRpe default-tab=js %}

Looks cool and it works! *throws confetti :D However, here we still didn't solve the previous problem of not being able to have multiple lines of code. So I continued looking for ways to chain the operations.

#Hope!<a name="5"></a>
Knowing that chaining promises wouldn't work in this case, I begin looking at the only other functions involved in my operations -- "arr.concat()". According to its official documentation, this function returns an array. Cool! this means that I can chain "arr.concat()" with another ".concat()". My code looks something like this now:

{% codepen https://codepen.io/jackyeoh/pen/XWJwgmb default-tab=js %}

Nice, but still not enough. How can I make chaining these concatenate calls based on the conditions?

#Eureka<a name="6"></a>
Looking back at the one-liners, I suddenly realize that the ternary operator's syntax is "condition ? exprIfTrue : exprIfFalse". What's also an expression? a "return" statement! I immediately spring from my chair to try what "console.log(true ? return "a" : return "b")" would evaluate to and without surprise, it printed "a".

At this point the solution is complete. I just have to start with an empty array, calls ".concat()" on it with the following statement "c1 ? return arr1: return []". Chaining a ".concat()" call for each condition I want to check and BOOM! It's done! My final solution looks something like this:

{% codepen https://codepen.io/jackyeoh/pen/wvBbegQ default-tab=js %}

I then copy-pasted the one-liner into my EJS template file and everything works as intended!

#After Thoughts<a name="7"></a>
Thanks for reading the whole thing! I hope it's not too time-consuming to read through the whole thing because I had fun writing down each step I take solving this problem. I think one-liners are pretty cool after all! Do you like one-liners too? Let me know what you think about it in the comments!