{"id":11721,"date":"2022-06-09T15:45:00","date_gmt":"2022-06-09T12:45:00","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=11721"},"modified":"2025-10-28T17:29:28","modified_gmt":"2025-10-28T14:29:28","slug":"javascript-clean-code-principles","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/javascript-clean-code-principles\/","title":{"rendered":"Javascript Clean Code Principles"},"content":{"rendered":"

One of the books that has most influenced my life is The Elements of Style<\/a> 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.<\/p>

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.<\/p><\/div>

\"the<\/figure><\/div><\/div><\/div>

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<\/a>, but they apply to almost every language. In the second section, the examples are specific to React.<\/p>

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

Use prettier<\/h2>

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 plugin that re-formats code on save.<\/p><\/div>

\"prettier<\/figure><\/div><\/div><\/div> \"Professional <\/a>

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.<\/p>

Prettier was created for JavaScript, JSX, and JSON, but it has plugins for HTML, CSS, md, XML, YAML, toml, PHP, python, ruby, java, shell and many more<\/a><\/p>

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.<\/p>

Let’s start<\/h2>

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

Exit early when possible<\/h3>

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.<\/p>

\"clean<\/figure><\/div>

Be expressive, not clever<\/h3>

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?<\/p>

\"clean<\/figure><\/div>

Make variable names descriptive<\/h3>

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.<\/p>

\"clean<\/figure><\/div>

Prefer for-of loops<\/h3>

for-of<\/code> loops have some advantages over for-i<\/code>, forEach<\/code> and for-in<\/code> loops:<\/p>