camelCase vs PascalCase vs snake_case — The Complete Developer Decision Guide

#webdev #javascript #programming #python

Naming conventions are one of those things every developer knows exists - but gets wrong more often than they should. Here is a definitive reference.

The Complete Map

Format Example Use In
──────────────────────────────────────────────────
camelCase userFirstName JS/TS variables, functions, JSON keys
PascalCase UserFirstName Classes, React components, TS interfaces
snake_case user_first_name Python, SQL columns, file names
SCREAMING_SNAKE USER_FIRST_NAME Constants, env variables
kebab-case user-first-name URLs, CSS classes, HTML attributes
Proper Case User First Name Navigation, product names, table headers
Title Case User First Name Blog titles (excludes prepositions)

The Most Common Mistakes

Mistake 1: Using PascalCase for JavaScript variables

// Wrong — this is PascalCase
const UserFirstName = "John"; // ❌

// Correct — camelCase for variables
const userFirstName = "John"; // ✅

Mistake 2: Using snake_case in URLs

/user_guide  → Google reads as one word "user_guide" ❌
/user-guide  → Google reads as "user" + "guide"      ✅

Mistake 3: Using camelCase for Python

# Wrong in Python
def getUserName():  # ❌ violates PEP 8

# Correct in Python
def get_user_name():  # ✅ snake_case per PEP 8

Converting Between Formats in JavaScript

// camelCase → snake_case
const toSnake = (s: string) =>
  s.replace(/[A-Z]/g, c => `_${c.toLowerCase()}`);

// snake_case → camelCase
const toCamel = (s: string) =>
  s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());

// Any text → camelCase
const fromText = (s: string) =>
  s.toLowerCase().split(/\s+/)
   .map((w, i) => i === 0 ? w : w[0].toUpperCase() + w.slice(1))
   .join('');

fromText("user first name"); // → "userFirstName"
fromText("get user profile"); // → "getUserProfile"