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:

/* 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)

getUser

get

User

getUserMessages

get

User

Messages

handleClickOutside

handle

Click

Outside

shouldDisplayMessage

should

Display

Message

Context order matters:

shouldUpdateComponent

shouldComponentUpdate

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

remove

add

delete

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

create

remove

add

delete

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

is

isBlue

isPresent

isEnabled

has

hasProducts

hasPermission

should

shouldUpdateUrl

shouldDisplayMessage

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

/* Good */
const hasProducts = productsCount > 0

Boundary Prefixes

min

max

minPosts

maxRetries

prev

next

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

/* 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

getUser

getPost

getUsers

getPosts

getUserMessages

setUser

setTheme

resetForm

resetFilters

addItem

addFilter

removeItem

removeFilter

createUser

createPost

deleteUser

deletePost

composeUrl

buildQuery

handleClick

handleSubmit

isActive

hasItems

shouldRender

minCount

maxRetries

prevState

nextState

React Naming Conventions

use

Prefix is Reserved for Hooks

The

use

// 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

// 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