Read Time:2 Minute, 30 Second

Javascript is an awesome programming language, however, writing clean javascript code can be a challenge, even for seasoned programmers.

What does clean javascript code look like? It should be:

  1. Easy to read
  2. Easy to debug
  3. Efficient and high performing

Here are the top tools and tricks you can use take your Javascript code quality to the next level:

1. Use a try catch on all api requests & JSON methods

Numerous things can go wrong when making api requests to fetch data, so taking care of these scenarios are a must. When handling JSON don’t automatically trust what is being given, try to make your code more robust by handling possible inconsistencies.

Image description

2. Use a linter (ESLint/TSLint)
A linter is a static code analysis tool that will check for programmatic and stylistic errors based on a predefined set of rules and configuration. In short it will improve your Javascript/Typescript and help keep it more consistent.

3. Track Javascript issues in your editor

A major component of keeping your Javascript codebase clean is making it easy to track and see issues in the code itself. Tracking codebase issues in the editor allows engineers to:

  • Get full visibility on larger issues like tech debt
  • See context for each codebase issue
  • Reduce context switching
  • Solve tech debt continuously

You can use various tools to track your technical debt but the quickest and easiest way to get started is to use the free Stepsize extensions for VSCode or JetBrains that integrate with Jira, Linear, Asana and other project management tools.

4. Utilise template strings
Template strings will allow you to inject values into the string while preserving the format and the code is much more reader friendly than doing string arithmetic.

Image description

5. Utilise regex when needing to search strings
Although regex can seem esoteric from the outside, it is such a powerful string parsing tool and allows you to construct complex patterns to account for a variety of difficult string matching scenarios.

6. Utilise optional chainings
Stop having long logical conjunctions and simplify your code with optional chaining.

Image description

7. Avoid nesting

Nesting is a sure fire way to increase the complexity of your code and make it much harder to read and comprehend. Consider refactoring if it’s more than two levels deep, by having root level return conditions, shorter blocks and abstracting nested logic to its own functions.

8. Comment all atypical code, but don’t let it replace code readability

There will be times when you have to handle uncommon scenarios where there aren’t established conventions. Commenting this code to help explain what it does and the context that is being considered will greatly help other programmers as well as be a reminder to yourself when you return to the code in the future. But this should not be used as a crutch for not being thoughtful around writing readable code in the first place!


CyberSEO Pro - OpenAI GPT-3 autoblogging and content curation plugin for WordPress