A Comprehensive Guide to Naming Conventions in JavaScript

In this guide, we will delve deeper into best practices for naming conventions in JavaScript, providing a more thorough explanation and additional examples to help you create clear and concise code.

Choosing the right naming conventions for variables, functions, classes, and other elements is vital when writing clean, maintainable, and easily understandable JavaScript code.

Naming Convention for Variables

JavaScript variables should be declared using camel case, which means that the first word in the variable name starts with a lowercase letter, and subsequent words start with an uppercase letter. This convention ensures that there aren’t multiple variables with the same name, which could lead to confusion and errors.

The names should also be self-explanatory and describe the stored value, making it easier for others to understand the purpose of the variable without the need for additional comments.

Example:

// good
var dogName = 'Droopy';
var dogBreed = 'Beagle';
var dogAge = 3;

Naming Convention for Booleans

Boolean variables should use “is” or “has” as prefixes, making it clear that they represent a true or false condition.

Example:

// good
var hasOwner = true;
var isTrained = false;
var hasVaccinations = true;

Naming Convention for Functions

JavaScript function names should be in camel case and use descriptive nouns and verbs as prefixes. This makes it clear what the function does and what kind of value it returns.

Example:

// good
function getName(dogName, ownerName) {
  return `${dogName} ${ownerName}`;
}

// good
function calculateDogAgeInHumanYears(dogAge) {
  return dogAge * 7;
}

Naming Convention for Constants

Constants, which are non-changing variables, should be written in uppercase. If the name contains more than one word, use UPPER_SNAKE_CASE (uppercase letters with underscores between words).

Example:

const DAYS_IN_WEEK = 7;
const MONTHS_IN_YEAR = 12;
const MAX_DOG_WEIGHT = 150;

Naming Convention for Classes

Class names should follow Pascal case, which means that each word in the name starts with an uppercase letter. This helps differentiate classes from other JavaScript elements.

Example:

class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
  }
}

class DogBreed {
  constructor(breedName, breedSize) {
    this.breedName = breedName;
    this.breedSize = breedSize;
  }
}

Naming Convention for Components

Component names should be in Pascal case, treating them similarly to classes. This ensures that components stand out from native HTML and web components when used in the DOM.

Example:

function DogCartoon(roles) {
  return (
    <div>
      <span>Dog Name: {roles.dogName}</span>
      <span>Owner Name: {roles.ownerName}</span>
    </div>
  );
}

function DogBreedInformation(props) {
  return (
    <div>
      <span>Breed Name: {props.breedName}</span>
      <span>Breed Size: {props.breedSize}</span>
    </div>
  );
}

Naming Convention for Methods

JavaScript method names should follow the same rules as functions: camel case with verbs as prefixes. This makes the method’s purpose clear and easy to understand.

class DogCartoon {
  constructor(dogName, ownerName) {
   this.dogName = dogName;
   this.ownerName = ownerName;
}

getName() {
  return ${this.dogName} ${this.ownerName};
}

class DogBreed {
  constructor(breedName, breedSize) {
  this.breedName = breedName;
  this.breedSize = breedSize;
}

getBreedDetails() {
  return The ${this.breedName} is a ${this.breedSize} sized breed.;
}

Naming Convention for Denoting Private Functions

Use an underscore ( _ ) as a prefix to denote private variables or functions. This helps developers understand that these elements should not be accessed directly outside the class or object they belong to.

Example:

class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
    this.name = _toonName(dogName, ownerName);
  }
  _toonName(dogName, ownerName) {
    return `${dogName} ${ownerName}`;
  }
}

Naming Convention for Global Variables

For global variables, it is recommended to use camel case for mutable (changeable) global variables and uppercase for immutable (non-changeable) global variables. This helps distinguish their purpose and behavior in the code.

Example:

var globalCounter = 0;
const GLOBAL_MAX_COUNT = 100;

Naming Convention for File Names

Use lowercase file names to avoid potential issues when switching between case-sensitive and case-insensitive servers. Consistency in file naming conventions ensures that your codebase remains organized and easy to navigate.

Example:

dog-cartoon.js
dog-breed-information.js

In Conclusion:

By following these naming conventions, your JavaScript code will be more readable, maintainable, and understandable. Consistency is essential; adhere to these guidelines throughout your project to ensure a cohesive and easily navigable codebase. Adopting good naming conventions from the start of your project will save you time and effort in the long run, making your code more robust and less prone to errors.

Do you or your team use different naming conventions for your project? Let me know in the comments below!