JavaScript Naming Conventions - Robin Wieruch

A JavaScript naming conventions introduction by example — which gives you the common sense when it comes to naming variables, functions, classes or components in JavaScript. No one is enforcing these naming convention rules, however, they are widely accepted as a standard in the JS community.

JavaScript variables are case sensitive . Therefore, JavaScript variables with lowercase and uppercase characters are different:

A JavaScript variable should be self-descriptive . It shouldn’t be necessary to add a comment for additional documentation to the variable:

Most often you will find JavaScript variables declared with a camelCase variable name with a leading lowercase character:

There are exceptions for JavaScript constants, privates, and classes/components — which we will explore later. However, in general a JavaScript variable — a string, boolean or number, but also an object, array or function — is declared with a camelCase variable name.

A brief overview about the different case styles:

A prefix like is , are , or has helps every JavaScript developer to distinguish a boolean from another variable by just looking at it:

In contrast to strings and integers, you can see it as another soft rule for a JavaScript boolean naming convention besides being written in camel case.

JavaScript functions are written in camel case too. In addition, it’s a best practice to actually tell what the function is doing by giving the function name a verb as prefix.

This verb as prefix can be anything (e.g. get , fetch , push , apply , calculate , compute , post ). It’s yet another soft rule to consider for having more self-descriptive JavaScript variables.

A JavaScript class is declared with a PascalCase in contrast to other JavaScript data structures:

Every time a JavaScript constructor is called to instantiate a new instance of a class, the name of the class should appear in Pascal Case, because the class has been declared with Pascal Case in the first place.

Components are not everywhere in JavaScript, but commonly found in frontend frameworks like React . Since a component is kinda instantiated — but appended to the DOM instead — like a JavaScript class, they are widely declared with Pascal Case too.

When a component gets used, it distinguishes itself from native HTML and web components , because its first letter is always written in uppercase.

Identical to JavaScript functions, a method on a JavaScript class is declared with camelCase:

Here the same rules as for JavaScript functions apply — e.g. adding a verb as a prefix —, for making the method name more self-descriptive.

Rarely you will find an underscore (_) in front of a variable/function/method in JavaScript. If you see one, it is intended to be private . Even though it cannot be really enforced by JavaScript, declaring something as private tells us about how it should be used or how it should not be used.

For instance, a private method in a class should only be used internally by the class, but should be avoided to be used on the instance of the class:

A private variable/function can occur in a JavaScript file as well. This could mean that the variable/function shouldn’t be used outside of this file but only internally to compute further business logic for other functions within the same file..

Last but not least, there are constants — intended to be non-changing variables — in JavaScript which are written in capital letters (UPPERCASE):

If a variable has more than one word in its variable declaration name, it makes use of an underscore (_):

Usually JavaScript constants are defined at the top of a JavaScript file. As hinted before, no one enforces one to not change the variable here, except a const declaration of the variable for primitive data structures , but it’s capitalized naming suggests avoiding it.

A JavaScript variable is globally defined, if all its context has access to it. Often the context is defined by the JavaScript file where the variable is declared/defined in, but in smaller JavaScript projects it may be the entire project. There are no special naming conventions for global JavaScript variables.

So what about the underscore and dash in JavaScript variable namings? Since camelCase and PascalCase are primarily considered in JS, you have seen that the underscore is only rarely used for private variables or constants. Occasionally you will find underscores when getting information from third-parties like databases or APIs . Another scenario where you might see an underscore are unused function parameters, but don’t worry about these yet if you haven’t seen them out there ;-)

A dash in a JavaScript variable isn’t common sense as well. It just makes things more difficult; like using them in an object:

It’s even not possible to use a dash directly for a variable declaration:

That’s why it’s better to avoid them.

There are two strategies of naming files in JavaScript: PascalCase and kebab-case. In JavaScript frontend applications, you will often see PascalCase for naming components (e.g. React components).

In contrast, in JavaScript backend application, kebab-case is the common sense:

You will also see camelCase namings, but similar to PascalCase (sorry frontend applications), there is a risk that operating systems are handling them differently which may lead to bugs. That’s why sticking to kebab-case should be the norm for file names in JavaScript.

If you want to learn more about JavaScript code style and formatting, which isn’t discussed here for the sake of naming conventions, you should definitely check out ESLint and Prettier for JavaScript.