Maintainable JavaScript — Names

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by improving naming.

Naming

To make our JavaScript code maintainable, we got to make the names descriptive so that we know what they do fro the names.

Also, the case should be consistent so that we won’t be confused with the names.

Variables and function should be camel case,

Camel case means that the name starts with a lower case letter and each subsequent word starts with an uppercase letter.

For instance, these are camel case:

let myName;
const someVariable;
let veryLongName;

They all start with a lower case with subsequent words start with upper case.

Variables and Functions

Variable names are camel case and should start with a noun.

This way, we know what they store.

For example, we can write:

let count = 10;
const firstName = "james";
let isTuesday = true;

to define variables with nouns.

If we define variables with other kinds of words like verbs, then we’ll easily confuse them with functions.

So we shouldn’t define variables with names like:

let getCount = 10;

get implies that we’re doing something so that doesn’t make sense.

However, we should create functions that starts with verbs:

function getCount() {
  return 10;
}

We’re getting some value when we call getCount so it makes sense for the function to start with get .

This also means that our function names shouldn’t look like variable names.

For instance, if we have:

function theCount() {
  return 10;
}

then we’ll easily confuse that with a variable.

Naming is more of an art than a science, but there’re some conventions we can follow.

Words like count , length , and size suggests number.

And words like name and message suggests that it’s a string.

Meaningless names like foo or bar should be avoided.

Some conventions for function names include prefixes like:

• can to suggest a function that returns a boolean
• has is a function to return a boolean
• is is the same as can or has
• get suggests that a function is returning a non-boolean value
• set is a function that’s used to save a value

For example, if we have:

if (canSetName()) {
  setName("nick");
}

then we know that if we can set the name, then we set the name.

Another example would be:

if (getName() === "nick") {
  jump();
}

Then we know that we’re getting the name with getName and we’re doing something with jump .

Constants

Before ES6, there’s no concept of constants.

But now, we can define constants with const .

The names for constants should be upper case.

For example, we can write:

const MAX_COUNT = 10;

to let everyone know that MAX_COUNT is a constant.

Constants can’t be reassigned to a new value, but they’re mutable.

Having a separate convention for constants lets us distinguish between variables and constants.

Conclusion

We should follow some conventions for variable and function names and constants.