Thomashighbaugh/naming-cheatsheet

Naming Cheatsheet

Comprehensive guidelines for naming variables and functions in any programming language, based on the A/HC/LC pattern.

When to Use

• Naming new variables, functions, or classes
• Reviewing code for naming consistency
• Refactoring poorly named identifiers
• Teaching or establishing team naming conventions

Core Principles (S-I-D)

Names must be:

| Principle | Description | | --------------- | -------------------------------------------------------- | | Short | Not take long to type and remember | | Intuitive | Read naturally, close to common speech | | Descriptive | Reflect what it does/possesses in the most efficient way |

/* Bad */
const a = 5 // "a" could mean anything
const isPaginatable = a > 10 // sounds unnatural
const shouldPaginatize = a > 10 // made-up verb

/* Good */
const postCount = 5
const hasPagination = postCount > 10
const shouldPaginate = postCount > 10

The A/HC/LC Pattern

The core pattern for naming functions:

prefix? + action (A) + high context (HC) + low context? (LC)

| Name | Prefix | Action (A) | High Context (HC) | Low Context (LC) | | ---------------------- | -------- | ---------- | ----------------- | ---------------- | | getUser | | get | User | | | getUserMessages | | get | User | Messages | | handleClickOutside | | handle | Click | Outside | | shouldDisplayMessage | should | Display | Message | |

Context order matters: shouldUpdateComponent means you update the component, while shouldComponentUpdate means component updates itself.

Actions (Verbs)

get

Accesses data immediately (shorthand getter). Also used for async operations.

function getFruitCount() {
  return this.fruits.length
}

async function getUser(id) {
  const user = await fetch(`/api/user/${id}`)
  return user
}

set

Sets a variable declaratively, from value A to value B.

let fruits = 0

function setFruits(nextFruits) {
  fruits = nextFruits
}

reset

Sets a variable back to its initial value or state.

const initialFruits = 5
let fruits = initialFruits

function resetFruits() {
  fruits = initialFruits
}

remove vs delete

| Action | Use Case | Opposite | | ---------- | ------------------------------------- | -------- | | remove | Removes something from a collection | add | | delete | Completely erases from existence | create |

// remove - from a collection (paired with add)
function removeFilter(filterName, filters) {
  return filters.filter((name) => name !== filterName)
}

// delete - permanent erasure (paired with create)
function deletePost(id) {
  return database.find({ id }).delete()
}

Key insight: add needs a destination, create does not. Pair remove with add, delete with create.

compose

Creates new data from existing data.

function composePageUrl(pageName, pageId) {
  return pageName.toLowerCase() + '-' + pageId
}

handle

Handles an action, often used for callback methods.

function handleLinkClick() {
  console.log('Clicked a link!')
}

link.addEventListener('click', handleLinkClick)

Prefixes

Boolean Prefixes

| Prefix | Usage | Example | | -------- | ----------------------------------------------- | ------------------------------------------ | | is | Describes characteristic or state | isBlue, isPresent, isEnabled | | has | Describes possession of value or state | hasProducts, hasPermission | | should | Positive conditional coupled with action | shouldUpdateUrl, shouldDisplayMessage |

/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0

/* Good */
const hasProducts = productsCount > 0

Boundary Prefixes

| Prefix | Usage | Example | | ------------ | ------------------------------- | ---------------------------- | | min/max | Minimum or maximum value | minPosts, maxRetries | | prev/next| Previous or next state | prevPosts, nextPosts |

function renderPosts(posts, minPosts, maxPosts) {
  return posts.slice(0, randomBetween(minPosts, maxPosts))
}

async function getPosts() {
  const prevPosts = this.state.posts
  const latestPosts = await fetch('...')
  const nextPosts = concat(prevPosts, latestPosts)
  this.setState({ posts: nextPosts })
}

Rules to Follow

1. Use English Language

/* Bad */
const primerNombre = 'Gustavo'
const amigos = ['Kate', 'John']

/* Good */
const firstName = 'Gustavo'
const friends = ['Kate', 'John']

2. Be Consistent with Naming Convention

Pick one convention (camelCase, PascalCase, snake_case) and stick to it.

/* Bad - inconsistent */
const page_count = 5
const shouldUpdate = true

/* Good - consistent */
const pageCount = 5
const shouldUpdate = true

3. Avoid Contractions

/* Bad */
const onItmClk = () => {}

/* Good */
const onItemClick = () => {}

4. Avoid Context Duplication

class MenuItem {
  /* Bad - duplicates context */
  handleMenuItemClick = (event) => { ... }

  /* Good - reads as MenuItem.handleClick() */
  handleClick = (event) => { ... }
}

5. Reflect Expected Result

/* Bad */
const isEnabled = itemCount > 3
return <Button disabled={!isEnabled} />

/* Good */
const isDisabled = itemCount <= 3
return <Button disabled={isDisabled} />

6. Use Singular/Plural Correctly

/* Bad */
const friends = 'Bob'
const friend = ['Bob', 'Tony', 'Tanya']

/* Good */
const friend = 'Bob'
const friends = ['Bob', 'Tony', 'Tanya']

Quick Reference

| Pattern | Example | | -------------------- | -------------------------------- | | Get single item | getUser, getPost | | Get collection | getUsers, getPosts | | Get nested | getUserMessages | | Set value | setUser, setTheme | | Reset to initial | resetForm, resetFilters | | Add to collection | addItem, addFilter | | Remove from collection| removeItem, removeFilter | | Create new entity | createUser, createPost | | Delete permanently | deleteUser, deletePost | | Compose/build | composeUrl, buildQuery | | Handle event | handleClick, handleSubmit | | Boolean state | isActive, hasItems, shouldRender | | Boundaries | minCount, maxRetries | | State transitions | prevState, nextState |

---

React Naming Conventions

use Prefix is Reserved for Hooks

The use prefix in React is reserved for hooks. Don't use it for non-hook utilities:

// Bad - use prefix on non-hook
function useHasDifferentBillingAddress(formData) {
  return formData.billingAddress !== formData.shippingAddress;
}

// Good - descriptive name without use prefix
function hasDifferentBillingAddress(formData) {
  return formData.billingAddress !== formData.shippingAddress;
}

// Good - this is actually a hook (calls other hooks)
function useUserProfile(userId) {
  const [user, setUser] = useState(null);
  useEffect(() => { /* ... */ }, [userId]);
  return user;
}

Factory Function Naming

When functions return objects (especially result objects), use verb prefix:

// Bad - noun makes it unclear it's a function
const cartError = (errors) => ({
  success: false,
  error: { message: 'Failed', errors }
});

// Good - verb prefix indicates it's a factory function
const createCartErrorResult = (errors) => ({
  success: false,
  error: { message: 'Failed', errors }
});

// Usage is now self-documenting
const result = createCartErrorResult(validationErrors);

Error Variable Naming

Distinguish between Error instances and error messages:

// Bad - error suggests Error instance, but it's a string
const error = 'Failed to fetch user';
throw new Error(error);

// Good - errorMessage clearly indicates it's a string
const errorMessage = 'Failed to fetch user';
throw new Error(errorMessage);

// Good - error is an Error instance
const error = new Error('Failed to fetch user');
console.error(error.message); // Access message property

// Good - errors array of Error instances
const errors = [
  new Error('Network failed'),
  new Error('Timeout'),
];
throw new AggregateError(errors, 'Multiple failures');

---

Source: kettanaito/naming-cheatsheet