JavaScript Variable Naming

When it comes down to naming variables, or for that matter naming any new identifer in JavaScript, developers ought to follow certain rules while composing names.

These rules ensure that you give such identifier names that are easy for the interpreter to distinguish from other keywords, numbers, symbols and so on. Failing to abide by these conventional set of rules will only lead to errors, which probably none of us wants!

In this chapter we shall get to know about all these variable naming rules and see how to keep them in mind while coming up with custom names. Not only this, but we'll also consider some other important things such as tips to better and meaningful variable names.

No special characters

Special characters include ` ~ ! @ # % ^ & * ( ) - + and all the characters that are on your keyboard except for numbers, alphabets, the dollar sign $ and the underscore _. Commas, brackets, apostrophes, question marks all fall under the category of special characters and likewise can't be used in variable names.

var num! = 10; // invalid name
var str* = "A string"; // invalid name
var de:mo = "Some text..."; // invalid name
var num& = 10; // invalid name

No starting numbers

Variable names can't start with numbers and so using numbers except for in the start is perfectly alright.

var 1st = "John"; // invalid
var 2ndcity = "Berlin"; // invalid

No spaces

Like you can have spaces between names in English for example you can't have spaces between variable names; how will the interpreter know where does a variable end.

var wrong naming = "Spaces are bad."; // invalid
var first test = 50; // invalid

No reserved keywords

The interpreter has be to able to distinguish between JavaScript's reserved keywords and variables and hence it is invalid to use keyword names like while, if, else, for, try, catch and so on, as variables.

var for = "Sandra!"; // invalid
var const = "I am a constant"; // invalid

So this means that all of the following are acceptable names:

var $money = 150000;
var _pi = 3.14;
var p_i = 22 / 7;
var a1 = 10; // number isn\'t in the beginning
var a25 = "20";
var forWhom = "Sandra!"; // the complete name forWhom isn\'t a keyword
var firsttest = 50;

Variable naming isn't over yet, we still have some things to deal with starting with name case-sensitivity.

Variable names are case-sensitive

If you have three variables text, tExt and TEXT and think that they are the same then you are wrong. Even the slightest change in the case of any character in a variable's name creates a new variable since variables in JavaScript are case-sensitive. The following are all different.

var abcd = 10,
abcD = 11,
abCD = 12
ABCD = 13;

console.log(ABCD); // 13
console.log(Abcd); // throws an error since it is undefined

Variable names shall be short and meaningful

Considering the fact that case-sensitivity can lead to unexpected errors (due to mistyping a name) in a program, it is good to have short and meaningful names.

When you will move on to write large JavaScript programs you will sometimes tend to forget a variable's purpose in a program. Having a meaningful name can solve this problem.

The following are bad examples of variable names:

var loopcounter = 0;
var welcomemessage = "Hello World!";

The same names can be better constructed like this:

var i = 0; // usually i is used to mean incrementor
var welMsg = "Hello World!";

Variable names shall follow a naming convention

When naming variables, programmers shall and must follow a single convention of naming. This reduces the chances of errors and confusions in programs.

But what is a convention? A convention is just the way you name variables. Short names are constructed in some way and long names are constructed using some other. The important thing is to be consistent.

So for instance you can name variables in lower case when they have one word and when they have two or more words you can use one of these two most common ways.

The underscore way:

var main_slider;
var new_slide; // notice the underscores seperating two words

The camelCase way:

var mainSlider;
var newSlide; // notice the capital first letter of the second word

You can also use lowercase but it comes at the cost of code readability:

var mainslider;
var newslide; // difficult to read