Naming cheatsheet

Naming things is hard. Is it?

Guidelines

• Pick one naming convention and follow it. Whether it is likeThis, or like_this, or anyhow else, it does not matter. What matters is consistency in your work.
• Name, whether of a variable, method, or something else, should be short, descriptive and intuitive:
  • Short. Variable should not take long to type, and therefore to remember,
  • Descriptive. Name of the variable should reflect what this variable possesses/does in the most efficient way,
  • Intuitive. Name of the variable should read naturally, as close to common speach as possible

/* Bad */
const a = 5; // "a" could mean anything
const isPaginatable = (a > 10); // "Paginatable" sounds extremely unnatural

/* Good */
const postsCount = 5;
const shouldDisplayPagination = (postsCount > 10);

• Name should not duplicate the context when the latter is known, and when removing the context from the name does not decrease its readability:

class MenuItem {
  /* Method name duplicates the context it is in "...MenuItem..." */
  handleMenuItemClick = (event) => { ... }
  
  /* This way it reads as MenuItem.handleClick() */
  handleClick = (event) => { ... }
}

• Name should reflect expected result:

/* Bad */
const isEnabled = this.props.enabled;
return (<Button disabled={!isEnabled} />);

/* Good */
const isDisabled = this.props.disabled;
return (<Button disabled={isDisabled} />);

Pattern

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

This is not a rule, but rather a pattern which can be applied quite often when naming variables.

Keep in mind, that order of the contexts affects the core meaning of a variable. For example, shouldUpdateComponent means you are about to update a component, while shouldComponentUpdate tells you that component will update on itself, and you are but controlling whether it should. In other words, high context emphasizes the meaning of the variable.

Example

Name	Prefix	Action	High context	Low context
getPost		get	Post
getPostData		get	Post	Data
handleClickOutside		handle	Click	Outside
shouldDisplayMessage	should	Display	Message

Naming methods

Action

get

Access data immediately (i.e. shorthand getter of internal data).

function getFruitsCount() {
  return this.fruits;
}

fetch

Request for data, which takes time (i.e. async request).

function fetchPosts(postCount) {
  return fetch('https://api.dev/posts', { ... });
}

set

Declaratively set variableA with valueA to valueB.

function Component() {
  this.state = { fruits: 0 };

  function setFruits(nextFruits) {
    this.state.fruits = nextFruits;
  }
}

reset

Set something back to its initial value.

const initialFruits = 5;
const fruits = initialFruits;
setFruits(10); // fruits = 10

function resetFruits() {
  fruits = initialFruits;
}

resetFruits(); // fruits = 5

compose

Create new data from the existing one. Probably, applicable mostly to strings.

function composePageUrl(pageName, pageId) {
  return `${pageName.toLowerCase()}-${pageId}`;
}

handle

Handler for a dedicated action. Usually, used as a callback method.

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

link.addEventListener('click', handleLinkClick);

Prefixes

Prefixes enhance variables or methods, indicating additional meaning behind them.

is

Describes certain characteristic or state of the context.

const color = 'blue';
const isBlue = (color === 'blue'); // characteristic
const isRemoved = false; // state

if (isBlue && !isRemoved) {
  console.log('The color is blue and it is present!');
}

min/max

Represent minimum or maximum value. Usually describe allowed limits.

function PostsList() {
  this.minPosts = 3;
  this.maxPosts = 10;
}

has

Describes whether current context possesses a certain value or state.

/* Bad */
const isProductsExist = (productsCount > 0);
const areProductsPresent = (productsCount > 0);

/* Good */
const hasProducts = (productsCount > 0);

should

Reflects conditional statement (returns Boolean value).

const currentUrl = 'https://dev.com';

function shouldUpdateUrl(url) {
  return (url !== currentUrl);
}