Naming Conventions in JavaScript

Imagine a school where every student is called "Student". The teacher shouts "Student, come here!" and 40 children stand up. Total confusion!

Good names make things easy to find and understand. The same is true in programming. Every variable, function, and class you create needs a name, and a good name tells the reader what it is and what it does.

Naming conventions are the common styles that JavaScript developers follow when giving names, so that everyone's code looks clean and familiar.

Rules vs Conventions

There are two things to know:

Think of it like traffic:

• Rules are like a red signal. If you break it, you get a fine.
• Conventions are like driving politely. Nobody fines you, but everyone is happier when you do.

Part 1: Naming Rules (Must Follow)

1. Allowed characters

A name can have letters, numbers, underscore _, and dollar sign $.

let userName = "Amit";    ✅
let user_2 = "Neha";      ✅
let $price = 100;         ✅
let _count = 5;           ✅

2. Cannot start with a number

let 1stPlace = "Gold";    ❌ SyntaxError
let firstPlace = "Gold";  ✅

3. No spaces or special symbols

let user name = "Amit";   ❌ (space)
let user-name = "Amit";   ❌ (hyphen means minus!)
let user@name = "Amit";   ❌ (special symbol)
let userName = "Amit";    ✅

4. Case-sensitive

Capital and small letters are treated as different names.

let city = "Delhi";
let City = "Mumbai";
let CITY = "Kolkata";

// These are 3 different variables!

5. Cannot use reserved words

JavaScript already uses some words for its own work. You cannot use them as names.

let let = 5;        ❌
let if = 10;        ❌
let function = 3;   ❌

Some common reserved words:let, const, var, if, else, for, while, function, return, class, new, true, false, null, typeof, switch, break, this

Part 2: Naming Styles (Cases)

Developers join multiple words into one name in different styles. Here are the most common ones:

camelCase: for variables and functions

Start with a small letter, then make the first letter of each new word capital, like the humps of a camel 🐫.

let firstName = "Priya";
let totalMarks = 450;
let isLoggedIn = true;

function calculateTax() { }
function sendMessage() { }

This is the most used style in JavaScript.

PascalCase: for classes

Every word starts with a capital letter, including the first one.

class BankAccount { }
class ShoppingCart { }
class StudentReport { }

When you see a name starting with a capital letter, you know it is a class.

UPPER_SNAKE_CASE: for fixed constants

All capital letters, with words joined by underscores. Used for values that are fixed and never change, like settings or limits.

const GST_RATE = 0.18;
const MAX_LOGIN_ATTEMPTS = 3;
const PI = 3.14159;

Key point: Not every const needs capital letters. Use this style only for truly fixed values that are known before the program runs.

const MAX_USERS = 100;                  // ✅ fixed setting
const today = new Date();               // ✅ camelCase (value is calculated)
const cart = ["Shoes", "Watch"];        // ✅ camelCase

kebab-case: for file names

Words joined with hyphens. It cannot be used for variables, because JavaScript reads - as minus. It is commonly used for file and folder names.

user-profile.js
shopping-cart.js
order-history/

Part 3: Best Practices for Good Names

1. Use meaningful names

The name should clearly explain what is stored.

// ❌ Bad
let x = 25;
let d = 7;

// ✅ Good
let studentAge = 25;
let daysInWeek = 7;

2. Avoid unclear short forms

// ❌ Hard to understand
let usrNm = "Ravi";
let ttlAmt = 500;

// ✅ Clear
let userName = "Ravi";
let totalAmount = 500;

Common and well-known short forms are fine, for example id, url, html, api, max, and min.

3. Booleans: start with is, has, can, or should

Boolean names should read like a yes/no question.

let isAdult = true;
let hasPaid = false;
let canVote = true;
let shouldShowPopup = false;

Read it aloud: "Is adult? Yes." It makes perfect sense!

4. Functions: start with an action word (verb)

Functions do something, so their names should start with a verb.

function getUserName() { }
function calculateTotal() { }
function sendOtp() { }
function validateEmail() { }

5. Arrays: use plural names

An array holds many items, so use a plural name.

let students = ["Anu", "Bala", "Chetan"];
let prices = [100, 200, 300];
let orders = [];

And inside a loop, use the singular name for one item:

for (let student of students) {
  console.log(student);
}

6. Be consistent

Choose one word and stick to it across your project.

// ❌ Confusing: three words for the same thing
getUser();
fetchCustomer();
retrieveClient();

// ✅ Consistent
getUser();
getOrder();
getProduct();

7. Not too short, not too long

// ❌ Too short
let n = "Rahul";

// ❌ Too long
let theNameOfTheUserWhoIsCurrentlyLoggedIn = "Rahul";

// ✅ Just right
let currentUserName = "Rahul";

Note: Very short names like i, j, and k are okay for loop counters. Every developer understands them.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

8. Private values start with # (or _ in older code)

Inside classes, values that should not be used from outside are marked as private.

class BankAccount {
  #balance = 0;       // truly private (modern way)
  _pin = 1234;        // "please don't touch" (old convention)
}

We will learn more about this in the Classes lesson.

Quick Summary Table

Key Takeaways

• Rules must be followed: no starting with a number, no spaces, no reserved words, and names are case-sensitive.
• Use camelCase for variables and functions, PascalCase for classes, and UPPER_SNAKE_CASE for fixed constants.
• Give meaningful names that clearly tell what is stored or what is done.
• Start booleans with is, has, or can, start functions with a verb, and use plural names for arrays.
• Be consistent. Good names make your code easy to read, like a well-written story.