Naming Variables, Functions and Classes in JavaScript

Introduction

Proper naming of variables and functions is very important. This makes your code more readable and easier to debug. In this article, I have consolidated some of the best practices from the styles guides such as Google and Airbnb. Most of the popular JavaScript frameworks and libraries follow these best practices.

Before we get started, here is what you need to know first.

There are different case styles used across different programming languages to name the variables. Let us discuss some of the case styles.

• Camel Case: It is the practice of writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter, and the first word starting with lower case. Example: pageCount
• Pascal Case: It is very similar to the camel case, but the first letter starts with Upper case. Example: PageCount
• Snake Case: Here we separate the words using underscore (_) and the words can be either in lower or upper case. Example: page_count or PAGE_COUNT

Now that we have learned different case styles, let us go through in detail on how to name a variable, functions and classes in JavaScript.

Naming Variables

Variables in JavaScript can be of two types:

• Dynamic Variables: whose value keeps on changing. let is used to define the dynamic variables with primitive values (such as strings, boolean and numbers, etc.). And we also use const to define the dynamic variables with non-primitive values (such as objects and arrays). It is preferred to use Lower Camel Case for naming the dynamic variables.

• Constant Variables: whose value remains constant and doesn’t change. const is used to define the constant variables. It is preferred to use Upper Case for naming the constant variables.

• If the constant variables name has more than one word, then it is recommended to define it using the Upper Snake Case style.

Naming Functions

The function names are also preferred to be defined using the Lower Camel Case style.

Naming Classes

The class names are preferred to be defined using the Pascal Case style.

Naming React Components

React components (both class and functional components) are usually named in the Pascal case.

Naming exported node modules (Node.js)

It is preferred to use Lower Camel Case for naming the exported node module names.

Do and don’t while naming a variable

• Variable names should start with either a letter, underscore (_), or a dollar sign ($).
• Variable names cannot start with numbers or any special character other than underscore or dollar sign.
• Variable names can have numbers, but not at the beginning of the name (first letter).
• Variable names cannot have spaces.
• Don’t use any of JavaScript’s reserved keywords such as (const, for, if, function, etc.)
• Use meaningful names like userName or ShoppingList and avoid ambiguous names/abbreviations.
• Names should specify what value it is holding (like orderNumber or employeeName) in case of variables.
• Names should specify what action it is doing (like getStudentDetail or updateCartItems) in case of functions.

Summary

Let us summarize the items we have learned so far.

Thank you for stopping by. If you like the content do support me and follow me for more content like this.

Connect with me on LinkedIn, Twitter, and GitHub.