Welcome Back, Code Cleaners!

In Part 1, we mastered meaningful variable names and killed the var keyword forever. Today, we’re tackling the heart of clean code: functions.

I once wrote a 250-line function called processUserData(). It validated, transformed, saved to database, sent emails, logged activities, and made coffee (okay, not that last one). When a bug appeared, I spent 4 hours finding it in that monster function.

Never again.

Today’s Mission:

• Write small functions that do ONE thing
• Master arrow functions (and avoid common mistakes)
• Name functions like a pro
• Make your code self-documenting

Let’s transform those god functions into clean, testable masterpieces.

---

Practice 1: Write Small Functions That Do One Thing

The Golden Rule: If you can’t describe what a function does in one sentence without using “and”, it’s doing too much.

❌ Bad: God Function

function processUserData(user) {
// Validate
if (!user.email.includes('@')) {
throw new Error('Invalid email');
}
if (user.age < 18) {
throw new Error('User too young');
}

// Transform
user.name = user.name.trim().toLowerCase();
user.email = user.email.toLowerCase();

// Save to database
const query = `INSERT INTO users (name, email, age) VALUES ('${user.name}', '${user.email}', ${user.age})`;
db.execute(query);

// Send welcome email
const subject = 'Welcome!';
const body = `Hello ${user.name}, welcome to our platform!`;
emailService.send(user.email, subject, body);

// Log activity
logger.info(`User ${user.name} registered at ${new Date()}`);

return user;
}

What’s wrong?

• Does 5 different things (validate, transform, save, email, log)
• Impossible to test one piece without triggering all others
• Can’t reuse validation elsewhere
• 25 lines of tangled logic

✅ Good: Single Responsibility Functions

function validateUserEmail(email) {
if (!email.includes('@')) {
throw new Error('Invalid email');
}
}

function validateUserAge(age) {
if (age < 18) {
throw new Error('User must be 18 or older');
}
}

function normalizeUserData(user) {
return {
...user,
name: user.name.trim().toLowerCase(),
email: user.email.toLowerCase()
};
}

function saveUserToDatabase(user) {
const query = 'INSERT INTO users (name, email, age) VALUES (?, ?, ?)';
return db.execute(query, [user.name, user.email, user.age]);
}

function sendWelcomeEmail(user) {
const subject = 'Welcome!';
const body = `Hello ${user.name}, welcome to our platform!`;
return emailService.send(user.email, subject, body);
}

function logUserRegistration(user) {
logger.info(`User ${user.name} registered at ${new Date()}`);
}

// Compose small functions into a workflow
async function registerUser(user) {
validateUserEmail(user.email);
validateUserAge(user.age);

const normalizedUser = normalizeUserData(user);

await saveUserToDatabase(normalizedUser);
await sendWelcomeEmail(normalizedUser);

logUserRegistration(normalizedUser);

return normalizedUser;
}

Benefits:

• ✅ Each function is 3-5 lines (easy to understand)
• ✅ Easy to test (test validateUserEmail independently)
• ✅ Reusable (use validateUserEmail in 10 different places)
• ✅ Easy to modify (change email logic without touching registration)
• ✅ Names explain what happens (no comments needed!)

The 20-Line Rule: If your function exceeds 20 lines, it’s probably doing too much. Break it down.

---

Practice 2: Function Names Should Be Verbs

Functions DO things. Names should reflect actions.

❌ Bad: Noun-Based Names

function user(id) {
return db.query('SELECT * FROM users WHERE id = ?', [id]);
}

function email(user, subject, body) {
emailService.send(user.email, subject, body);
}

function validation(data) {
return data.age > 18;
}

✅ Good: Verb-Based Names

function getUser(id) {
return db.query('SELECT * FROM users WHERE id = ?', [id]);
}

function sendEmail(user, subject, body) {
emailService.send(user.email, subject, body);
}

function validateAge(age) {
return age >= 18;
}

Common Verb Prefixes:

• get - Retrieve data: getUser(), getOrders()
• set - Modify data: setUsername(), setTheme()
• create - Make new: createUser(), createOrder()
• update - Change existing: updateProfile(), updateStatus()
• delete - Remove: deleteAccount(), deletePost()
• validate - Check validity: validateEmail(), validatePassword()
• calculate - Compute: calculateTotal(), calculateTax()
• format - Transform: formatDate(), formatCurrency()
• is/has/can - Return boolean: isValid(), hasPermission(), canEdit()

---

Practice 3: Use Arrow Functions (But Know When NOT To)

Arrow functions are clean, concise, and solve the dreaded this binding issue. But they’re not always the right choice.

✅ Good: When to Use Arrow Functions

1. Array Methods

const numbers = [1, 2, 3, 4, 5];

// ❌ Traditional function - verbose
const doubled = numbers.map(function(number) {
return number * 2;
});

// ✅ Arrow function - clean
const doubled = numbers.map(number => number * 2);

// ✅ Multiple operations
const result = numbers
.filter(num => num > 2)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);

2. Callbacks

// ❌ Traditional function
setTimeout(function() {
console.log('Delayed');
}, 1000);

// ✅ Arrow function
setTimeout(() => {
console.log('Delayed');
}, 1000);

3. Promise Chains

// ✅ Clean promise chain
fetchUser(userId)
.then(user => fetchOrders(user.id))
.then(orders => processOrders(orders))
.catch(error => handleError(error));

4. Lexical this Binding

// ❌ Traditional function - 'this' is undefined
const person = {
name: 'Alice',
greet: function() {
setTimeout(function() {
console.log('Hello, ' + this.name);  // this is undefined!
}, 1000);
}
};

// ✅ Arrow function - inherits 'this'
const person = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(`Hello, ${this.name}`);  // works!
}, 1000);
}
};

❌ Bad: When NOT to Use Arrow Functions

1. Object Methods

// ❌ Arrow function as method - 'this' won't work
const user = {
name: 'Alice',
greet: () => {
console.log(`Hello, ${this.name}`);  // this is undefined!
}
};

// ✅ Regular function
const user = {
name: 'Alice',
greet() {
console.log(`Hello, ${this.name}`);  // works!
}
};

2. Constructors

// ❌ Can't use arrow functions as constructors
const Person = (name) => {
this.name = name;
};
const alice = new Person('Alice');  // TypeError!

// ✅ Regular function or class
class Person {
constructor(name) {
this.name = name;
}
}

3. Methods That Need arguments

// ❌ Arrow functions don't have 'arguments'
const sum = () => {
return Array.from(arguments).reduce((a, b) => a + b);  // ReferenceError!
};

// ✅ Regular function or rest parameters
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}

---

Practice 4: Keep Function Parameters to 3 or Fewer

The Problem: Too many parameters are hard to remember and error-prone.

❌ Bad: Many Parameters

function createUser(name, email, age, address, phone, country, city, zipCode) {
// Which order again? Easy to mess up!
return { name, email, age, address, phone, country, city, zipCode };
}

// Caller has to remember exact order
createUser('Alice', 'alice@example.com', 25, '123 Main St', '555-0100', 'USA', 'NYC', '10001');

✅ Good: Use Object Parameter

function createUser({ name, email, age, address, phone, country, city, zipCode }) {
return { name, email, age, address, phone, country, city, zipCode };
}

// Caller uses named properties - order doesn't matter!
createUser({
name: 'Alice',
email: 'alice@example.com',
age: 25,
city: 'NYC',
country: 'USA',
address: '123 Main St',
phone: '555-0100',
zipCode: '10001'
});

// Even better: With defaults
function createUser({
name,
email,
age = 18,  // Default age
country = 'USA'  // Default country
}) {
return { name, email, age, country };
}

createUser({ name: 'Alice', email: 'alice@example.com' });
// Returns: { name: 'Alice', email: 'alice@example.com', age: 18, country: 'USA' }

Benefits:

• Self-documenting (clear what each parameter is)
• Order-independent (can’t mess up parameter order)
• Easy to add optional parameters
• Can provide defaults easily

---

Practice 5: Don’t Use Flags as Function Parameters

The Problem: Boolean flags indicate a function doing multiple things.

❌ Bad: Boolean Flags

function createUser(name, email, isAdmin) {
const user = { name, email };

if (isAdmin) {
user.role = 'admin';
user.permissions = ['read', 'write', 'delete'];
sendAdminWelcomeEmail(user);
} else {
user.role = 'user';
user.permissions = ['read'];
sendUserWelcomeEmail(user);
}

return user;
}

// What does 'true' mean here? Have to check function definition!
createUser('Alice', 'alice@example.com', true);

✅ Good: Separate Functions

function createRegularUser(name, email) {
const user = {
name,
email,
role: 'user',
permissions: ['read']
};

sendUserWelcomeEmail(user);
return user;
}

function createAdminUser(name, email) {
const user = {
name,
email,
role: 'admin',
permissions: ['read', 'write', 'delete']
};

sendAdminWelcomeEmail(user);
return user;
}

// Clear what's happening!
createRegularUser('Alice', 'alice@example.com');
createAdminUser('Bob', 'bob@example.com');

---

Real-World Example: Refactoring a Checkout Function

Before: Messy

function checkout(cart, user, paymentMethod, shippingAddress, billingAddress, coupon) {
// Validate cart
if (cart.items.length === 0) throw new Error('Cart is empty');

// Calculate totals
let subtotal = 0;
for (let i = 0; i < cart.items.length; i++) {
subtotal += cart.items[i].price * cart.items[i].quantity;
}

// Apply coupon
let discount = 0;
if (coupon) {
discount = coupon.type === 'percent' ? subtotal * (coupon.value / 100) : coupon.value;
}

// Calculate tax
const tax = (subtotal - discount) * 0.08;

// Calculate shipping
let shipping = subtotal > 100 ? 0 : 10;

const total = subtotal - discount + tax + shipping;

// Process payment
const payment = processPayment(paymentMethod, total);
if (!payment.success) throw new Error('Payment failed');

// Create order
const order = {
user: user.id,
items: cart.items,
subtotal,
discount,
tax,
shipping,
total,
shippingAddress,
billingAddress
};

// Save and send email
saveOrder(order);
sendOrderConfirmation(user.email, order);

return order;
}

After: Clean

function calculateSubtotal(items) {
return items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
}

function calculateDiscount(subtotal, coupon) {
if (!coupon) return 0;

return coupon.type === 'percent'
? subtotal * (coupon.value / 100)
: coupon.value;
}

function calculateTax(amount, taxRate = 0.08) {
return amount * taxRate;
}

function calculateShipping(subtotal, freeShippingThreshold = 100) {
return subtotal >= freeShippingThreshold ? 0 : 10;
}

function validateCart(cart) {
if (cart.items.length === 0) {
throw new Error('Cart is empty');
}
}

async function checkout({ cart, user, paymentMethod, shippingAddress, billingAddress, coupon }) {
// Validate
validateCart(cart);

// Calculate amounts
const subtotal = calculateSubtotal(cart.items);
const discount = calculateDiscount(subtotal, coupon);
const taxableAmount = subtotal - discount;
const tax = calculateTax(taxableAmount);
const shipping = calculateShipping(subtotal);
const total = taxableAmount + tax + shipping;

// Process payment
const payment = await processPayment(paymentMethod, total);
if (!payment.success) {
throw new Error('Payment failed');
}

// Create and save order
const order = {
userId: user.id,
items: cart.items,
amounts: { subtotal, discount, tax, shipping, total },
shippingAddress,
billingAddress
};

await saveOrder(order);
await sendOrderConfirmation(user.email, order);

return order;
}

Improvements:

• ✅ Each calculation is a separate function (testable!)
• ✅ Used object parameter (clear what’s passed)
• ✅ Function names explain what they do
• ✅ Main function reads like a story
• ✅ Easy to modify any calculation independently

---

Quick Wins Checklist for Part 2

Audit your functions with these questions:

✅ Can I describe each function in one sentence without “and”? ✅ Is each function under 20 lines? ✅ Do function names start with verbs? ✅ Am I using arrow functions for callbacks/array methods? ✅ Do I have more than 3 function parameters? (Use object instead) ✅ Do I have boolean flags as parameters? (Split into separate functions)

---

Part 2 Conclusion: Functions Are the Building Blocks

Great functions are like LEGO blocks:

• Small and focused
• Easy to understand
• Can be combined in infinite ways
• Reusable everywhere

When you write a 250-line god function, you’re building with concrete blocks. Heavy, inflexible, hard to modify.

When you write 10-line focused functions, you’re building with LEGOs. Light, flexible, infinitely reconfigurable.

Challenge for Today: Find your longest function. Break it into 3-5 smaller functions. Share the before/after line count in the comments! 📊

---

Coming Up in Part 3: Modern JavaScript Features 🚀

Next time, we’ll explore the modern JavaScript features that make your code cleaner and more expressive:

• Destructuring - Unpack objects and arrays cleanly
• Template Literals - Say goodbye to string concatenation hell
• Optional Chaining - Stop defensive null checking
• Nullish Coalescing - Better default values
• Spread Operator - Copy and merge like a pro

These features will cut your code by 30-40% while making it more readable. Don’t miss it!

---

Ready to write better functions? 👏 Clap for clean functions! (50 claps available)

Get notified of Part 3! 🔔 Follow me - Part 3 drops in 3 days!

What’s your longest function? 💬 Drop the line count in the comments - let’s see who has the biggest monster to refactor! 😄

Sharing is caring! 📤 Share this with your dev team - everyone benefits from cleaner functions.

---

This is Part 2 of the 7-part “JavaScript Clean Code Mastery” series.

← Part 1: Naming & Variables | Part 3: Modern JavaScript Features →

Tags: #JavaScript #CleanCode #Functions #ArrowFunctions #WebDevelopment #Programming #ES6 #SoftwareEngineering #Tutorial