5 Ways To Write Clean JavaScript Code
1. Assign names to variables and functions. 2. Be concise with functions and methods. 3. Code structure matters. 4. Use ES6. 5. Formatting
Writing clean code enhances application maintainability and increases developer productivity.
In this article, I’ll go through several approaches to writing clean code.
1. Assign names to variables and functions.
Name Matters
Variables and functions with descriptive names help readers grasp your code without delving into specifics.
Avoid slang, abbreviations, & misrepresentation.
Don't Include redundant information in names.
It simply takes up more room and makes more noise.
We should name things that are related to the solution's domain. Anything that developers would understand, such as a database, MessageBus, or something that describes the problems we’re trying to solve.2. Be concise in all aspects of functions and methods
Calling or interacting with functions should be simple to understand. The number, order, and length of the function body all matter!
Keep the number of arguments low!
A function should preferably have two or fewer arguments.
Instead of conditionals, use default parameters.
Level of abstraction matter
Functions should only perform work that is one level of abstraction below their name. It aids in the reduction of the function’s size and complexity, resulting in simpler testing and debugging.
High-Level Abstraction: Operations that we ask to accomplish something without caring how it does it, making them easier to comprehend and use. “isValidPassword(password),” for example.
Low-Level Abstraction: delves into operations to define the implementation specifics of how something works. For instance, “password. length > 8” is used directly.
The purpose is to introduce low-level operations to a place where the function name adds interpretation.
Stay DRY (Don't Repeat Yourself)
Some code splitting advice: don't divide your code if:Finding a new function takes longer than reading the extracted function. Can't come up with a decent name for the extracted function.
3. Code Structure — looks matter
Replace Nested Conditionals With Guard Clauses
A guard clause is a check that causes the function to quit immediately, either with a return statement or with an exception.
Using Maps to clean up switch/if statements
If you have any switch/if statements that are expected to grow in the future, consider converting them to key/value pairs.
4. Use ES6 features
Object Destructuring
Template Literals
Array
5. Comments and Formatting
Code Formatting improves readability and transports meaning. There are two types of formatting:
Vertical formatting: Includes spacing between lines and grouping of code
Two general guidelines: related concepts should be kept near together, and distinct concepts should be separated by space.
Horizontal formatting: Includes Indentation, space between code and code width
Avoid making comments as much as possible. Your code should be self-explanatory unless you have legal facts or an explanation that cannot be replaced by proper naming.// Bad
const fruits = ['🍇', '🍌', '🍉']; // this is the list of fruits
const basketSize = fruit.length // getting length of fruits array.//Good
const serverUrl = '23424@dew.dql.heroku.com'; // only works in the staging environment.
Conclusion
Most of these ideas may be expanded and applied to various programming languages. Adopting these strategies will require effort, especially for larger codebases, but will ensure that your code is clear, scalable, and maintains code quality throughout your team.
If you liked this article, check out the other articles I have authored.
- 3 Design Patterns Every Developer Should Learn
- JavaScript Under The Hood: Advanced Concepts Developers Should Know
- Stack & Tools You Should Learn to Become a Full-Stack Developer Faster
- Single Responsibility Principle: Practical Guide to writing maintainable code
Follow me on Medium and LinkedIn to remain up to date on new articles I’ll be writing!
Go composable: Build apps faster like Lego
Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.
Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.
Help your team with:
