Back by Popular Demand: More on JavaScript Variable Naming Conventions

The Variable Naming Conventions in JavaScript article only scratched the surface of Variable Naming conventions in JavaScript. This article introduces more in-depth info on how to make your code both more readable and maintainable.

Objects vs. Instances

While all variables are written in Camel Case (e.g. CamelCase), object identifiers have the distinction of starting with an uppercase letter, as in Account or BorderPatrolOfficer. Instances, on the other hand, should never begin with an uppercase letter.

var Account = function Account(acctNum) { //uppercase 'A'
  this.acctNum = acctNum;
  this.balance = 0.0;
  
  this.getBalance() = function() {
    return this.balance;
  }
  //etc…
};
//anAccount variable begins with a lowercase 'a'
var anAccount = new Account(111); 

function AccountHolder(name) { //uppercase 'A'
  this.name = name;
  this.accounts = [];
  
  this.addAccount(account) {
    this.accounts.add(account);
  }
  //...
}
//jimmy variable begins with a lowercase 'j'
var jimmy = new AccountHolder('Jimmy'); 

var Bank = {
  address: '99 Reynolds st.',
  accounts: [],
  openAccount: function(accountHolder) {
    this.accounts.add(new Account(accounts.length + 1));
  }
  //... 
};

Acronyms

One source of confusion for developers is names that contain an acronym. Typically, it’s best to enter the full term rather than the abbreviation, but there are cases where it would be redundant to do so, as in the case of well-known acronyms like DVD, HTML, and BYOB(!). In such instances, most choose to stick to strict camel case and only capitalize the first letter. This is especially advisable when the acronym is at the start of the word, for instance, DvdPlayer (as opposed to DVDPlayer, or the extra informative DigitalVersatileDiscPlayer!). Were you to name the instance with a lowercase first letter, the latter would give you the awkward dVDPlayer identifier.

Variable Assignment Via Setter

Whether by constructor or setter, there are a lot of differing opinions on what to call the function arguments. Observe the following variations:

function MyClass(aFoo)
{
  this.foo = aFoo;

  this.setFoo(_foo) {
    this.foo = _foo;
  }
}

The clearest way to name your constructor and setter parameters is to simply use the same name as the objet property that it sets. The this pointer distambiguates the object member from the local variable so there is no danger of encountering runtime errors:

function MyClass(foo)
{
  this.foo = foo;

  this.setFoo(foo) {
    this.foo = foo;
  }
}

The exception to the rule is where the class variable is itself local:

function MyClass(foo)
{
  var foo = foo;  //error!

  this.setFoo(foo) {
    foo = foo;   //error!
  }
}

The best solution here is to change the object attribute, not the setter parameter. Starting the variable with an underscore is a standard way to identify it as being private:

function MyClass(foo)
{
  var _foo = foo;  //error!

  this.setFoo(foo) {
    _foo = foo;   //error!
  }
}

Looping Variables

In being as descriptive as possible, eschew short forms such as act, dt, and ps. The exception here is variables used in loops such as i (for iterator) or c (for count).

for (var i=0; i

Collection Naming

Collections include objects such as Arrays and HashTables. In both cases, they are used to store multiple items. As such their names should be pluralized to reflect their multiplicity:

var accounts = [account1, account2, account3];
var cars     = {};
    cars['buick']  = new Car('Buick');
    cars['camaro'] = new Car('Camaro');
    cars['viper']  = new Car('Viper');

It is also acceptible to append the word “list” to the type name:

var accountList = [account1, account2, account3];
var carList     = {};
    carList['buick']  = new Car('Buick');
    carList['camaro'] = new Car('Camaro');
    carList['viper']  = new Car('Viper');

Boolean Variables and Methods

Whenever possible, methods that return a boolean result should start with the prefix “is”. Examples include isValidFormat(), isCanadianCitizen(), isDeclawed(). However, certain words dictate another prefix, such as usesPostOffice(), hasMoustache(). As long as the method name is posed as a yes/no question, you’re on the right track. The verb prefix satisfies the requirement that all methods start with a verb.

Ironically, boolean variables could be named the same way, except that they would overwrite the method!

var isValidFormat = isValidFormat(); //bad idea!

To avoid a naming collision, consider rearranging the wording so that isValidFormat() becomes formatIsValid or usesPostOffice() becomes postOfficeIsUsed. Or, as Yoda would say, “UsedPostOfficeIs, yes.”:

var formatIsValid = isValidFormat(); //much better
//...

if (formatIsValid) {
  //good to go…
}

Conclusion

Whether you agree with all of the conventions described here today, perhaps the most important habit you can cultivate is to be consistent in your naming standards.