Don’t Do This—Unless You Want 💩 Frontend Code

Clean, maintainable code saves time and headaches. Below are 17 things to avoid, plus 8 bonus best practices—all with simple examples.

---

1. Relying on Global Variables

Problem: Hard to track and test.

// ❌ Globals
window.userId = 42;

// ✅ Pass as argument
function greet(userId) {
  console.log(`Hello, user ${userId}`);
}
greet(42);

2. Using Vague Names

Problem: Unclear intent.

// ❌ Vague
function doStuff(a) { … }

// ✅ Descriptive
function formatDate(timestamp) { … }

3. Creating “God” Functions

Problem: Too many responsibilities.

// ❌ One big function
function init() {
  fetchData();
  validate();
  render();
}

// ✅ Split into small functions
async function init() {
  const data = await loadData();
  const clean = validateData(data);
  renderUI(clean);
}

4. Passing Many Similar Parameters

Problem: Easy to mix up order.

// ❌ Many args
setup(true, 5, 3000);

// ✅ Options object
setup({ autoStart: true, retries: 5, timeoutMs: 3000 });

5. Leaking Resources

Problem: Memory leaks and stale listeners.

useEffect(() => {
  window.addEventListener('resize', onResize);
  return () => {
    window.removeEventListener('resize', onResize);
  };
}, []);

6. Omitting Units in Variable Names

Problem: Confusion over what values mean.

// ❌ What is 500?
const delay = 500;

// ✅ Include unit
const delayMs = 500;

7. Deeply Nested Conditionals

Problem: Hard to read.

// ❌ Too nested
if (user) {
  if (user.active) {
    if (!user.error) {
      doWork();
    }
  }
}

// ✅ Early return
function doWorkIfActive(user) {
  if (!user || !user.active || user.error) return;
  doWork();
}

8. Hardcoding URLs or Keys

Problem: Difficult to change per environment.

# .env
API_URL=https://api.example.com

const apiUrl = process.env.API_URL;

9. Keeping “Just in Case” Comments

Problem: Clutters code.

Tip: Use Git history instead of commented-out blocks.

10. One Huge utils.js File

Problem: Hard to find helpers.

src/
  utils/
    date.js
    string.js
    api.js

11. Swallowing Errors Silently

Problem: Bugs hide.

try {
  riskyAction();
} catch (err) {
  console.error(err);
  alert('Oops, something went wrong');
}

12. Monolithic Files

Problem: Too much in one place.

Tip: Separate logic, UI, and styles into different files.

13. No Linter

Problem: Inconsistent style and missed errors.

Tip: Use ESLint or similar and fix warnings—don’t disable them globally.

14. Messy Folder Structure

Problem: Hard to navigate.

src/
  auth/
    LoginForm.vue
    authAPI.js
  dashboard/
    Dashboard.vue
    stats/
      StatsChart.js

15. Useless Comments

Problem: Over-explaining obvious code.

Tip: Name things clearly instead of writing “// increment i”.

16. No Comments on Workarounds

Problem: Future you won’t know why.

Tip: Explain hacks with links to issues or specs.

17. Reinventing the Wheel

Problem: Wastes time and increases bundle size.

Tip: Use well-known libraries (e.g. date-fns, lodash-es) and import only what you need.

---

8 Bonus Best Practices

1. Code Splitting Load modules only when needed:

   const Chart = React.lazy(() => import('./Chart'));

1. Performance

• Lazy-load images: <img loading="lazy" …>
• Cache with Service Workers

• Audit with Lighthouse.

  1. Testing

• Unit-test pure functions.

• Integration-test UI with Jest + Testing Library.

  1. State Management Keep component state local; use Redux/Vuex for global state with clear module structure.
  2. Accessibility (a11y)

• Use ARIA roles/labels.

• Ensure keyboard navigation.

• Check color contrast.

  1. Documentation

• Write a clear README.

• Use Storybook to demo components.

  1. CI/CD

• Run lint/tests on every push (GitHub Actions, GitLab CI).

• Automate deployment pipelines.

  1. Code Reviews

• Require pull-request reviews.

• Share feedback and catch bugs early.