Nomenclature in Clean Code

Hello Everyone,
Welcome back to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ️🫶.

Introduction

I know most of you think this topic is not so fascinating at all but It is one of the core concepts of clean code practices. What this blog discusses is referred from different resources and my personal experience.
Generally, people are pretty good at writing code that is scalable and Optimised but, they would miss out on writing readable and understanding code.

Clean code is nothing but writing code which is easy to read and understand.

Proper naming is always better than putting the comments in the code i.e. Your naming should explain the intent that could eventually eliminate the necessity of comments.
Without any delay let’s get into our main topic — Naming

Nomenclature

Let’s understand Naming better with practical examples as usual.

Variable

// Snippet 1
const x = 4
const y = 5
const a = x * y
console.log("Area of rectangle: ", a)

// Snippet 2
const length = 4
const breadth = 5
const areaOfRectangle = length * breadth
console.log("Area of rectangle: ", areaOfRectangle)

Both snippets 1 & 2 produce the same result but, Can you tell me which code is more understandable?

Okay, I will make it easier to decide, Just remove both console.log statements from the solutions. Without a doubt, For me, snippet 2 is much better to understand.

Isn’t it??

And You know the reason why it is more readable. It is because of the naming involved in the code.

Avoid

• Meaningless information such as x, y, z.
• Acronyms (unless it is very popular in usage such as “db”).
• Use Pronounciable words such as “payment” instead of “pymt”.
• Magic numbers or strings.

// Don't
if(x === 1) {  
  console.log('this is a magic number')
}

// Prefer
const LOWEST_VALUE = 1
if(x === LOWEST_VALUE) {  
	console.log('this is the better way')
}

• Mental mapping

for(let i = 1; i < n; i++) {  
  for(let j = 1; j < i: j++) {    
    for(let k= 1; k < j: j++) {
        // write code
    }   
  }
}

It is quite a lot of confusion about what are i, j, and k instead give proper names.

Points to remember

In general, Variables are a kind of data container where you store the information.

• Always prefer Nouns and short phrases of adjectives for Variables
  Ex: User, Customer, Product, etc.
• For Boolean values, prefer to go with Short phrases of adjectives
  Ex: isValid, isLoggedIn, etc.
• Try to be more specific for Ex: books instead of items

Methods / Functions

// Snippet 1
function userInfo() {  
  return "userInfo"
}


// Snippet 2
function getUserInfo() {  
  return "userInfo" 
}

Out of 1 and 2 snippets, 1 creates confusion that whether it is a function or variable.

In snippet 2, you can either use getUserInfo, fetchUserInfo, retrieveUserinfo, etc but make sure to be consistent across your application.

Avoid

• Generic names Ex: handle(), get()
• Multiple synonyms as function names such as
  👉 get, fetch, retrieve
  👉 controller, manager, driver
• As informed earlier, maintain consistency across your application to avoid confusion.

Points to remember

In general, Functions do some kind of operation and get you some results.

• Always prefer Verbs and short phrases of verbs for functions
  Ex: save, update, processPayment, etc.
• For functions that return boolean values, prefer to go with Short phrases of adjectives. Ex: isValid(), isLoggedIn(), etc.

Classes

Although In Javascript, we deal with functions more than classes.
Classes offer you more readability than functions.
In General, Classes are used to create objects. They follow similar naming rules as variables such as User, Product, etc.

Conclusion

A good name will leverage the code's readability and maintainability. If you have a proper naming for your code, it will eliminate the necessity of comments.

References

• Robert C. Martin — Clean Code_ A Handbook of Agile Software Craftsmanship-Prentice Hall (2008)
• Clean Code by Maximilian Schwarzmüller

---

Here we go, That’s it folks for this blog.
I hope everyone liked this blog.
If you like it, give it a clap 👏 ,
and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

via GIPHY

Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning 📖✍️

Abhishek Kovuri