How to Name Functions in JavaScript: A Practical Guide
Andriy Ovcharov

Andriy Ovcharov @andriy_ovcharov_312ead391

About: My name is Andriy. I'm a frontend developer and design enthusiast from Ukraine.

Location:
Ukraine
Joined:
Jul 2, 2025

How to Name Functions in JavaScript: A Practical Guide

Publish Date: Jul 3
0 0

Hello friends! I'm happy to present you with the third part of my thoughts on naming in JavaScript. If you missed the first and second, you can catch up here:

"Naming Conventions in JavaScript (Classes, Components, Events, APIs)" (first part)
"JavaScript Variable Naming: Rules You Can’t Ignore" (second part)

Good function naming makes code clearer, more maintainable, and less prone to errors. Here are standardized rules with examples:

📌 1. Use Verbs for Actions

// 👍 Good  
function getUserData() { ... } // returns user data
function showMessage() { ... } // shows the message
function getAge() { ... } // returns the age (obtained somehow)
function calcSum() { ... } // calculates the sum and returns the result
function createForm() { ... } // creates the form (and usually returns it)
function checkPermission() { ... } // checks access, returning true/false

// 👎 Bad  
function userData() { ... }  // Is this a function or variable?  
Enter fullscreen mode Exit fullscreen mode

Some examples of using function names:

getAge() – would be a bad choice if the function will display an alert with the age (should only return it).
createForm() – would be a bad choice if the function will modify the document by adding a form to it (should only create the form and return it).
checkPermission() – would be a bad choice if the function will display a message with the text access granted/denied (should only perform the check and return its result).


📌 2. Predicate Functions: is, has, can

// 👍 Good  
function isValidUser(user) { ... }  

// 👎 Bad  
function checkValidUser(user) { ... }  // Less clear  
Enter fullscreen mode Exit fullscreen mode

📌 3. Avoid Generic Names (handle, process, doSomething)

// 👍 Good  
function formatDate(date) { ... }  

// 👎 Bad  
function handleData(data) { ... }  // What does it handle?  
Enter fullscreen mode Exit fullscreen mode

📌 4. Focus on "What," Not "How"

// 👍 Good  
function getFullName(user) { ... }  

// 👎 Bad  
function composeFullName(user) { ... }  // Overly specific  
Enter fullscreen mode Exit fullscreen mode

📌 5. Async Functions: Use fetch, load, get

// 👍 Good  
async function fetchUser() { ... }  

// 👎 Bad  
async function getUser() { ... }  // Unclear if async  
Enter fullscreen mode Exit fullscreen mode

📌 6. Unique soon (cream wider, like id, url)

// 👍 Good  
function generateUserId() { ... }  
function parseRequestURL() { ... }  

// 👎 Bad  
function genUID() { ... }       // `UID` – not obvious  
function parseReqUrl() { ... }  // `Req` – non-standard abbreviation  

Enter fullscreen mode Exit fullscreen mode

📌 7. Consistency in code
Use the same prefixes for similar functions:

// 👍 Good  
function getUser() { ... }  
function getPosts() { ... }   

// 👎 Bad  
function getUser() { ... }  
function fetchPosts() { ... }  // Why not `getPosts`?  

Enter fullscreen mode Exit fullscreen mode

📌 8. Reflect the level of abstraction

  • Low level (details):
function convertCelsiusToFahrenheit(temp) { ... }  
Enter fullscreen mode Exit fullscreen mode
  • High level (business logic):
function applyDiscount(cart) { ... }  
Enter fullscreen mode Exit fullscreen mode

📌 9. Follow the project code style

  • camelCase для функцій:
function calculateTotal() { ... }  
Enter fullscreen mode Exit fullscreen mode
  • PascalCase для класів:
class User { ... }  
Enter fullscreen mode Exit fullscreen mode

📌 10. Use on... for event handlers

// 👍 Good  
function onClick() { ... }  
function onFormSubmit() { ... }  

// 👎 Bad  
function clickHandler() { ... }   
Enter fullscreen mode Exit fullscreen mode

📌 11. Mark asynchronous functions (fetch, load, get)

// 👍 Good  
async function fetchUser() { ... }  
async function loadProducts() { ... }   

// 👎 Bad  
async function getUser() { ... }  // Is this an HTTP request? 
Enter fullscreen mode Exit fullscreen mode

📌 12. Avoid negativity in titles

// 👍 Good  
function isValid(user) { ... }    

// 👎 Bad  
function isNotValid(user) { ... }  
Enter fullscreen mode Exit fullscreen mode

📌 13. Specify the direction of the transformation

function mapUserToDto(user) { ... }  
function formatPriceToUSD(price) { ... }  

Enter fullscreen mode Exit fullscreen mode

📌 14. Names shouldn't be misleading

// 👍 Good  
function saveUserToLocal() { ... }       

// 👎 Bad  
function saveUser() { ... } // What if it stores in `localStorage`?    
Enter fullscreen mode Exit fullscreen mode

📌 15. Avoid duplication in context

// 👍 Good  
userService.getData();        

// 👎 Bad  
userService.getUserData();  
Enter fullscreen mode Exit fullscreen mode

📌 16. Short functions - shorter names

// 👍 Good  
function sum(a, b) { ... }          

// 👎 Bad  
function getSumOfTwoNumbers(a, b) { ... }  
Enter fullscreen mode Exit fullscreen mode

📌 17. Name your arguments clearly.

// 👍 Good  
function validateUser(user) { ... }          

// 👎 Bad  
function validate(data) { ... }  
Enter fullscreen mode Exit fullscreen mode

📌 18. Name IIFE functions.

// 👍 Good  
(function initApp() { ... })();           

Enter fullscreen mode Exit fullscreen mode

📌 19. Facade naming for API

// 👍 Good  
function updateProfile() { ... }             

Enter fullscreen mode Exit fullscreen mode

📌 20. The name is a promise!
The function should do exactly what the name says.


Conclusion

Good function names are if:

  • Describes an action or result (not an implementation)

  • Avoids ambiguities

  • Uses conventions (get, is, on, etc.).

Example of ideal naming:

function getUserById(id) { ... }  
function isAdmin(user) { ... }  
function onButtonClick() { ... }  
async function fetchPosts() { ... }  

Enter fullscreen mode Exit fullscreen mode

If you doubt the name, imagine another developer seeing it. Will they understand its purpose?


Read more:

"Naming Conventions in JavaScript (Classes, Components, Events, APIs)" (first part)
"JavaScript Variable Naming: Rules You Can’t Ignore" (second part)

Comments 0 total

    Add comment