Javascript Clean Code Principles
Tags: javascript, webdev, beginners, programming
Published: 2022-08-22 09:16:39


One of the books that has most influenced my life is [The Elements of Style](https://www.amazon.com/Elements-Style-Fourth-William-Strunk/dp/020530902X/) by Strunk and White. I took a technical writing class in college where we closely studied its recommendations. The book is short and contains over 100 side-by-side comparisons of less effective and more effective writing.

Reading it made me realize that I learn well by example and comparison. I’ve long wanted to write an article that shows less effective and more effective programming approaches by comparison for those who also learn well by comparison.

![the elements of style](https://833250.smushcdn.com/1694534/wp-content/uploads/2022/05/book-cover.png?lossy=1&strip=1&webp=1)

Today I’m going to lay out what I’ve found to be the most important principles for writing clean code. In the first section, the examples are written in  [JavaScript](https://flatlogic.com/blog/7-trends-in-javascript-to-look-for-in-2020/), but they apply to almost every language. In the second section, the examples are specific to  [React](https://flatlogic.com/blog/crud-app/).

Before we start the side-by-side comparisons, I want to make a recommendation that needs no side-by-side view.

## Use prettier

If you have not heard of it, prettier is an automated code formatting tool. The idea is that you add a prettier config file to your project, and request all your teammates or contributors to enable an  [IDE](https://flatlogic.com/blog/best-10-ides-for-react-js-for-2021/)  plugin that re-formats code on save.

![prettier logo](https://833250.smushcdn.com/1694534/wp-content/uploads/2022/05/prettier-logo-1024x427.png?lossy=1&strip=1&webp=1)

Never again will my team have an argument about tabs vs spaces or 80-column wrap vs 120-column wrap. It will also settle disputes about what types of quotes to use, whether to use semicolons or what spacing to use around brackets.

Prettier was created for JavaScript, JSX, and JSON, but it has plugins for HTML,  [CSS](https://flatlogic.com/blog/what-is-material-ui/), md, XML, YAML, toml,  [PHP](https://flatlogic.com/blog/8-reasons-to-use-javascript-libraries-in-project-management-apps/), python, ruby, java, shell [and many more](https://prettier.io/docs/en/plugins.html#official-plugins)

My favorite thing is that I concentrate on code and not on formatting. I can quickly add code without proper newlines or spacing and then watch prettier magically format the new code.

## [Let’s start](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

Each recommendation below has a very short description and a code example so you can compare more effective vs. less-effective approaches.

### [Exit early when possible](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

When writing a function, consider the negative outcomes that would allow you to exit early from the function. You’ll find your code has fewer indentations and is easier to read.

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-1.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

### Be expressive, not clever

Of the two functions below, which would you rather come across in a project? Maybe the first one is clever and concise, but how much time does it take you to tweak the functionality?

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-2.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

### Make variable names descriptive

When you write code, you may have only one thing on your mind. But when you come back later to look at code, descriptive variable names are very helpful.

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-3.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

### Prefer for-of loops

`for-of` loops have some advantages over `for-i`, `forEach` and `for-in` loops:

-   Fewer characters
-   Ability to continue, return or break from the loop
-   Easier to read and follow

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-4.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-5.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-6.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

### Prefix booleans with verbs such as “is” and “has”

Verbs help set a boolean apart from other types.

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-7.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

### Avoid double negatives.

Sometimes they’re subtle and lead to cheeky bugs.

[](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

[![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-8.png)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

### Avoid using “!” with “else”

Instead, use the positive form in the `if` condition.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5aubh2ycvsrxad89acx.png)  

### Prefer string interpolation over concatenation

It’s almost always more readable to interpolate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b86sc4fofvpj3h8j7rzc.png) 

### Avoid using the ternary operator to a return boolean value

In return statements, ternary operators are redundant.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ki75tjajqfdz28edadc.png) 

### Use try-catch with await

`async await` makes code more readable than a tree of `.then()` calls. But don’t forget that you need to catch rejections that `await`-ed values might throw.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27hqz4g97zjqeeur686l.png) 

### Avoid using “magic” numbers

Any number or string that has a non-obvious meaning should be declared as a separate, descriptively named variable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agjo6gso4ar0tv06k0dt.png) 

### Avoid declaring functions with more than 2 arguments

Arguments should have a logical order. When you have 3 or more arguments, the order is often not obvious. Yes, we have intellisense in our IDE, but save some thought cycles by accepting “named” arguments if appropriate.

![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-14.png)

### Prefer objects to boolean arguments

Code that calls the function will be cleaner and more obvious.

![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-15.png)

### A Section on React

JSX and React have their own challenges that deserve some extra attention.

### Declare DOM only once per function

You can take one of three approaches to avoid it:

1.  Break  [components](https://flatlogic.com/blog/difference-between-react-and-angular-a-comparison-guide-for-2021/)  into smaller units
2.  Use `&&` as a stand-in for `if` blocks
3.  Use the ternary operator for `if-else` blocks

![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-16.png)

### Make your own wrappers on top of UI libraries

Your project might rely on MUI or another  [UI](https://flatlogic.com/blog/react-admin-templates/)  [library](https://flatlogic.com/blog/best-libraries-for-react-i18n/)  for all it’s components. But keeping your UI consistent can be challenging if you have to remember sizes, colors and variants. In the example below, the project wants to always use medium outlined buttons in MUI.

![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-17.png)

### Mind the guard operator

In Javascript, `&&` is the guard operator not a boolean operator; it returns the first operand that is truthy.

![clean code principles](https://kendsnyder.com/sandbox/clean_code/images/combined-18.png)

## A final word

Writing clean code takes practice. Be a code craftsman and take the time to learn good principles and make good habits.