Good Coding Practices with JavaScript Examples

by

Writing code that works is just the start. To be a great developer, you need good coding practices—habits that make your JavaScript easy to read, maintain, and improve over time. These habits don’t just help you—they make life easier for your team, your future self, and anyone who uses your code. In this guide, we’ll explore the top practices for writing clean JavaScript, complete with examples and tips. Whether you’re new to coding or leveling up, you’ll find practical ideas to make your work shine. Let’s dive in!

Why Good Coding Practices Matter

Good coding practices are like keeping your room tidy. Sure, you can find your stuff in a mess, but it’s way easier when everything’s organized. In JavaScript, these habits:

  • Make your code readable so others (and you) understand it quickly.
  • Keep it maintainable for fixes or updates later.
  • Boost your efficiency by reducing mistakes and rework.

Think of it as building a solid foundation for your career. Let’s look at the key practices that’ll get you there.

1. Use Clear and Consistent Naming Conventions

Names in your code are like labels on a toolbox—they should tell you exactly what’s inside. Vague or messy names confuse everyone, while clear ones make your code a breeze to follow.

Example:

// Bad: What does "p" even do?
function p(x, y) {
    return x + y;
}

// Good: Clear and descriptive
function addNumbers(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

Why It Helps:

  • Instant Clarity: addNumbers says it adds numbers—no guesswork needed.
  • Team-Friendly: Others can jump in without decoding your abbreviations.
  • Future-Proof: Months later, you’ll still know what it does.

Tip:

  • Use camelCase (like addNumbers) for functions and variables—it’s a JavaScript standard.
  • Be specific: userAge beats age, and calculateTotalPrice beats calc.

2. Add Comments and Documentation

Code tells computers what to do, but comments tell humans why it’s doing it. Good comments explain your thinking, making your JavaScript easier to understand and tweak.

Example:

// Adds two numbers and returns the result
function addNumbers(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

Why It Helps:

  • Explains Intent: Comments clarify why the code exists (not just what it does).
  • Saves Time: No need to reverse-engineer tricky sections.
  • Guides Teams: New developers can pick up your work faster.

Tip:

  • Keep comments short and useful—don’t repeat the obvious (e.g., avoid “returns the sum” if the function’s named addNumbers).
  • Use tools like JSDoc for bigger projects to auto-generate docs.

3. Format and Organize Your Code

Messy code is like a jumbled puzzle—hard to piece together. Proper formatting and organization keep it neat and consistent, so it’s easy on the eyes.

Example:

// Bad: Cramped and inconsistent
function add(a,b){return a+b}

// Good: Clean and spaced out
function addNumbers(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

Why It Helps:

  • Readability: Spacing and alignment make code flow naturally.
  • Consistency: Teams can follow the same style (like Airbnb’s JavaScript Style Guide).
  • Debugging: Errors stand out in well-organized code.

Tip:

  • Use tools like Prettier or ESLint to auto-format your JavaScript.
  • Stick to one style—tabs or spaces, single or double quotes—and apply it everywhere.

4. Follow the DRY Principle (Don’t Repeat Yourself)

Repeating code is a trap. The DRY principle says every task should live in one place—like a reusable function—instead of being copied over and over.

Example:

// Bad: Repeated logic
let area1 = 3.14 * 4 * 4;
let area2 = 3.14 * 5 * 5;

// Good: Reusable function
function calculateArea(radius) {
    return 3.14 * radius * radius;
}

let area1 = calculateArea(4);
let area2 = calculateArea(5);

Why It Helps:

  • Less Work: Update one function instead of hunting down duplicates.
  • Fewer Bugs: Fix a mistake once, not in ten places.
  • Cleaner Code: Less repetition means less clutter.

Tip:

  • Spot patterns in your code—if you’re typing the same thing twice, make it a function or loop.

5. Handle Errors Gracefully

Errors happen—files go missing, users type gibberish, servers crash. Good JavaScript handles errors instead of letting them break everything.

Example:

function divideNumbers(a, b) {
    try {
        if (b === 0) throw new Error('Division by zero!');
        return a / b;
    } catch (error) {
        console.log('Oops: ' + error.message);
        return null;
    }
}

console.log(divideNumbers(10, 0)); // Outputs: Oops: Division by zero! (then null)

Why It Helps:

  • Stability: Your app keeps running instead of crashing.
  • User-Friendly: Clear error messages beat random failures.
  • Debugging: You know what went wrong and where.

Tip:

  • Use try/catch for risky operations like file reads or API calls.
  • Log errors for tracking, but don’t overwhelm users with techy details.

6. Keep It Simple (KISS Principle)

The KISS principle (Keep It Simple, Stupid) reminds us: simple code beats clever code. Overcomplicating things makes JavaScript harder to read, fix, and improve.

Example:

// Bad: Overly verbose
function isEven(num) {
    if (num % 2 == 0) {
        return true;
    } else {
        return false;
    }
}

// Good: Straight to the point
function isEven(num) {
    return num % 2 === 0;
}

Why It Helps:

  • Easier Maintenance: Simple logic is quick to update.
  • Fewer Bugs: Less code means fewer chances for mistakes.
  • Better Collaboration: Teammates grasp it faster.

Tip:

  • Ask yourself: “Can this be simpler?” If yes, simplify it.
  • Avoid fancy tricks unless they solve a real problem.

7. Do Regular Code Reviews

Writing code solo is fine, but code reviews—having others check your work—make it better. They’re like a second pair of eyes catching what you missed.

How It Works:

  • Share your code with a teammate or mentor.
  • They suggest improvements, spot bugs, or ask questions.
  • You tweak it based on feedback.

Why It Helps:

  • Catches Issues: Bugs or bad habits get fixed early.
  • Shares Knowledge: You learn from others’ insights.
  • Builds Teamwork: Everyone gets on the same page.

Tip:

  • Use tools like GitHub pull requests for easy reviews.
  • Be open to feedback—it’s not personal, it’s progress!

Putting It All Together: A Real Example

Let’s combine these practices in one snippet:

// Calculates the total price of items in a cart
function calculateCartTotal(items) {
    try {
        // Ensure items is an array
        if (!Array.isArray(items)) throw new Error('Items must be an array');

        // Use DRY and simple logic to sum prices
        const total = items.reduce((sum, item) => sum + item.price, 0);
        return total;
    } catch (error) {
        console.log('Error: ' + error.message);
        return 0; // Fallback value
    }
}

// Example usage
const cart = [
    { name: 'Shirt', price: 20 },
    { name: 'Pants', price: 30 }
];
const totalPrice = calculateCartTotal(cart);
console.log(`Total: $${totalPrice}`); // Outputs: Total: $50

What’s Happening:

  • Naming: calculateCartTotal is clear and specific.
  • Comments: Explains the purpose upfront.
  • Formatting: Clean and consistent spacing.
  • DRY: reduce avoids manual loops.
  • Error Handling: try/catch keeps it safe.
  • Simplicity: Straightforward logic, no fluff.

Benefits of Good Coding Practices

PracticeBenefit
Clear NamingFaster understanding
CommentsEasier maintenance
FormattingBetter readability
DRY PrincipleLess code, fewer bugs
Error HandlingStable, user-friendly apps
SimplicityQuick fixes and collaboration
Code ReviewsImproved quality and teamwork

These habits add up to stronger JavaScript—and a stronger you as a developer.

How to Start Using These Practices

You don’t need to master everything at once. Here’s a simple plan:

  1. Pick One: Start with naming or formatting—small wins build confidence.
  2. Practice Daily: Write a little JavaScript every day with these rules in mind.
  3. Get Feedback: Share your code with friends or online communities (like Stack Overflow).
  4. Use Tools: Try Prettier for formatting or ESLint for catching bad habits.

Conclusion: Code Better, Work Smarter

Good coding practices in JavaScript aren’t just rules—they’re tools to make your life easier. They turn messy, fragile code into something reliable, readable, and ready for the future. By naming things clearly, keeping it simple, handling errors, and reviewing your work, you’ll build projects that last—and impress anyone who sees them.

The goal isn’t just working code. It’s code that works today, tomorrow, and for everyone who touches it. So start small, practice often, and watch your skills grow.

Leave a Comment