5 (and a half) Javascript Readability tips
By: Meyron Levanon
Tags: Javascript Tips, Code Readability, JavaScript, Code Review, Software Development

I’ve done a lot of code reviews, and a few issues in terms of readability definitely tend to repeat. Some of these tips are Javascript specific, however, some are universal. If you are an experienced developer, you might think these are obvious. In that case, feel free to share this article with a junior developer.

1. Returning true or false

There’s nothing wrong with returning true as a rule, however, when you’re doing something like this:

You are literally returning true if an expression is true or returning false when the expression is false. Why not just return the expression itself? The result is the same and the code is much more concise:

2. Saving expressions in variables

Let’s examine the FizzBuzz problem, which is:

when counting, if the number is divisible by 3, print “Fizz”, if divisible by 5, print “Buzz”, if divisible by both, print “FizzBuzz”, otherwise print the number itself.

1, 2, Fizz, 4, Buzz, Fizz, 7, 8 … and so on.

Here’s a simple implementation of the main logic:

That’s not terrible, but we can make this more readable by storing the result of the calculation in a properly named variable, like this:

This is superior to the first code for two reasons:

1. Self explanatory: there is no need to guess the purpose of these calculations and comparison to zero. It’s explained by the variable names. It’s essentially self-documenting.

2. Performance: this code will only execute each calculation once, as opposed to the chance that each calculation will be done twice in the original code.

Of course, there are other options with similar ideas, like adding another function for the division check and concatenating the string to avoid duplicate checks. But it’s arguable whether or not these changes are improving the code readability. Just for the fun of it, here’s version 3:

3. Utilizing the js Boolean conversion

In js, there are a few things that are “falsy”, meaning they are auto converted into false when tested. A few of those are:

0, null, undefined, “” (empty string), NaN (Not a Number) and false.

Everything that’s not falsy, is truthy, meaning it’ll be evaluated as true. such as:

{} (empty or not empty object), [] (empty array), [1,2,3], “a”, 5, -1

This fact is useful when checking if a variable is not null (or undefined), and in case of arrays, if it contains any elements. for instance:

Can be refactored into:

This works since an empty array is truthy and any length that’s not 0 is truthy. You might think this is less readable, however, this is a standard in js. You’ll see these kind of checks a lot, whether on arrays or to check if optional arguments have been passed to a function, and since this is the acceptable way (also a more concise way), it will be much more readable to someone working with js.

Edit: the reader Eyal Ofri mentioned the optional chaining operator .? , that can make this even simpler. However, this operator is very recent, so not all browsers support it yet. Here’s what it looks like:

Bonus tip: Suppose you need to convert some value into its Boolean equivalent, try using the !! operator. It’s actually not its own operator, but two uses of the ! (not) operator. The first operator will convert to Boolean and perform a not operation on it, and the second will flip it back to its original Boolean value.

usage of !! operator

4. Embracing “new” js features - String Literals

The word “new” is in double quotes since these features have been standardized and implemented in most browsers a few years ago. These help a lot with readability. I can’t talk about all of the features introduced since 2015, so I chose the top two that I think help with readability.

String Literals ``(see documentation) are a powerful tool. Instead of concatenating strings with the + operator, we have a string templating tool we can use with backticks `.

Using literals to easily concatenate values and new lines into strings

5. Embracing “new” js features - Spread Syntax

Spread Syntax … (see documentation) is my current favorite feature in Javascript. It’s so versatile. You can use it to copy or concatenate arrays, clone or merge objects, send an array of values as separate parameters to a function, and much more. And it manages to be much clearer while doing all that: