Javascript Naming Conventions

A very common query that a lot of developers starting off with Javascript have is about the naming conventions to be used. I’m happy that many of us take that extra step to ensure that we follow standards while we code. But hey, the fact is actually there is no such standards of naming convention defined. Yes there are DOs and Don’ts of javascript naming conventions. But no standards of what you should name the variable etc.

But when the Javascript developers initially started off with Javascript development, they started following some of the conventions from the programming language ‘C’ which can be called as the parent language of Javascript. And now over the time different developers use different conventions. But all of us should try to ensure that our naming conventions are logical and would make sense to another developer when he/she looks at it.

Let’s look at some of the points that would help us ensure these things:

Keep Javascript variables/Function names short

Try not to name your function / variable as long as you screen width 😉 . Try to keep the variable name short.

var Firstnumberenteredbyuser;

// The above variable can be better written as :

var FirstNumber;

 Separate multiple words

At times you might want to use two or more words to name the variable. In such cases try to separate the multiple words using a hyphen ( – ) or an underscore ( _ ) or try to use camel case naming convention.

In camel case convention, the first alphabet of each word is kept capital. For e.g CamelCase or FirstNumber etc. There is a different variation also of  it wherein every alternate word’s first alphabet is written capital. For e.g camelCase or firstNumber etc.

Hyphen can also be used to separate two words like in first-number .

Similarly, you can also use underscore to separate the words like in first_number .

Personally I use both Camel Case and underscore to separate words. I prefer it over hyphen because it helps me select the word with double click on any code editor whereas if I use hyphen, on double-clicking only one word gets selected and you have to highlight the variable manually before selecting it.

E.g :

//Camel Case variables

var firstName;
var LastName;

// Underscore seperated

var first_name;
var last_name;

 

Keep the names logical

The name of the variable or the function that you use should be logical and should make sense to any developer who looks into your code. Do not name your variables as aassddff or asd123 or variable1, functiontwo etc. Keep your variable names logical like userAge, userName, function getUserName etc.

E.g :

// Avoid such variable names :
var aassddff;
var asd123;
var variable1;

function functiontwo(){
//Bad function name !
} 

// Good or logical variable names
var userAge;
var userName;

function getUserName(){
// Logical and relevant function name
}

 

 Differentiate Private variables

If you are writing an object oriented javascript method then try to keep your private variables easily identifiable. Generally it is a common practice among programmers writing Object Oriented Code to begin the private variables and functions with an underscore. So, a private variable might look like _userage . A private function might be written as function _getUserAge() . Please not that it is not the ” _ ” that makes the variable private but it is just used to make the code easy to read and understand.

E.g :

var EmployeeLeave = (function() {
   var _totalWorkingDays = 31,
   var _CompanyLeaves = 2;

   return {
      WorkingDays : _totalWorkingDays - _CompanyLeaves,
      TotalWorkingDays : _totalWorkingDays
   };
})();
EmployeeLeave.WorkingDays; //gives 29
EmployeeLeave.TotalWorkingDays; //gives 31
EmployeeLeave._totalWorkingDays; // undefined (since it is a private variable)

 Constants can be in Uppercase

In case you have any constants in your code, try to keep the constant name in all uppercase. For e.g

var SITE_ROOT = "https://www.moreonfew.com";

 Prefixing single letter alphabets

It was a practice followed by developers until the recent past to add a single letter alphabet as a prefix to their variable. It was basically done to identify the type of variable. For e.g a string variable would have a prefix of  ” s ” like in sName. But this type of variable convention is not very valid for languages like javascript which are loosely typed. But you may use this concept for global variables. You can name your global variables like gSite_Name. It would become easier to identify global variables on the page this way.

E.g :

//Global Variables
var gSite_Name = "MoreOnFew";

 

Naming a Constructor function

If you are working on object oriented JavaScript, you’ll come across many Constructor functions. Constructor functions are basically used to define an object, its properties and methods. It is a very good practice to keep the first letter of the constructor function in capital as it helps to identify easily that the function is a constructor function. And in case the constructor function name is multi-word you can use CamelCases or seperate the words using an underscore.

E.g

//The function Person is a constructor function
function Person(name,age,gender)
{
   this.name = name;
   this.age = age;
   this.gender = gender;
}

//Creating an instance of the Person Object
var person = new Person('John',27,'Male');

It is always good to follow proper naming convention styles as it helps you and other developers too in various ways.

 

Happy Coding 🙂 !