Indrajith Ekanayake
TL;DR: Use camelCase for variables/functions, PascalCase for classes, UPPER_CASE for constants, prefix booleans with is/has, keep file names lowercase for cross-platform safety, and add # to private class methods for encapsulation.
Why does naming convention matter?
Consistent naming is the backbone of clean JavaScript code. It makes your code readable, maintainable, and self-explanatory, without relying on comments. Clear naming accelerates reviews, minimizes bugs, and enhances collaboration. Poor naming does the opposite: it is harder to read, slower to review, and more costly to maintain.
What makes a naming convention recommended?
A good naming convention is:
- Widely adopted across projects and frameworks.
- Easy to understand and enforce.
- Stable over time, not a passing trend.
The naming conventions in this guide have been proven in real-world JavaScript projects, across various browsers, Node.js, and modern frameworks. They are supported by linters and style guides.
Ready to write cleaner, professional JavaScript code? Discover the top 10 naming conventions every developer should follow!
1. Naming convention for variables
Use camelCase for variable names. We should start with a lowercase letter and capitalize the first letter of each subsequent word. 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.
let DogName = 'Scooby-Doo';
let dogName = 'Droopy';
let DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"
Clear variable names reduce the need for comments and make intent obvious.
// bad
let dogname = 'Droopy';
// bad
let dog_name = 'Droopy';
// bad
let DOGNAME = ‘Droopy’;
// bad
let DOG_NAME = 'Droopy';
// good
let dogName = 'Droopy';
Variable 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.
// bad
let d = 'Scooby-Doo';
// bad
let name = 'Scooby-Doo';
// good
let dogName = 'Scooby-Doo';
2. Naming convention for Booleans
When naming Boolean variables, use prefixes such as is, has, or can to make their purpose clear. These prefixes instantly tell you that the variable holds a true or false value, even before you read the logic.
Use is to describe the current state of something.
Example: isLoading, isVisible, isComplete.
Use has to indicate whether something exists or is present.
Example: hasOwner, hasError, hasChildren.
Use can to check whether an action is allowed or possible.
Example: canEdit, canDelete, canView.
If you need a Boolean variable to check whether a dog has an owner, name it hasOwner as mentioned in the code example below.
// bad
let loading = false;
// good
let isLoading = false;
// bad
let owner = true;
// good
let hasOwner = true;
// bad
let edit = true;
// good
let canEdit = 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 should 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.
// 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. We can create them using the const keyword. These are values that cannot be reassigned after creation. Constants should be written in uppercase, often using underscores to separate words. This makes them easy to identify as values that do not change.
const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;
If the variable declaration name contains multiple words, use SCREAMING_SNAKE_CASE (uppercase letters with underscores).
const 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 must use Pascal case for class names by capitalizing the first letter of each word.
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
}
const cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');
6. Naming convention for components
In frameworks such as React, component names must use PascalCase. This allows the framework to distinguish custom components from built-in HTML elements.
// 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, the structure of a JavaScript function and a method is pretty similar. So, naming convention rules are the same.
We must use camel case to declare JavaScript methods and use verbs as prefixes to make names more meaningful.
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
getName() {
return '${this.dogName} ${this.ownerName}';
}
}
const dogCartoon= new DogCartoon('Scooby-Doo', 'Shaggy');
console.log(dogCartoon.getName());
// "Scooby-Doo Shaggy"
8. Naming convention for denoting private functions
Modern JavaScript provides built‑in support for private methods using the # prefix. Private methods are accessible only within the class where they are defined and cannot be called from outside.
For example, if you have a private function name like toonName, you can denote it as a private function by adding a # as a prefix (#toonName).
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
this.name = this.#toonName (dogName, ownerName);
}
// Define a PRIVATE method - only accessible inside this class #toonName (dogName, ownerName) {
return `${dogName} ${ownerName}`;
}
}
const dogCartoon = new DogCartoon('Scooby-Doo', 'Shaggy');
// good
// Read the public 'name' property from the objectlet name = dogCartoon.name;
console.log(name);
// "Scooby-Doo Shaggy"
// bad
console.log(dogCartoon.#toonName (‘Scooby-Doo', 'Shaggy'));
// SyntaxError: Private field '#toonName' must be declared in an enclosing class
9. Naming convention for global variables
For global JavaScript variables, there are no specific naming standards.
It is recommended to use camel case for mutable global variables and uppercase for immutable global variables. Global variables should generally be avoided. When they are necessary, group them under a single namespace object to prevent conflicts.
10. Naming convention for file names
Most web servers (Apache, Unix) are case-sensitive when handling files. For example, flower.jpg isn’t the same as Flower.jpg.
On the other hand, web servers, such as Microsoft’s IIS, do not care about the case. In such servers, you can use Flower.jpg or flower.jpg to access Flower.jpg.
However, if you switch from a case-insensitive server to a case-sensitive server, even a tiny mistake can cause your website to crash.
It is recommended to use lowercase file names on all servers, regardless of their case-sensitivity.
// Not recommended
UserProfile.jsx
Main.JS
// Recommended
index.html
main.js
user-profile.jsx
Frequently Asked Questions
Should I use camelCase or snake_case in JavaScript?
camelCase is standard for variables and functions.
How do I name constants in ES modules?
Use UPPER_CASE with underscores.
What’s the best way to name async functions?
Include action + Async suffix for clarity.
Should I use var, let, or const?
Use const by default, let when reassignment is needed, and avoid var in modern code.
Why are JavaScript variables case-sensitive?
JavaScript treats uppercase and lowercase letters as different identifiers.
Why should file names be lowercased?
Lowercase file names prevent deployment issues on case-sensitive servers.
Why should JavaScript variables use camelCase?
CamelCase improves readability, reduces naming conflicts, and is the widely recommended convention in JavaScript style guides. It avoids issues with underscores or all-uppercase names that can confuse developers or clash with constants.
What is the difference between camelCase and PascalCase in JavaScript?
camelCase starts with lowercase (e.g., myVariable, getUserData) and is used for variables, functions, and methods. PascalCase starts with uppercase (e.g., UserProfile, DogCartoon) and is used for classes, constructors, and React components.
When should I use PascalCase in JavaScript?
PascalCase is used for classes, constructor functions, and React components. It signals that the thing is a type or component.
How should I name Boolean variables?
Boolean variables should read like yes/no questions, using prefixes such as is, has, or can (e.g., isLoading, hasAccess, canDelete). Avoid vague or negated names.
Should file names in JavaScript projects be lowercased?
Yes, always use lowercase file names (e.g., dog-cartoon.js instead of DogCartoon.js). This prevents problems when deploying to case-sensitive servers (such as Linux/Apache) after developing on case-insensitive systems (such as Windows).
Why avoid single-letter or vague variable names in JavaScript?
Single-letter names like ‘d’ or ‘x’ (except in short loops like ‘i’ for index) reduce readability and make debugging harder. Vague names like ‘name’ or ‘data’ don’t describe the purpose. Always use descriptive names, such as userFullName or totalCartItems, to make code self-documenting.
Wrapping up
Thanks for reading! Consistent naming conventions create JavaScript code that is easier to read, share, and maintain over time. These practices are stable, widely adopted, and independent of frameworks or tooling trends. Applying them consistently builds trust in your codebase and supports sustainable development as projects grow.
For teams building large JavaScript applications, UI frameworks such as Syncfusion’s JavaScript suite offer pre-built components that help maintain consistency, performance, and accessibility at scale. With over 145 high-performance, lightweight, modular, and responsive UI components in a single package, you can download a free trial and evaluate the controls today.
If you have any questions or comments, please don’t hesitate to contact us through our support forums, support portal, or feedback portal. Our team is available and ready to assist you.
No spam, just valuable updates.