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)

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

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

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

/* Good */
const hasProducts = productsCount > 0

Boundary Prefixes

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

Source: kettanaito/naming-cheatsheet