5 (and a half) Javascript Readability tips

Meyron Levanon
Jun 24, 2020 · 5 min read

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:

That’s it. You made it! You can write slightly better code now, or at the very least, you have a few more ideas for comments for your next code review :)

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Meyron Levanon

Written by

Fullstack software developer. I enjoy debates, fine foods, and good looking code. 😎

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Meyron Levanon

Written by

Fullstack software developer. I enjoy debates, fine foods, and good looking code. 😎

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store