The Art of Code

Upscalix
5 min readSep 18, 2023

--

Every task has its unique style, and every appearance has its beauty. Typically, anything beautiful appears tidy and well-structured, but it all depends on the observer’s perspective.

Source

The same goes for machines. Machines are created to assist human work, making it easier for humans to complete tasks. The device maker tries to develop it neatly, structured, and cleanly. This way, when one part of the machine encounters an issue, it can quickly identify the problem.

Code is also a machine, but it takes the form of written text. Every developer has their code structure and their coding art. However, not all developers have a code structure or coding style that can help other developers easily understand the code they create. Therefore, in software development, we have something called Clean Code.

What is Clean Code?

Clean code, as defined by Robert C. Martin in his book “Clean Code: A Handbook of Agile Software Craftsmanship,” is code that is easy to read, understand, and modify.

Why is clean code necessary?

  1. Readability: Code is not only read by machines but also by humans. Code that is easy to read allows developers to quickly understand the logic of the code, reducing the time spent on debugging or relearning the code after a long time.
  2. Maintainability: Like machines, code requires maintenance, bug fixes, feature additions, and more. Clean and well-structured code is easier to modify, reducing the likelihood of new bugs emerging during updates.
  3. Collaboration: Most software projects involve multiple developers working together. If the code is clean and well-organised, it can help teams work more effectively together.
  4. Debugging: Code that is easy to read and maintain can make it easier and faster to identify errors in the code, reducing the headaches developers face when trying to diagnose code issues.

Well, those are some benefits of the Clean Code.

What are the best practices for Clean Code?

1️⃣ Meaningful Names: Utilise easily comprehensible, clear, and not overly lengthy names.

DON’T

class Air {
constructor() {
this.fanSpeed = “Low”;
}
}

DO

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}
}

2️⃣ Functions Should Do One Thing: Each function should focus on having only one purpose, making it easier for us to understand the task of each function.

DON’T

class AirConditioner {
constructor() {
this.temperature = 22;
this.fanSpeed = “Low”;
}

setFanSpeed(newFanSpeed, newTemperature) {
if ( ["Low", "Medium", "High"].includes(newFanSpeed)) {
this.fanSpeed = newFanSpeed;
this.temperature = newTemperature;

console.log(`Fan speed set to ${this.fanSpeed} and temperature set to ${this.temperature}`);
} else {
console.log("Invalid fan speed setting. Choose from Low, Medium, or High Or Invalid Temperature setting");
}
}
}

DO

class AirConditioner {
constructor() {
this.temperature = 22
this.fanSpeed = “Low”;
}

setTemperature(newTemperature) {
if (this.isValidTemperature(newTemperature)) {
this.temperature = newTemperature;

console.log(`Temperature set to ${this.temperature}`);
} else {
console.log("Invalid temperature setting, Temperature must be between 16 to 30 Celcius");
}
}

isValidTemperature(newTemperature) {
return newTemperature >= 16 && newTemperature <= 30
}

setFanSpeed(newFanSpeed) {
if (this.isValidFanSpeed(newFanSpeed)) {
this.fanSpeed = newFanSpeed;

console.log(`Fan speed set to ${this.fanSpeed}`);
} else {
console.log("Invalid fan speed setting. Choose from Low, Medium, or High");
}
}

isValidFanSpeed(newFanSpeed) {
const validFanSpeeds = ["Low", "Medium", "High"];

return validFanSpeeds.includes(newFanSpeed);
}
}

3️⃣ Comments: It’s better to use words for every piece of code that is hard to understand or for overly complex algorithms. However, provide comments that are clear and not excessive.

DON’T

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}

// To set the fan speed,
// make sure don’t too cold, it’s winter you know! brrrrrr
setFanSpeed(newFanSpeed) {

...
}

// To check you set it is valid or not, we only have low, medium and high
isValidFanSpeed(newFanSpeed) {
...
}
}

DO

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}

// To set the fan speed
setFanSpeed(newFanSpeed) {
...
}

// To check the fan speed is valid or not
isValidFanSpeed(newFanSpeed) {
...
}
}

4️⃣ Make Your Code Consistent: Ensure your code’s format is consistent. Use consistent indentation, spacing, and well-spaced line breaks.

DON’T

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}

// To set the fan speed
setFanSpeed(newFanSpeed) {
...
}

// To check the fan speed is valid or not
isValidFanSpeed(newFanSpeed) {
...
}
}

DO

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}

// To set the fan speed
setFanSpeed(newFanSpeed) {
...
}

// To check the fan speed is valid or not
isValidFanSpeed(newFanSpeed) {
...
}
}

5️⃣ Keep It Short: Fewer functions and classes in code make it easier to read and maintain. However, they still need to be clear in naming and their responsibilities.

DON’T

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}

// To set the fan speed to Low
setFanSpeedLow() {
...
}

// To set the fan speed to Medium
setFanSpeedMedium() {
...
}

// To set the fan speed to High
setFanSpeedHigh() {
...
}
}

DO

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
}

// To set the fan speed
setFanSpeed(newFanSpeed) {
...
}

// To check the fan speed is valid or not
isValidFanSpeed(newFanSpeed) {
...
}
}

6️⃣ Modularisation: It’s better if code can be made reusable. This helps reduce duplication of writing the same code.

DON’T

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
this.engineStarted = false;
}

// To set the fan speed
setFanSpeed(newFanSpeed) {
if (this.engineStarted) {
...
}
}

// To check the fan speed is valid or not
isValidFanSpeed(newFanSpeed) {
...
}

startEngine() {
if (!this.engineStarted) {
console.log("Engine is starting...");

this.engineStarted = true;
} else {
console.log("Engine is already running.");
}
}
}

DO

class Engine {
constructor() {
this.engineStarted = false;
}

start() {
if (!this.engineStarted) {
console.log("Engine is starting...");

this.engineStarted = true;
} else {
console.log("Engine is already running.");
}
}

isStarted() {
return this.engineStarted;
}
}

class AirConditioner {
constructor() {
this.fanSpeed = “Low”;
this.engine = new Engine();
}

// To set the fan speed
setFanSpeed(newFanSpeed) {
if (this.engine.isStarted()) {
...
}
}

// To check the fan speed is valid or not
isValidFanSpeed(newFanSpeed) {
...
}
}

Those are some expected benefits and best practices in creating a Clean Code. It’s even better if you have testing code for every primary function so that it will simplify the maintenance in case of bugs in those functions. As Robert C. Martin once said, “Would you rather Test-First, or Debug-Later?”

Regularly perform Refactoring to improve your skills in Clean Code and keep it clean. Refactoring is the process of improving your code without changing its intended purpose.

Also, learn about the SOLID Principles discovered by Robert C. Martin to create a more mature Clean Code.

Conclusion

Every code and machine requires maintenance, even up to five years after they were created. Creating code that is easy to read, straightforward, and maintain will greatly assist every developer in carrying on their work.

Indeed, creating a Clean Code might not be accessible when you’re working on a Real Project. But the art of neat and clean code is easier to understand than messy code.

“Clean Code always looks like written by someone who cares.” — Robert C. Martin.

At Upscalix, our developer always make sure to use clean code for our projects. Want to talk on what product that our developers can build?

Contact us NOW.

--

--