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() { ... }
// π Bad
function userData() { ... } // Is this a function or variable?
π 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)
Top comments (0)