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?
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
📌 3. Avoid Generic Names (handle
, process
, doSomething
)
// 👍 Good
function formatDate(date) { ... }
// 👎 Bad
function handleData(data) { ... } // What does it handle?
📌 4. Focus on "What," Not "How"
// 👍 Good
function getFullName(user) { ... }
// 👎 Bad
function composeFullName(user) { ... } // Overly specific
📌 5. Async Functions: Use fetch, load, get
// 👍 Good
async function fetchUser() { ... }
// 👎 Bad
async function getUser() { ... } // Unclear if async
📌 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
📌 7. Consistency in code
Use the same prefixes for similar functions:
// 👍 Good
function getUser() { ... }
function getPosts() { ... }
// 👎 Bad
function getUser() { ... }
function fetchPosts() { ... } // Why not `getPosts`?
📌 8. Reflect the level of abstraction
- Low level (details):
function convertCelsiusToFahrenheit(temp) { ... }
- High level (business logic):
function applyDiscount(cart) { ... }
📌 9. Follow the project code style
-
camelCase
для функцій:
function calculateTotal() { ... }
-
PascalCase
для класів:
class User { ... }
📌 10. Use on
... for event handlers
// 👍 Good
function onClick() { ... }
function onFormSubmit() { ... }
// 👎 Bad
function clickHandler() { ... }
📌 11. Mark asynchronous functions (fetch
, load
, get
)
// 👍 Good
async function fetchUser() { ... }
async function loadProducts() { ... }
// 👎 Bad
async function getUser() { ... } // Is this an HTTP request?
📌 12. Avoid negativity in titles
// 👍 Good
function isValid(user) { ... }
// 👎 Bad
function isNotValid(user) { ... }
📌 13. Specify the direction of the transformation
function mapUserToDto(user) { ... }
function formatPriceToUSD(price) { ... }
📌 14. Names shouldn't be misleading
// 👍 Good
function saveUserToLocal() { ... }
// 👎 Bad
function saveUser() { ... } // What if it stores in `localStorage`?
📌 15. Avoid duplication in context
// 👍 Good
userService.getData();
// 👎 Bad
userService.getUserData();
📌 16. Short functions - shorter names
// 👍 Good
function sum(a, b) { ... }
// 👎 Bad
function getSumOfTwoNumbers(a, b) { ... }
📌 17. Name your arguments clearly.
// 👍 Good
function validateUser(user) { ... }
// 👎 Bad
function validate(data) { ... }
📌 18. Name IIFE functions.
// 👍 Good
(function initApp() { ... })();
📌 19. Facade naming for API
// 👍 Good
function updateProfile() { ... }
📌 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() { ... }
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)