Speak the Same Language: A Guide to Naming Conventions

When you join a new project, you can often tell how healthy the codebase is by how consistent it is. If everything follows a predictable pattern, it's easy to get your bearings. If it's a chaotic mix of different styles, you have to waste mental energy just to figure out what you're looking at.

Naming conventions are the bedrock of this consistency. They are a set of rules for naming things, and following them makes your code feel familiar and predictable to any developer who knows the language. It's like a shared dialect that helps the whole team communicate effectively.

Let's look at the most common conventions in the JavaScript and TypeScript world.

The Standard Casings

Most conventions boil down to a few standard "casings."

  • camelCase: Starts with a lowercase letter, with each subsequent word capitalized. Used for variables and functions.
  • PascalCase: Every word is capitalized, including the first. Used for classes, interfaces, types, and enums.
  • UPPER_SNAKE_CASE: All uppercase, with words separated by underscores. Used for constant values that are hard-coded and widely used, like environment variables or action types.

Putting It Into Practice

Let's see how these conventions clean up a messy piece of code.

// 👎 Bad: A chaotic mix of styles
const user_name = 'sandra_adams';
const UserAge = 32;
const aPI_kEY = "key_12345";

class user_profile {
  // ...
}

function CreateNewUser(data) {
  // ...
}

This code is confusing. UserAge looks like a class, user_profile looks like a variable, and CreateNewUser is styled like a constructor. A developer reading this has to pause and figure out what each identifier represents.

Now, let's apply the standard conventions.

// 👍 Good: Predictable and clear
const userName = 'sandra_adams';
const userAge = 32;
const API_KEY = "key_12345";

class UserProfile {
  // ...
}

function createNewUser(data) {
  // ...
}

Ah, much better! Just by looking at the casing, we can instantly infer the nature of each identifier:

  • userName and userAge are clearly variables (camelCase).
  • API_KEY is a constant (UPPER_SNAKE_CASE).
  • UserProfile is a class (PascalCase).
  • createNewUser is a function (camelCase).

This isn't just about looking pretty; it's about reducing cognitive load. You're giving other developers (and your future self) visual cues that make the code easier to scan and understand.

Interfaces, Types, and Enums

In TypeScript, the PascalCase convention extends to all type-level definitions.

// 👍 Good: PascalCase for all type definitions
interface User {
  id: string;
  name: string;
}

type UserPermissions = {
  canPost: boolean;
  canComment: boolean;
};

enum UserRole {
  Admin = 'ADMIN',
  Member = 'MEMBER',
}

This consistency helps you immediately distinguish between values (like a variable user) and types (like the User interface).

The Ultimate Goal: Effortless Consistency

Arguing about naming conventions is a waste of time. The best teams don't just agree on these rules; they automate them. By configuring a linter like ESLint with standard style guides (like the popular Airbnb or StandardJS guides), you can make consistency automatic.

Your linter will flag any names that violate the convention, and it can often fix them for you. This frees up your brainpower to focus on what the code actually does, not what it looks like.