Clean Code & Best Practices
Writing clean, maintainable code is what separates junior from senior developers. Code is read 10x more than it's written - invest in readability, naming, and structure.
Clean Code Rules
- Meaningful names - getUserById not getData. isActive not flag. MAX_RETRIES not n
- Small functions - Each function does ONE thing. Under 20 lines is ideal
- DRY - Don't Repeat Yourself. Extract repeated logic into functions
- Avoid magic numbers - const TAX_RATE = 0.18; not price * 0.18
- Early returns - Guard clauses simplify logic: if (!user) return null;
- Comments - Explain WHY, not WHAT. Code should be self-documenting
- Consistent style - Use ESLint + Prettier. Enforce team standards automatically
Clean Code Examples
// ❌ BAD: Unclear names, magic numbers, nested logic
function process(d) {
if (d) {
if (d.a > 18) {
const t = d.p * 0.18;
return d.p + t;
} else {
return d.p;
}
}
return 0;
}
// ✅ GOOD: Clear names, constants, guard clauses
const TAX_RATE = 0.18;
const MIN_TAX_AGE = 18;
function calculateTotalPrice(user) {
if (!user) return 0;
if (user.age <= MIN_TAX_AGE) return user.price;
const tax = user.price * TAX_RATE;
return user.price + tax;
}
// ❌ BAD: Long function, mixed responsibilities
function handleForm(data) {
// validate + transform + save + notify - too much!
}
// ✅ GOOD: Single responsibility
function validateUserData(data) { /* validate only */ }
function transformUserData(data) { /* transform only */ }
function saveUser(user) { /* save only */ }
function notifyUser(user) { /* notify only */ }
function handleForm(data) {
const errors = validateUserData(data);
if (errors.length) return { errors };
const user = transformUserData(data);
saveUser(user);
notifyUser(user);
return { success: true };
}
// Naming conventions
// Variables: camelCase (userName, isActive)
// Constants: SCREAMING_SNAKE (MAX_RETRIES, API_URL)
// Classes: PascalCase (UserProfile, TodoList)
// Files: kebab-case (user-profile.js, todo-list.js)
// Boolean: is/has/can prefix (isValid, hasPermission, canEdit)
console.log("Clean code = readable, maintainable, testable code");Tip
Tip
A codebase is read 10x more than it's written. Optimize for readability: use descriptive names, keep functions short (<20 lines), and add comments only for WHY (not WHAT). The code itself should explain what it does.
Use console.table for objects. console.time to profile. debugger; for breakpoints. Chrome DevTools > console.log.
Common Mistake
Warning
Abbreviating variable names to save keystrokes. 'usr' instead of 'user', 'btn' instead of 'button', 'cb' instead of 'callback'. Modern IDEs autocomplete names. Write descriptive names that future-you will understand.
Practice Task
Note
Code quality: (1) Refactor a 50-line function into smaller, named functions. (2) Replace magic numbers with named constants. (3) Set up ESLint + Prettier for consistent formatting.
Quick Quiz
Key Takeaways
- Writing clean, maintainable code is what separates junior from senior developers.
- Meaningful names - getUserById not getData. isActive not flag. MAX_RETRIES not n
- Small functions - Each function does ONE thing. Under 20 lines is ideal
- DRY - Don't Repeat Yourself. Extract repeated logic into functions