Naming Variables, Functions and Classes in JavaScript
Tags: javascript, react, webdev, codenewbie
Published: 2021-08-27 15:18:08


### 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](https://google.github.io/styleguide/jsguide.html) and [Airbnb](https://github.com/airbnb/javascript). 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.

![Dynamic Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xr1dcel9nrdix2a32ji.png)

- **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.

![Constant Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j0pxfyab8z4d9berelj.png)

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

![Constant Variables with longer names](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0anan8u6czfn9wapeii.png)

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

![Functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsfbcahihlu8v0dv7s2i.png)

### Naming Classes
The class names are preferred to be defined using the *Pascal Case* style.

![Classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoydrhg4ikx0ze0g6kc8.png)

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

![React Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzwkxga5dwbfrd8o4qzo.png)

### Naming exported node modules (Node.js)
It is preferred to use *Lower Camel Case* for naming the exported node module names.

![Nodejs modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iq0cyjiosdovf4m1o52.png)

### 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.

![Valid and Invalid Variable Names](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w2ruibiflsyd2m3fn6m.png)

### Summary
Let us summarize the items we have learned so far.

![Summary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4yif319nox0j6sp6lhr.png)

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

<a href="https://www.buymeacoffee.com/SyedAfrozPasha"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=SyedAfrozPasha&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>

Connect with me on [LinkedIn](https://www.linkedin.com/in/syedafrozpasha/), [Twitter](https://twitter.com/SyedAfroz_Pasha), and [GitHub](https://github.com/SyedAfrozPasha).