Indrajith Ekanayake
TL;DR: Follow JavaScript naming conventions for clean, maintainable code: camelCase for variables/functions, PascalCase for classes, UPPER_CASE for constants, prefix booleans with is/has, and use lowercase file names for cross-platform safety.
Clear and consistent naming conventions are the backbone of clean JavaScript code. Whether you’re writing a small script or a large-scale app, standard naming practices improves readability, reduces bugs, and makes collaboration easier.
In this guide, you’ll learn 10 essential JavaScript naming conventions every developer should follow, covering variables, functions, classes constants, and more.
Let’s get started!
1. Naming Convention for Variables
JavaScript variable names are case-sensitive, meaning lowercase and uppercase letters are distinct. For example, dogName, DogName, and DOGNAME are treated as different identifiers, as follows.
var DogName = 'Scooby-Doo'; var dogName = 'Droopy'; var DOGNAME = 'Odie'; console.log(DogName); // "Scooby-Doo" console.log(dogName); // "Droopy" console.log(DOGNAME); // "Odie"
However, the recommended approach is to use camel case for all JavaScript variables. This convention improves readability and helps avoid naming conflicts as shown below.
// bad var dogname = 'Droopy'; // bad var dog_name = 'Droopy'; // bad var DOGNAME = ‘Droopy’; // bad var DOG_NAME = 'Droopy'; // good var dogName = 'Droopy';
Variables names should clearly describe the value they hold. For example, if you need a variable to store a dog’s name, use dogName instead of just Name, it’s more descriptive.
Here’s how you can do it in code:
// bad var d = 'Scooby-Doo'; // bad var name = 'Scooby-Doo'; // good var dogName = 'Scooby-Doo';
2. Naming Convention for Booleans
When naming Boolean variables, use prefixes like is or has to make their purpose clear. For example, if you need a Boolean variable to check whether a dog has an owner, name it hasOwner.
Try this in your code:
// bad var bark = false; // good var isBark = false; // bad var ideal = true; // good var areIdeal = true; // bad var owner = true; // good var hasOwner = true;
3. Naming Convention for Functions
JavaScript function names are case-sensitive, just like variables. The recommended approach is to use camel case when declaring function names.
Additionally, function names should be descriptive and start with a verb to indicate their action. For example, if you create a function to retrieve a name, use getName as the function name.
Refer to the following code example.
// bad
function name(dogName, ownerName) {
return '${dogName} ${ownerName}';
}
// good
function getName(dogName, ownerName) {
return '${dogName} ${ownerName}';
}
4. Naming Convention for Constants
JavaScript constants are also case-sensitive. However, these constants should be written in uppercase, often using underscores to separate words. This makes them easy to identify as values that do not change.
Example:
var LEG = 4; var TAIL = 1; var MOVABLE = LEG + TAIL;
If the variable declaration name contains multiple words, use SCREAMING_SNAKE_CASE (uppercase letters with underscores).
var DAYS_UNTIL_TOMORROW = 1;
All the constants should be defined at the start of your file, method, or class.
5. Naming Convention for Classes
Naming convention rules for JavaScript classes are similar to functions: use descriptive names that clearly explain the class’s purpose or capabilities.
The key difference between function and class names is that we have to use Pascal case (capitalize the first letter of each word) for class names as follows.
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
}
var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');
6. Naming Convention for Components
JavaScript components are widely used in front-end frameworks like React. Although components appear in the DOM, treating them similarly to classes and using Pascal case to define names is recommended.
// bad
function dogCartoon(roles) {
return (
< div >
< span > Dog Name: { roles.dogName } < /span>
< span > Owner Name: { roles.ownerName } < /span>
< /div>
);
}
// good
function DogCartoon(roles) {
return (
< div >
< span > Dog Name: { roles.dogName } < /span>
< span > Owner Name: { roles.ownerName } < /span>
< /div>
);
}
Since the initial letter is always written in uppercase, a component stands out from native HTML and web components when utilized.
<div>
<DogCartoon
roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}
/>
</div>
7. Naming Convention for Methods
Although there are some differences, JavaScript methods are structurally similar to functions. Therefore, the naming rules are the same:
- Use camel case for methods.
- Use verbs as prefixes to make names more meaningful.
Example:
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
getName() {
return '${this.dogName} ${this.ownerName}';
}
}
var cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');
console.log(cartoon.getName());
// "Scooby-Doo Shaggy"
8. Naming Convention for Denoting Private Functions
Underscores ( _ ) are widely used in languages like MySQL and PHP to define variables, functions, and methods. But in JavaScript, an underscore is used to denote private variables or functions.
For example, if you have a private function named toonName, you can denote it as a private function by adding an underscore as a prefix (_toonName).
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
this.name = _toonName(dogName, ownerName);
}
_toonName(dogName, ownerName) {
return `${dogName} ${ownerName}`;
}
}
var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy');
// good
var name = cartoon.name;
console.log(name);
// "Scooby-Doo Shaggy"
// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Scooby-Doo Shaggy"
9. Naming Convention for Global Variables
There are no specific naming standards for global JavaScript variables. However, the recommended approach is:
- Use camel case for mutable global variables.
- Use uppercase for immutable global variables.
10. Naming Convention for File Names
Most web servers such as Apache and Unix are case-sensitive when handling files. For example, flower.jpg and Flower.jpg are treated as different files.
On the other hand, web servers, such as Microsoft’s IIS are case-insensitive. In such servers, Flower.jpg and flower.jpg refer to the same file.
However, if you switch from a case-insensitive server to a case-sensitive one, even a small mismatch in the file name casing can crash your website.
So, it is recommended to use lowercase file names in all servers despite their case-sensitive support.
FAQs
Q1: Should I use camelCase or snake_case in JavaScript?
A: camelCase is standard for variables and functions.
Q2: How do I name constants in ES modules?
A: Use UPPER_CASE with underscores.
Q3: What’s the best way to name async functions?
A: Include action + Async suffix for clarity.
Conclusion
Thanks for reading! Consistent naming isn’t just a style choice, it’s a best practice that ensures maintainable, scalable JavaScript code. By applying these conventions, you’ll write cleaner code, avoid confusion, and make teamwork smoother. Start implementing these rules today and set the foundation for better projects tomorrow.
Looking for a complete UI solution? The Syncfusion®JavaScript suite offers over 145 high-performance, lightweight, modular, and responsive UI components in a single package. Download the free trial and start building better application today.
If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
No spam, just valuable updates.