Just like with variables, there is a logic behind the naming of our functions. Functions are a very important component of everyone of our JS applications, so just as we want clarity for both ourselves and for other developers when they look at our variable names in an attempt to figure out what data they hold onto and what data type, function names must clearly convey what they do and what role they will play in our app.

Importance of naming functions well

Functions can be thought of as actions. They perform one or another operation in our app and as a result, it is best to name them using a verb.

For example, let's say we are making something pretty common, that we have a good idea about, like a todo application. If you haven't already, at one point in your development career, you'll have to make a todo application. For any todo application that we can think of, whether we've made it ourselves or not, we need to have the ability to the following things: to add new todos, to update them, maybe to check them off as being done or complete and then to delete them.

// create a todo
// update a todo
// check off todo
// delete todo

Let's see how to convert each of these actions into function names. Most will be pretty simple, we start each with a verb, the action, and then a noun, the data that the action is being performed on.

So for creating a todo, that would be createTodo. Try to omit conjunctions like a or an. And since we are creating a single todo, it is 'createTodo' singular. What about if we were creating multiple todos? It would then be 'createTodos' plural.

Then for updating a todo, updateTodo.

Then to check a todo, to make it complete, we might call it checkTodo. But check could also mean 'check' as in test it for a given value. Check is another relatively common prefix in functions. For example, if we want to check whether a user is authenticated in our app, we may have a function called checkAuth. So check doesn't seem to be clear enough.

To make it more clear, I think it's a good practice to add more information. More information is better. There's no reason to keep our function names short if what they are doing isn't immediately clear. So to add more info, we can say maybe that we are checking off a todo, so that would be checkOffTodo. Or one that I personally like even better is checkCompleteTodo. That seems to be the most clear as to what will happen when we call this function. And note that it's note checkTodoComplete. We want to keep the verb at the beginning of the function name and the action at the end: checkCompleteTodo

And finally, for deleting a todo, that can just be deleteTodo. Note that you'll see alternatives to make of these common prefixes that are totally acceptable. For example, instead of deleteTodo, we could also call it removeTodo. That would be fine. And for our updateTodo, you might prefer to say editTodo. Just as long as the same meaning is retained. That's what is important here.

// create a todo
const createTodo = () => {};
// update a todo
const updateTodo = () => {};
// check off todo
const checkCompleteTodo = () => {};
// delete todo
const deleteTodo = () => {};

And you can see in the case of figuring out the name for the checkCompleteTodo function, when it's not obvious at first what to call a function. Sometimes the best approach is to read it aloud and ask if someone looking at your code for the first time would be able to immediately make sense of what it does within the context of our application. If not, it would likely be an improvement to think of some alternative names that might clear up what it does.

Using the same prefixes

We want to have these function names clearly express what the action that is taking place and to what piece of data in our application, but what is arguably even more important is maintaining a given convention.

If for example you are performing the same operation in two places in your app, you want to keep the prefixes or action words that you choose the same.

In our todo app, if in one place we are getting a single todo, you would logically have a function called getTodo:

const getTodo = () => {};

Or something similar to that. And let's say you are also getting the user data as well. It's fundamentally the same operation; you are just retrieving a different piece of data. And say you call that function fetchUser:

const getTodo = () => {};
const fetchUser = () => {};

Can you spot what the problem is here?

The problem is that we are doing the same thing, we are performing the same action, getting some data, but we are giving each function a different prefix to its name.

We can fix this by changing the prefix to either 'fetch' or 'get'. There is no better word, per se, but what needs to happen to make the actions in your application understandable is that the functions need to have the same naming convention. Otherwise, you or anyone else looking at your code may be confused as to whether what's taking place is fundamentally different when it's not.


So pick a logical approach to naming / prefixing your functions and stick to it. Personally I think you can't go wrong with simple prefixes like get, create, update, and delete. You'll develop a better sense of how to name your functions as you read and write more code and depending on the actions within the application you are building.