How to write code so that it grows in height, not in width

Image for post
Image for post

Every time we add a new or to code, we have to increase the indent of the condition body or loop. The more nested loops and conditions, the broader your code becomes, and the more difficult it becomes to read. In this short article, I’ll show a few techniques by which you can avoid increasing indentation. Your code will be clearer, and you’ll never see horizontal scrolling.

Rule 0. Don’t listen to me, listen to your style guide

First of all, let me remind you of the most important thing – code style. If you’re working in a team, then it’s important to write code so that you don’t switch from style to style when reading it (remember, many developers can work on the same file). Therefore, you should agree on the coding style: how to name variables, what is the indent size in spaces or tabs, where to put curly brackets, and so on. If you write code alone, you can still use the coding style defined by the creators of the programming language or the community. Stick to it.

Rule 1. Put as close as possible to block

Sometimes you scroll through the code, jump from one method to another and see this:

And everything seems to be fine, but as soon as your eyes go down to the line , you fall into a stupor and ask yourself: if there is an , then what was the ? And you have to scroll up to understand the entire block:

You can invert the condition and swap the body of and blocks so that the body becomes shorter than the body. This will save us from hanging statements.

Rule 2. if/else can be replaced with if-return

In the previous code, you can reduce the indent of the block if you put at the end of the block:

In this case, doesn’t break anything, on the contrary, it eliminates unnecessary nesting. Of course, it may not be obvious that this is an / statement or someone may be against such code, considering that the method should have one input and one output. And they will be right, so the decision should be dictated by your style guide.

The same trick works with //:

With - it would be:

Although in this case, the indent remains the same, blocks of the same type stand out visually better.

Rule 3. if/else can be replaced with if-continue inside loops

To remove inside loops, you should use instead of . Before:

By adding to the end of the body, we get a working code with less indentation:

Rule 4. Avoid unnecessary changes

If the code is clear enough, it’s better to leave it as it is. For example:

shouldn’t be replaced with:

So readability only gets worse.

Rule 5. If nesting exceeds the allowed level, introduce a new method

If there are so many nested loops and conditions inside one method that the code has moved to the right side due to indentation and horizontal scrolling is about to appear, then it’s time to refactor and replace some parts of the method with another method. For example:

Don’t even try to understand this code. I just made it up as an example. Refactoring is a topic of a separate article, so I won’t consider this process step by step. The point is in the changes:

By applying these rules, we made the code less broad, but longer. This is normal, because it’s better to scroll up/down than up/down and left/right, and a high level of nesting together with curly braces also makes code difficult to understand. Besides, the code has become more understandable due to methods with meaningful names, but this is the merit of refactoring.

I love programming, open source, art, learning and sharing knowledge

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