Variable Naming: Arrays and Booleans

  You block advertising 😢
Would you like to buy me a ☕️ instead?

To become a capable programmer, it is crucial to have systems that free you of the mental burden of thinking about all the little things while programming so you can focus on the big picture.

I often find myself thinking long and hard about how to name a particular variable or function. This is because I know how important it is to choose proper names so that other programmers and your future self can easily understand your code. But mostly, I think about unimportant details like how to name a boolean variable versus an array.

In this article, we try to define a system that relieves us from thinking about unimportant details.

Naming Arrays

Recently I started to prefer objects over arrays, e.g., to store data from an API.

const users = {
  1: {
    id: 1,
    name: 'Joana',
    // ...
  },
  2: {
    id: 2,
    name: 'John',
    // ...
  },
  // ...
};

This makes it very convenient in certain situations to quickly obtain the user object for a particular id. My rule of thumb is to use arrays only when order is important.

But there is a problem with this: When you see the variable users, you expect it to be iterable. I tried a lot to solve this problem, for example, with the suffix byId: usersById. But I wouldn’t say I like that very much.

My latest approach is not to suffix the regular case but the exception. Whenever I declare an array, I use the list suffix: usersList.

const users = { /* ... */ };
const usersList = [ /* ... */ ];

Boolean

For boolean variables I mostly stick to the rules Michael Z. writes about in his article about naming boolean variables.

// Good
const hasLatestArticles = latestArticles.length > 0;

// Bad (imperative variable name)
const showLatestArticles = latestArticles.length > 0; 

Imperative names are reserved for functions only.

// Good
const hasLatestArticles = latestArticles.length > 0;
if (hasLatestArticles) showNotification();

// Bad
const mustShowNotification = latestArticles.length > 0;
if (mustShowNotification) showNotification();

In the example above, mustShowNotification is not ideal, because the code might change anytime:

 // Good
 const hasLatestArticles = latestArticles.length > 0;
-if (hasLatestArticles) showNotification();
+if (hasLatestArticles) openNewsletterModal();

 // Bad
-const mustShowNotification = latestArticles.length > 0;
-if (mustShowNotification) showNotification();
+const mustOpenNewsletterModal = latestArticles.length > 0;
+if (mustOpenNewsletterModal) openNewsletterModal();

In general, we should name variables according to the data or information they store, not what they are supposed to trigger. This is because the action triggered can change at any time.

Wrapping it up

If you want to become a faster programmer, don’t worry too much about how fast you can type. The most time-consuming tasks are reading and understanding code, and thinking up proper names for your variables and functions to make it easier for your colleagues to read and understand your code in the future. Having a system that helps you find good variable names faster can significantly increase your productivity.


Do you want to learn how to build advanced Vue.js applications?

Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.



Do you enjoy reading my blog?

You can buy me a ☕️ on Ko-fi!

☕️ Support Me on Ko-fi