JavaScript camelCase or snake case

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 Naming Conventions: Variables

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

var name = 'Robin Wieruch';

var Name = 'Dennis Wieruch';

var NAME = 'Thomas Wieruch';

console.log(name);

// "Robin Wieruch"

console.log(Name);

// "Dennis Wieruch"

console.log(NAME);

// "Thomas Wieruch"

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

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

// bad

var firstname = 'Robin';

// bad

var first_name = 'Robin';

// bad

var FIRSTNAME = 'Robin';

// bad

var FIRST_NAME = 'Robin';

// good

var firstName = 'Robin';

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:

  • camelCase (used in JS)
  • PascalCase (used in JS)
  • snake_case
  • kebab-case

JavaScript Naming Conventions: Boolean

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

// bad

var visible = true;

// good

var isVisible = true;

// bad

var equal = false;

// good

var areEqual = false;

// bad

var encryption = true;

// good

var hasEncryption = true;

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 Naming Conventions: Function

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.

// bad

function name(firstName, lastName) {

return `${firstName} ${lastName}`;

}

// good

function getName(firstName, lastName) {

return `${firstName} ${lastName}`;

}

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.

JavaScript Naming Conventions: Class

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

class SoftwareDeveloper {

constructor(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

}

var me = new SoftwareDeveloper('Robin', 'Wieruch');

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.

JavaScript Naming Conventions: Component

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.

// bad

function userProfile(user) {

return (

<div>

<span>First Name: {user.firstName}</span>

<span>Last Name: {user.lastName}</span>

</div>

);

}

// good

function UserProfile(user) {

return (

<div>

<span>First Name: {user.firstName}</span>

<span>Last Name: {user.lastName}</span>

</div>

);

}

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

<div>

<UserProfile

user={{ firstName: 'Robin', lastName: 'Wieruch' }}

/>

</div>

JavaScript Naming Conventions: Methods

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

class SoftwareDeveloper {

constructor(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

getName() {

return `${this.firstName} ${this.lastName}`;

}

}

var me = new SoftwareDeveloper('Robin', 'Wieruch');

console.log(me.getName());

// "Robin Wieruch"

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.

JavaScript Naming Conventions: Private

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:

class SoftwareDeveloper {

constructor(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

this.name = _getName(firstName, lastName);

}

_getName(firstName, lastName) {

return `${firstName} ${lastName}`;

}

}

var me = new SoftwareDeveloper('Robin', 'Wieruch');

// good

var name = me.name;

console.log(name);

// "Robin Wieruch"

// bad

name = me._getName(me.firstName, me.lastName);

console.log(name);

// "Robin Wieruch"

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

JavaScript Naming Conventions: Constant

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

0

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

1

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.

JavaScript Naming Conventions: Global Variable

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.

  • A global JavaScript variable is declared at the top of a project/file.
  • A global JavaScript variable is written in camelCase if it is mutable.
  • A global JavaScript variable is written in UPPERCASE if it is immutable.

JavaScript Naming Conventions: Underscore

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 ;-)

JavaScript Naming Conventions: Dash

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

2

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

3

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

JavaScript Naming Conventions: Files

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

4

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

// bad

var value = 'Robin';

// bad

var val = 'Robin';

// good

var firstName = 'Robin';

5

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.

Why is camelCase better than snake case?

Results indicate that camel casing leads to higher accuracy among all subjects regardless of training, and those trained in camel casing are able to recognize identifiers in the camel case style faster than identifiers in the underscore style.

When to use camel case in JavaScript?

CamelCase is a way to separate the words in a phrase by making the first letter of each word capitalized and not using spaces. It is commonly used in web URLs, programming and computer naming conventions. It is named after camels because the capital letters resemble the humps on a camel's back.

Should JavaScript variables be camelCase or underscore?

A global JavaScript variable is written in camelCase if it is mutable. A global JavaScript variable is written in UPPERCASE if it is immutable.

What are the best practice naming conventions JavaScript?

JavaScript naming conventions.
Names are case-sensitive, lowercase and uppercase are different..
Start variable names with a letter, use camelCase for names..
Variable names should be self-descriptive, describing the stored value..
Boolean variables are usually prefixed with is or has ..