The presence and constraints of Clean Code in JavaScript
Once upon a time in the land of computer code, there was a smart developer named Bob. People knew him for his skill in making complicated code with just a few taps on his keyboard. One day, he found himself in a mess of old code that seemed like it was written by tricky code creatures. “Oh, the tangled mess of spaghetti code,” he sighed, ready to fix it. Little did he know, this adventure would teach him about Clean Code – a powerful secret that makes bugs run away scared. Join us as we explore the world of JavaScript, where Clean Code is like magic, and find out what happens when developers ignore its rules.
What is clean code
Clean Code is a computer code that is easy to Read, Maintain, and Understand. As human beings, we are acceptable to others when we are simple and expressive to others. Similarly, our code should be simple, concise, and expressive.
However, Clean code is more than just aesthetically pleasing formatting. Clean code reduces the chances of bugs, improves collaboration among developers, enhances application maintainability, increases developer productivity, and ultimately leads to a more sustainable codebase.
In this article, I’ll go through several approaches to writing clean code and share some case studies of when we will go for performance or Clean code.
The 4 pillars of Clean Code
1. Readability
The code should be written in a way that is easy for others (or your future self) to read. Meaningful variable names, consistent formatting, and well-organized code contribute to readability.
2. Maintainability
A clean codebase is easy to maintain. This involves modularising your code, minimizing dependencies, and adhering to design principles like SOLID.
3. Testability
Clean code is inherently testable. It encourages the use of unit tests, making it easier to identify and fix issues.
4. Scalability
As your project grows, clean code scales with it. It accommodates changes and additions without causing a cascade of issues.
Exploring the limits of Clean code
Although striving for clean code is commendable, are there limits to how clean we can make our JavaScript?
Let’s examine some situations where maintaining cleanliness may appear difficult.
1. Performance vs. Readability
One common dilemma is the trade-off between performance and readability. For example, inline code might be more performant, but it sacrifices readability.
The key is to strike a balance based on the context. Always favor readability unless performance is a critical concern.
2. Over-Engineering
Over-engineering occurs when developers add unnecessary complexity to their code. This can lead to bloated codebases that become challenging to maintain.
Simplicity is often the best approach. Only introduce complexity when it’s justified.
Another Example:
3. Premature Optimization
The famous quote by Donald Knuth rings true: “Premature optimization is the root of all evil.”
Focusing on optimisation before identifying bottlenecks may result in code that is hard to understand and maintain.
Optimise when necessary, not just for the sake of optimisation.
Case Studies
Let’s examine a couple of case studies to illustrate the principles of clean JavaScript code.
Case Study 1 - Poor Naming
Would we like it if our parents had given us names like a, b123, foo? : )
We must have been furious or looking for a change! Treat the “naming” in a similar way for variables and functions in your code:
Instead,
Use intention-revealing names and don’t worry if you have long variable names instead of saving a few keyboard strokes.
If you follow this practice, your names become searchable, which helps a lot when you do refactors or you are just looking for something.
Avoid slang, abbreviations, & misrepresentation.
Don’t Include redundant information in names.
It simply takes up more room and makes more noise
Case Study 2 - The Callback Pyramid
Consider the infamous “callback pyramid” in asynchronous JavaScript code.
This callback hell is not only hard to read but also prone to errors. A cleaner approach is to use Promises or async/await.
Case Study 3 - Magic numbers
Magic numbers, hard-coded constants in your code, can make it difficult to understand the significance of certain values.
By using named constants, your code becomes more expressive and self-documenting.
Case Study 4 - Single Source of Truth
Find a single place to store data or configurations of an application. Duplicating them in multiple places will trigger chances of error.
Here API_KEY is duplicated in multiple places. You may need to update them everywhere if they need an update.
They Say Clean Code is SUBJECTIVE
Yes, it could be. something as a clean code to you may not be clear to me as I may not need some of the standards and practices you follow and vice versa. Also, achieving a 100% clean in a larger project may be impossible.
Take an example of Pure Function. It is a function that produces the same output for the same input.
A pure function shouldn’t have any side effects to change the expected output. Is it a pure function?
Well, No. The function’s output now depends on an outer state called greeting . What if someone changes the value of the greeting variable to Hola? It will change the output of the sayGreeting() function.
So, Can I make all functions Pure Functions?
Yes, technically, you can. However, the application with only pure functions may not do much.
Your application program will have side effects like HTTP calls, logging to console, IO operations, and many more. Please use pure functions in as many places as you find possible. Isolate impure functions(side effects) as much as possible. It will improve your program’s readability, debuggability, and testability a lot.
Conclusion
Clean JavaScript code is not a mythical concept but a practical approach to writing code that is sustainable and efficient. By embracing readability, maintainability, testability, and scalability, developers can navigate the challenges of code cleanliness. While there may be moments where the pursuit of cleanliness seems to clash with other priorities, understanding the context and finding a balance is key.
In the end, the quest for clean JavaScript code is an ongoing journey—one that requires constant reflection, learning, and adaptation. As we explore its limits and question its existence, we pave the way for a codebase that not only works but also thrives in the ever-evolving landscape of web development.