logo
/
A・HC・LC Pattern
メソッド名は動詞から始める
There is a useful pattern to follow when naming functions:
prefix? + action (A) + high context (HC) + low context? (LC)
Take a look at how this pattern may be applied in the table below.
NamePrefixAction (A)High context (HC)Low context (LC)
getUsergetUser
getUserMessagesgetUserMessages
handleClickOutsidehandleClickOutside
shouldDisplayMessageshouldDisplayMessage
Note: The order of context affects the 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 when it should be updated.
In other words, high context emphasizes the meaning of a variable.

Actions

The verb part of your function name. The most important part responsible for describing what the function does.

get

Accesses data immediately (i.e. shorthand getter of internal data).
function getFruitCount() {
  return this.fruits.length;
}
See also compose.
You can use get when performing asynchronous operations as well:
async function getUser(id) {
  const user = await fetch(`/api/user/${id}`);
  return user;
}

set

Sets a variable in a declarative way, with value A to value B.
let fruits = 0;

function setFruits(nextFruits) {
  fruits = nextFruits;
}

setFruits(5);
console.log(fruits); // 5

reset

Sets a variable back to its initial value or state.
const initialFruits = 5;
let fruits = initialFruits;
setFruits(10);
console.log(fruits); // 10

function resetFruits() {
  fruits = initialFruits;
}

resetFruits();
console.log(fruits); // 5

remove

Removes something from somewhere. For example, if you have a collection of selected filters on a search page, removing one of them from the collection is removeFilter, not deleteFilter (and this is how you would naturally say it in English as well):
function removeFilter(filterName, filters) {
  return filters.filter((name) => name !== filterName);
}

const selectedFilters = ["price", "availability", "size"];
removeFilter("price", selectedFilters);
See also delete.

delete

Completely erases something from the realms of existence. Imagine you are a content editor, and there is that notorious post you wish to get rid of. Once you clicked a shiny "Delete post" button, the CMS performed a deletePost action, not removePost.
function deletePost(id) {
  return database.find({ id }).delete();
}
See also remove.
remove or delete? When the difference between remove and delete is not so obvious to you, I'd sugguest looking at their opposite actions - add and create.
The key difference between add and create is that add needs a destination while create requires no destination. You add an item to somewhere, but you don't "create it to somewhere".
Simply pair remove with add and delete with create.
Explained in detail here.

compose

Creates new data from the existing one. Mostly applicable to strings, objects, or functions.
function composePageUrl(pageName, pageId) {
  return pageName.toLowerCase() + "-" + pageId;
}
See also get.

handle

Handles an action. Often used when naming a callback method.
function handleLinkClick() {
  console.log("Clicked a link!");
}

link.addEventListener("click", handleLinkClick);

Context

A domain that a function operates on. A function is often an action on something. It is important to state what its operable domain is, or at least an expected data type.
/* A pure function operating with primitives */
function filter(list, predicate) {
  return list.filter(predicate);
}

/* Function operating exactly on posts */
function getRecentPosts(posts) {
  return filter(posts, (post) => post.date === Date.now());
}
Some language-specific assumptions may allow omitting the context. For example, in JavaScript, it's common that filter operates on Array. Adding explicit filterArray would be unnecessary.

Prefixes

Prefix enhances the meaning of a variable. It is rarely used in function names. プログラミングで良く使用する単語一覧