Standard Casing Conventions

Code's Visual Grammar

In JavaScript, how you name things matters. Consistent naming conventions create a visual grammar that helps you and others understand your code at a glance. Just like a designer uses visual hierarchy to guide a user's eye, a developer uses naming conventions to signal the purpose and scope of different parts of the code. When you can instantly tell a variable from a class, or a configurable constant from a simple value, your code becomes far easier to read and maintain.

One of the simplest yet most impactful practices in programming languages is the use of descriptive naming conventions for variables, functions, and file names.

camelCase for Variables and Functions

The most common convention you'll encounter is camelCase. It's the standard for naming variables and functions. The first word is lowercase, and every subsequent word starts with a capital letter. This convention helps distinguish working variables and functions from other types of constructs in your code.

// A variable holding a reference to a DOM element
const navigationBar = document.querySelector('.main-nav');

// A variable storing a simple string value
let userFirstName = 'Alex';

// A function that performs an action
function toggleMobileMenu() {
  navigationBar.classList.toggle('is-open');
}

PascalCase for Blueprints

When you're defining a blueprint or a template for creating objects, you use PascalCase, also known as UpperCamelCase. Every word, including the first, begins with a capital letter. This applies to constructor functions and, more commonly today, ES6 classes. Seeing PascalCase instantly tells a developer, "This is a blueprint for creating objects."

// A class (blueprint) for creating UI components
class ModalWindow {
  constructor(title, content) {
    this.title = title;
    this.content = content;
    this.isVisible = false;
  }

  show() {
    this.isVisible = true;
    // Logic to render the modal would go here
    console.log(`Showing modal: ${this.title}`);
  }
}

// An instance created from the blueprint (in camelCase)
const confirmationModal = new ModalWindow('Confirm Action', 'Are you sure?');

confirmationModal.show();

Notice the distinction: The class ModalWindow uses PascalCase because it's the blueprint. The object confirmationModal, an instance created from that blueprint, uses camelCase.

SCREAMING_SNAKE_CASE for Constants

For variables that hold values that are truly constant and never change during the program's execution, the convention is SCREAMING_SNAKE_CASE. These are typically configuration values, like API endpoints or fixed settings. All letters are uppercase, with words separated by underscores. This loud casing acts as a clear warning sign: "This value is fundamental and should not be changed."

// The base URL for an API
const API_URL = 'https://api.designservice.com/v2/';

// Brand colors that are used throughout the application
const THEME_COLORS = {
  PRIMARY_BLUE: '#0A74DA',
  ACCENT_ORANGE: '#F56600',
  NEUTRAL_GRAY: '#EAEAEA'
};

// A fixed value for animation timing
const ANIMATION_DURATION_MS = 300;

Convention	Casing Style	Primary Use
camelCase	`firstName`	Variables, functions, object properties
PascalCase	`ModalWindow`	Classes and constructor functions (blueprints)
SCREAMING_SNAKE_CASE	`API_URL`	Global, unchanging constants (configuration)

Quiz Questions 1/5

In JavaScript, which of the following is the most appropriate use for the camelCase naming convention?

Quiz Questions 2/5

A developer writes class UserProfile { ... }. What does the use of PascalCase immediately signal to other developers?

Adopting these conventions makes your code more predictable and professional. It provides a clear visual structure that simplifies collaboration and makes maintenance much easier down the line.

Semantic Naming in JavaScript