Does naming your variable matter?

I knew that naming your variable mattered. After all, I have been hearing this advice for a very long and it does make sense. why would someone not want to keep a variable name meaningful right? but I did not give it very serious thought. Until my experience taught me otherwise. I learned the lesson the hard way.

Introduction

Recently, I was working on a personal project called Bon Vinanta. It's a simple recipe finder app that suggests recipes based on user input from an API called Edamam.

Since it's a recipe app, it was obvious to me to name some variables as menu or menus.

when I started working with my recipe app. I gave the variable names as simple as menu or activeMenu or activeMenuHandler to keep things simple and straightforward.

Even, when the app grew slightly more. I didn't have any problem. I kept giving variables whatever names I could think of. I kept my code tidy and organised and there was no way I could think of anything that needed to be changed.

Problem Phase

I kept on working and tried my best to keep the code organized and simple and I continued with this variable called menu. I had many files and components that were dependent on menu or activemenu. For example, a sidebar that shows the menu and submenus. A recipe grid that shows recipes based on the selected menu. A recipe card that shows the different color labels based on the selected menu and so on.

At this time, I had probably 10-15 components that were using the same variable names as menu, menus, submenu, activemenu, and so on. which were being passed back and forth.

Actual hell

Since my code was growing. I wanted to refactor and reorganize the files. and that's where the menu hell started. As I started refactoring my code, I failed to recognize which menu prop was doing what? it started becoming more confusing and tiring to pass the prob and not know exactly why the component was not producing the desired behavior.

It became even worst when I tried to rearrange the files and folders and renamed some of the components.

My console started throwing big fat errors that I had no clue about. I would fix one piece of code and it will break another as all these components were interrelated and confusing due to similar variable names.

Every time I tried to fix the code, my brain refused to work because I was so sick of seeing the same variable name but they all were not necessarily the same. Even if some names were slightly distinguished it was still painful. For example, in one component I used the menu on the other I used mainMenu. somewhere I would use mealType and somewhere I would use menuType.

That's when I realized the importance of naming the variable in a clear and concise way if I were to scale my project successfully.

How I rename them afterwards?

After this mess, I did not want to do anything further unless I rename my variables in a clean and concise way. I stopped refactoring and started renaming that made sense even though I had to do a lot of rewriting.

now lot of menu and menus became a lot more meaningful full such as activeMenu, menuTypes, subMenuByMenuTypes, menuTypesHandler, activeMenuHandler etc.

Screenshot from 2022-07-07 21-32-50.png

Conclusion

Just like any newbie, I never gave a second thought to naming my variables but I learned my lessons hard way. I shared these lessons so someone else could learn from my mistake since advice linked with actual incidence gives a lot more clarity than just plain advice.

I hope you enjoyed this post. If you did, please feel free to share your feedback in the comments or follow me on Twitter.

Does naming your variable matter?

Comments (1)

More from this blog

How to Authenticate Your React App Using Firebase

How to Create Horizontal Parallax Scrolling using CSS and JavaScript

Using Fontsource With 11ty

How to contribute to Hacktoberfest 2023 through ReactPlay?