Effective Variable and Function Naming Conventions in JavaScript

Good code should read like prose, and naming is a crucial part of that readability. The article begins with two famous programming quotes and shows simple examples of readable code versus overly clever or obscure naming.

function startEditing() {
  if (user.canEdit(currentDocument)) {
    editorControl.setEditMode(true);
    setButtonDown(btnStartEditing);
  }
}

It then presents a "cool" snippet to illustrate how surprising output can arise from misleading names.

const john = new Lady('lily');
console.log(john.name); // outputs "rose"

Next, a progression of variable names demonstrates the evolution from bad to great naming, ending with a more structured object representation.

// bad
const fruit = ['apple', 'banana'];
// ok
const fruitArr = ['apple', 'banana'];
// good
const fruits = ['apple', 'banana'];
// great
const fruitNames = ['apple', 'banana'];
// best
const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
];

Comply with naming conventions

Use (lower) camelCase

Start with a lowercase letter and capitalize the first letter of each subsequent word.

Capitalize constant values (if you want)

const HOURS_IN_DAY = 24;
const USER_AGE = 30;
// bad – these are not true constants
const USER = findUser();
const TODAY = new Date();

Avoid magic numbers in code.

Capitalize two‑letter acronyms

IO
AppID
// bad
Io
APPID

Avoid unnecessary underscores

this._myPrivateMethod = function () { /* ... */ };
// bad
const _someGlobalVar = 1;

Be expressive

Most of these conventions are not for you today, but instead, for you and the people reading your code tomorrow.

Use meaningful names

Names should precisely convey intent, avoid vague terms, and prefer business terminology over technical jargon.

Choose the most appropriate word when multiple exist.

Avoid ambiguous words.

Prefer descriptive over overly concise names.

Steer clear of obscure abbreviations and insider slang.

Check spelling with tools like "Code Spell Checker".

getUserPosts
// bad – too generic
getUserData
getUserInfo
// bad – single‑word temporary variable
global.d = new Date();

Prefer concise yet descriptive names

findUserByNameOrEmail
setUserLoggedInTrue
// bad – loses semantic clarity
findUser

Avoid redundant context

class Employee {
  constructor(name) {
    // good
    this.name = name;
    // bad – redundant
    this.employeeName = name;
  }
}
// When outside the class context, adding the context is useful
const employeeName = new Employee('gavin').name;

Use consistent verbs per concept

Common verbs include get, set, read, create, add, update, reset, delete, remove.

getQuestion
getUserPosts
getUsers
// bad – mixing verbs
returnUsers
retrieveUsers

Function names should be verbs or predicates

getFullYear()   // retrieve
toString()      // convert
isArray()       // predicate

Boolean naming

Start with helpers like is, can, has, need; for functions that return booleans, use the same pattern or prefix with check/get to avoid name clashes.

const hasApple = checkHasApple(fruits, 'apple');
// hasApple – does it contain apple?
// checkHasApple – checks if apple is present

Numeric naming

Prefer short, meaningful names like width, length, count; otherwise use patterns like numberOfErrors or errorCount.

width
length
total
maxWidth
numberOfErrors
errorCount

Class naming

Use nouns for class names; avoid verbs.

class Car {}
new User();
// bad – verb in class name
class MakeCar {}

Map/dictionary naming

Prefer descriptive forms such as usersByID rather than generic names like values or keysToValuesMap.

const usersByID = {
  id12345: { name: 'byted', age: 9 },
  // ...
};
// bad
values
keysToValuesMap
mapOfKeysToValues

References: Medium article on JavaScript naming conventions, Hacker Noon article on variable naming, and the C2 wiki on good variable names.