DOCSEARCHbyAlgolia
Submit Docs

Naming Cheatsheet

repository·main·Indexed 12 days ago

https://github.com/kettanaito/naming-cheatsheet

A guide to best practices and patterns for writing clean, readable, and professional code identifiers in English. Includes the A/HC/LC pattern for function naming, guidelines for common function actions (get, set, handle), and prefix conventions for variables.

Tokens
1.4K
Snippets
5
Records
5
Agent score
46%

What's inside Naming Cheatsheet

  1. General Naming Principles

    main

    Follow these core principles to improve code cohesiveness and readability:

    • Use English: Use English for all variables and functions to increase cohesiveness with programming syntax and documentation.
    • Be Consistent with Conventions: Pick one convention (e.g., camelCase, PascalCase, snake_case) and stick to it throughout the project.
    • Follow S-I-D: Names should be Short (easy to type/remember), Intuitive (reads naturally), and Descriptive (efficiently reflects purpose).
    • Avoid Contractions: Do not use abbreviations like onItmClk; use full words like onItemClick to improve readability.
    • Avoid Context Duplication: Do not repeat the class or object name within its own methods. For example, inside class MenuItem, use handleClick() instead of handleMenuItemClick().
    • Reflect the Expected Result: Name booleans based on the state they represent. If a value is true when a button is disabled, name it isDisabled rather than isEnabled to avoid confusing logic like disabled={!isEnabled}.
    /* Bad */
const primerNombre = 'Gustavo'

/* Good */
const firstName = 'Gustavo'

  3. How the A/HC/LC pattern works for naming functions

    main

    The A/HC/LC pattern is a structured way to compose function names to ensure clarity and correct emphasis. The pattern follows this order:

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

    • Prefix: Optional modifier (e.g., should, is).
    • Action (A): The verb describing what the function does (e.g., get, handle).
    • High Context (HC): The primary domain or object the function operates on. Placing this early emphasizes the meaning.
    • Low Context (LC): Additional specific details.

    Note on Context Order: The order of context changes the meaning. shouldUpdateComponent implies the user is updating a component, whereas shouldComponentUpdate implies the component is deciding whether to update itself.

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

  4. Using Prefixes for Variables

    main

    Prefixes enhance the meaning of variables, typically booleans or state indicators:

    • is: Describes a characteristic or state (e.g., isBlue, isPresent).
    • has: Describes whether the context possesses a value or state (e.g., hasProducts).
    • should: Reflects a positive conditional statement coupled with an action (e.g., shouldUpdateUrl).
    • min/max: Represents boundaries or limits (e.g., minPosts, maxPosts).
    • prev/next: Indicates state transitions (e.g., prevPosts, nextPosts).
    const isBlue = color === 'blue';
const hasProducts = productsCount > 0;
const shouldUpdateUrl = url !== expectedUrl;
const minPosts = 5;
const prevPosts = this.state.posts;

  5. Common Function Actions

    main

    Use these specific verbs to describe function behavior:

    • get: Accesses data immediately (shorthand getter) or performs an asynchronous fetch.
    • set: Sets a variable in a declarative way (e.g., setFruits(5)).
    • reset: Sets a variable back to its initial or starting state.
    • remove: Removes an item from a collection (pair with add).
    • delete: Completely erases something from existence (pair with create).
    • compose: Creates new data from existing data (e.g., combining strings or objects).
    • handle: Used for callback methods that respond to an action (e.g., handleLinkClick).
    /* get */
function getFruitCount() {
  return this.fruits.length
}

/* set */
function setFruits(nextFruits) {
  fruits = nextFruits
}

/* remove */
function removeFilter(filterName, filters) {
  return filters.filter((name) => name !== filterName)
}

/* delete */
function deletePost(id) {
  return database.find({ id }).delete()
}

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

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