JavaScript Naming Conventions: Variables, Functions, Classes & More

JavaScript's naming conventions are not enforced by the language itself, but they are universally followed in the ecosystem. This guide covers what every JavaScript and TypeScript developer should know.

Variables and Functions: camelCase

Variables, functions, and method names use camelCase — the first word is lowercase, subsequent words are capitalized:

const userName = "Alice";
let totalPrice = 0;

function getUserById(id) { /* ... */ }
const calculateShipping = (weight) => weight * 2.5;

Classes and Components: PascalCase

Classes, React components, and constructor functions use PascalCase:

class UserAccount { /* ... */ }
class HttpClient { /* ... */ }

// React components
function UserProfile({ name }) { /* ... */ }
const ShoppingCart = () => { /* ... */ };

Constants: SCREAMING_SNAKE_CASE

True constants — values that never change and are known at compile time — use uppercase with underscores:

const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_PAGE_SIZE = 20;

Note: not every const variable is a "constant" in this sense. const user = getUser() is a regular variable — use camelCase.

Boolean Variables

Prefix booleans with is, has, can, should for clarity:

const isLoading = true;
const hasPermission = false;
const canEdit = user.role === "admin";
const shouldRedirect = !isAuthenticated;

Private Fields

Modern JavaScript uses the # prefix for truly private class fields. The older underscore convention (_name) is still common in libraries:

class User {
  #password;
  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }
}

File Names

Type	Convention	Example
React component	PascalCase	UserProfile.tsx
Utility module	camelCase	dateUtils.ts
Config file	kebab-case	eslint-config.js
Test file	Match source	UserProfile.test.tsx
CSS module	PascalCase or kebab	UserProfile.module.css

TypeScript Specifics

• Interfaces: PascalCase, no I prefix. UserProps, not IUserProps.
• Type aliases: PascalCase. type ApiResponse = { ... }
• Enums: PascalCase for the enum, PascalCase for members. enum Color { Red, Green, Blue }
• Generics: Single uppercase letter. T, K, V

Event Handlers in React

Prefix event handler functions with handle, and props with on:

// Props: onSubmit, onClick, onChange
// Handlers: handleSubmit, handleClick, handleChange
<Button onClick={handleSubmit} />

Convert to JavaScript Conventions

Working with a Python API that returns snake_case? Use our camelCase converter to transform keys. Need to name a React component? Try the PascalCase converter. Compare all formats in the case converter hub.