What you'll be able to do

By the end of this page you should be able to apply a short set of clean-code habits that make your JS easier for future-you to read — without pretending every codebase needs a style religion.

Previous post: common beginner bugs checklist.

Who this is for

  • People whose files work but feel embarrassing to share
  • Juniors getting review comments like "rename this" and "split this function"
  • Anyone mixing learning syntax with learning readability

You can skip this if your team already has a style guide you follow well. Habits below still travel between jobs.

Names that say the job

// weaker
const d = new Date();
const x = users.filter((u) => u.a);

// clearer
const createdAt = new Date();
const activeUsers = users.filter((user) => user.isActive);

Scenario A — solo weekend project. Clear names still help Monday-you.

Scenario B — pull request. Reviewers read names before they read logic.

Small functions, one job

function canPublish(post, user) {
  return post.status === "draft" && user.role === "editor";
}

Scenario A — condition reused in button disabled state and submit guard.

Scenario B — 80-line click handler that validates, fetches, and rewrites DOM — split into named steps.

Early returns beat pyramids

function priceWithTax(amount, taxRate) {
  if (amount == null) return 0;
  if (taxRate == null) return amount;
  return amount * (1 + taxRate);
}

Scenario A — guard clauses at the top.

Scenario B — deep nesting of if inside if inside for — hard to test and hard to trust.

Comments: why, not what

// Stripe amounts are in cents — keep integers to avoid float money bugs
const amountCents = Math.round(dollars * 100);

Scenario A — business rule that code alone does not show.

Scenario B — comment that restates i++ — delete it.

A tiny practice file

<!DOCTYPE html>
<html>
  <body>
    <pre id="out"></pre>
    <script>
      function formatGreeting(userName, isMember) {
        if (!userName) return "Hello, guest";
        if (!isMember) return "Hello, " + userName;
        return "Welcome back, " + userName;
      }
      document.getElementById("out").textContent =
        formatGreeting("Sam", true) + "\n" + formatGreeting("", false);
    </script>
  </body>
</html>

Refactor a messy version of this into early returns yourself.

Mistakes I see a lot

1. Renaming everything to data, info, temp.

2. "Clean" one-liners nobody can debug.

3. Abstracting too early — three similar lines do not always need a framework.

4. Ignoring consistency — mixing camelCase and random abbreviations in one file.

What to try before the next post

  1. Rename three weak variables in an old file.
  2. Split one long function into two named helpers.
  3. Delete one useless comment; add one "why" comment where a rule is hidden.

Next in this series: security basics for frontend — XSS and trusting the browser less.

Try this next outside the series

Engineering habits only stick when they show up in testing, security, and maintenance work.

javascripttutorialsdevelopers