JavaScript Variable Naming Conventions & Rules

// ALLOWED: letters, digits, underscore, dollar sign
let firstName = "Alice";       // Letters only
let user2 = "Bob";             // Letters and digits
let _privateValue = 42;        // Starts with underscore
let $element = document.body;  // Starts with dollar sign
let café = "latte";            // Unicode letters (accented characters)
let π = 3.14159;               // Unicode symbols (technically valid)
 
// NOT ALLOWED: starting with a digit
// let 2ndPlace = "Silver";    // SyntaxError: Invalid or unexpected token
 
// NOT ALLOWED: hyphens, spaces, or most special characters
// let first-name = "Alice";   // SyntaxError (hyphen treated as minus)
// let first name = "Alice";   // SyntaxError (space breaks identifier)
// let my@var = 5;             // SyntaxError (@ is not allowed)

// These are all SyntaxErrors:
// let class = "Math";
// let return = true;
// let function = "add";
// let if = false;
// let const = 5;
 
// Common reserved words to avoid:
// break, case, catch, class, const, continue, debugger, default,
// delete, do, else, export, extends, finally, for, function, if,
// import, in, instanceof, let, new, return, static, super, switch,
// this, throw, try, typeof, var, void, while, with, yield

// Variables: camelCase
let currentUser = null;
let isAuthenticated = false;
let shoppingCartTotal = 0;
let maxRetryCount = 3;
 
// Functions: camelCase
function calculateShippingCost(weight, distance) {
  return weight * 0.5 + distance * 0.1;
}
 
function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}
 
// Event handlers: camelCase with "handle" or "on" prefix
function handleSubmitClick(event) {
  event.preventDefault();
}
 
function onUserLogin(credentials) {
  // process login
}

// True constants: values that never change
const MAX_FILE_SIZE_BYTES = 5242880;  // 5 MB
const API_BASE_URL = "https://api.example.com/v2";
const HTTP_STATUS_OK = 200;
const DEFAULT_TIMEOUT_MS = 30000;
const TAX_RATE = 0.08;
 
// NOT constants (even though declared with const):
// These are computed at runtime or change between runs
const currentDate = new Date();          // Use camelCase: runtime value
const userSettings = getUserSettings();  // Use camelCase: runtime value
const randomId = Math.random();          // Use camelCase: different each time

// Classes: PascalCase
class ShoppingCart {
  constructor() {
    this.items = [];
  }
 
  addItem(product) {
    this.items.push(product);
  }
 
  getTotal() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}
 
// Constructor functions (older pattern): PascalCase
function DatabaseConnection(host, port) {
  this.host = host;
  this.port = port;
}
 
// React components: PascalCase
function UserProfile({ name, email }) {
  return `<div>${name} (${email})</div>`;
}

// BAD: vague, single-letter, or abbreviated names
let d = new Date();
let arr = [1, 2, 3];
let temp = getUserData();
let n = items.length;
 
// GOOD: descriptive names that explain what the variable holds
let registrationDate = new Date();
let studentScores = [1, 2, 3];
let currentUserProfile = getUserData();
let totalItemCount = items.length;

// Clear boolean naming
let isVisible = true;
let hasPermission = false;
let canEdit = user.role === "admin";
let shouldAutoSave = preferences.autoSave;
let wasSuccessful = response.status === 200;
 
// BAD: ambiguous boolean names
let visible = true;    // Is this a boolean or a CSS value?
let permission = false; // Is this a string, object, or boolean?
let edit = true;        // Is this a function or a flag?

// Functions do things: use verbs
function fetchUserProfile(userId) { /* ... */ }
function calculateDiscount(total, code) { /* ... */ }
function validateEmailAddress(email) { /* ... */ }
function formatPhoneNumber(raw) { /* ... */ }
function parseCSVRow(line) { /* ... */ }
 
// getters return a value
function getFullName(user) {
  return `${user.firstName} ${user.lastName}`;
}
 
// checkers return a boolean
function isExpired(token) {
  return Date.now() > token.expiresAt;
}

// Singular for individual items
const user = { name: "Alice", age: 28 };
const product = { id: 1, title: "Keyboard" };
 
// Plural for collections (arrays, sets, maps)
const users = [user1, user2, user3];
const products = productCatalog.getAll();
const selectedIds = new Set([1, 5, 12]);
 
// Loop variables use singular of the collection name
for (const user of users) {
  console.log(user.name);
}
 
products.forEach(product => {
  console.log(product.title);
});

// ANTI-PATTERN 1: Single-letter names (except loop counters)
let x = getUser();     // What is x?
let d = new Date();    // d could be anything
// Acceptable: for (let i = 0; i < 10; i++) { ... }
 
// ANTI-PATTERN 2: Generic names that say nothing
let data = fetchFromAPI();     // What kind of data?
let info = processResults();   // What info specifically?
let stuff = getPageContent();  // Completely meaningless
// Better: let userProfile = fetchFromAPI();
 
// ANTI-PATTERN 3: Names that lie about the type
let isReady = "almost";        // Name implies boolean, value is string
let userCount = "seventeen";   // Name implies number, value is string
let userList = { a: 1, b: 2 }; // Name implies array, value is object
 
// ANTI-PATTERN 4: Inconsistent naming in the same file
let user_name = "Alice";       // snake_case
let userAge = 28;              // camelCase
let UserRole = "admin";        // PascalCase for a regular variable
// Pick one convention (camelCase) and stick with it
 
// ANTI-PATTERN 5: Meaningless number suffixes
let temp1 = getWidth();
let temp2 = getHeight();
let temp3 = getDepth();
// Better: let width, height, depth