メソッド名は動詞から始める
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.
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 | |
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.
プログラミングで良く使用する単語一覧