How to Write Clean Code in JavaScript

// Variables and functions: use camelCase
let userName = "John";
let isActive = true;
function calculateTotal() {}
function getUserById() {}

// Constants: use UPPER_SNAKE_CASE
const MAX_CONNECTIONS = 100;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_TIMEOUT = 5000;

// Classes: use PascalCase
class UserAccount {}
class DatabaseConnection {}
class HTTPRequestHandler {}

// Private methods: prefix with underscore (convention)
class MyClass {
    _privateMethod() {
        // Internal method
    }
}

// Boolean variables: use is/has/should prefix
let isLoggedIn = true;
let hasPermission = false;
let shouldUpdate = true;

// Bad naming
let d = {};  // What is this?
let x = 5;   // What does x represent?

// Good naming
let userData = {};
let maxRetries = 5;

// Bad: Function does too many things
function processUser(user) {
    if (!user) return null;
    if (!user.email) return null;
    if (!user.email.includes("@")) return null;
    user.email = user.email.toLowerCase();
    user.name = user.name.trim();
    user.name = user.name.charAt(0).toUpperCase() + user.name.slice(1);
    // ... more processing
    return user;
}

// Good: Small, focused functions
function validateEmail(email) {
    return email && email.includes("@");
}

function normalizeEmail(email) {
    return email.toLowerCase().trim();
}

function capitalizeName(name) {
    return name.trim().charAt(0).toUpperCase() + name.slice(1);
}

function processUser(user) {
    if (!user) return null;
    if (!validateEmail(user.email)) return null;
    
    return {
        ...user,
        email: normalizeEmail(user.email),
        name: capitalizeName(user.name)
    };
}

// Functions should have descriptive names
// Bad
function calc(x, y) {
    return x * y;
}

// Good
function calculateTotalPrice(price, quantity) {
    return price * quantity;
}

// Bad: Deep nesting
function processOrder(order) {
    if (order) {
        if (order.items) {
            if (order.items.length > 0) {
                if (order.user) {
                    if (order.user.isActive) {
                        return processPayment(order);
                    } else {
                        return "User inactive";
                    }
                } else {
                    return "User not found";
                }
            } else {
                return "No items";
            }
        } else {
            return "Invalid order";
        }
    } else {
        return "Order required";
    }
}

// Good: Early returns (guard clauses)
function processOrder(order) {
    if (!order) return "Order required";
    if (!order.items || order.items.length === 0) return "No items";
    if (!order.user) return "User not found";
    if (!order.user.isActive) return "User inactive";
    
    return processPayment(order);
}

// Bad: Magic numbers
function calculateDiscount(price) {
    return price * 0.1;  // What is 0.1?
}

if (user.age >= 18) {  // Why 18?
    // ...
}

// Good: Named constants
const DISCOUNT_RATE = 0.1;
const LEGAL_AGE = 18;

function calculateDiscount(price) {
    return price * DISCOUNT_RATE;
}

if (user.age >= LEGAL_AGE) {
    // ...
}

// Bad: Magic strings
if (status === "active") {  // Typo risk
    // ...
}

// Good: Constants
const USER_STATUS = {
    ACTIVE: "active",
    INACTIVE: "inactive",
    PENDING: "pending"
};

if (status === USER_STATUS.ACTIVE) {
    // ...
}

// Use try-catch for async operations
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(`Failed to fetch user ${userId}:`, error);
        throw error; // Re-throw or handle appropriately
    }
}

// Validate inputs
function divide(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        throw new TypeError("Both arguments must be numbers");
    }
    if (b === 0) {
        throw new Error("Cannot divide by zero");
    }
    return a / b;
}

// Custom error classes
class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

function validateEmail(email) {
    if (!email || !email.includes("@")) {
        throw new ValidationError("Invalid email address");
    }
    return true;
}

// Bad: Comments explain what code does (code should be clear)
// Increment i by 1
i++;

// Bad: Obvious comment
// Get user by ID
function getUserById(id) {
    // ...
}

// Good: Comments explain why
// Using setTimeout to debounce the search input
// This prevents API calls on every keystroke
setTimeout(() => {
    performSearch(query);
}, 300);

// Good: JSDoc comments for complex functions
/**
 * Calculates the total price including tax and discounts
 * @param {number} price - Base price
 * @param {number} taxRate - Tax rate as decimal (e.g., 0.1 for 10%)
 * @param {number} discountPercent - Discount percentage (0-100)
 * @returns {number} Final price after tax and discount
 * @throws {Error} If discount is out of range
 */
function calculateFinalPrice(price, taxRate, discountPercent) {
    if (discountPercent < 0 || discountPercent > 100) {
        throw new Error("Discount must be between 0 and 100");
    }
    const discountedPrice = price * (1 - discountPercent / 100);
    return discountedPrice * (1 + taxRate);
}

// Good: Group related functionality
// User utilities
function validateUser(user) { /* ... */ }
function formatUserName(user) { /* ... */ }
function getUserDisplayName(user) { /* ... */ }

// API utilities
async function fetchUsers() { /* ... */ }
async function createUser(userData) { /* ... */ }
async function updateUser(userId, updates) { /* ... */ }

// Constants at the top
const API_BASE_URL = "https://api.example.com";
const DEFAULT_PAGE_SIZE = 20;

// Use modules/ES6 imports for better organization
// userUtils.js
export function validateUser(user) { /* ... */ }
export function formatUserName(user) { /* ... */ }

// api.js
import { validateUser } from "./userUtils.js";
export async function createUser(userData) {
    if (!validateUser(userData)) {
        throw new Error("Invalid user data");
    }
    // ...
}

// Use const/let instead of var
const API_URL = "https://api.example.com";
let currentUser = null;

// Use arrow functions for callbacks
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

// Use destructuring
const { name, email } = user;
const [first, second, ...rest] = items;

// Use spread operator
const updatedUser = { ...user, age: 31 };
const allItems = [...items1, ...items2];

// Use template literals
const message = `Hello, ${user.name}! Welcome to ${appName}.`;

// Use optional chaining (ES2020)
const city = user?.address?.city;
const email = user?.contact?.email ?? "No email";

// Use nullish coalescing (ES2020)
const timeout = settings.timeout ?? 5000;

// Use async/await instead of callbacks
async function fetchData() {
    try {
        const response = await fetch(API_URL);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Error:", error);
        throw error;
    }
}