Clean Code Best Practices for Modern JavaScript & TypeScript

Writing clean code is not just about making code work; it is about making it easy to read, understand, and maintain for your future self and other developers on your team. In this article, we will explore some of the best practices for writing clean code in JavaScript and TypeScript.

1. Use Meaningful & Pronounceable Names

Variables, functions, and class names should clearly state what they do. Avoid generic or single-letter names.

// ❌ Bad
const d = new Date();
const x = 10;
function calc(a, b) {
  return a * b;
}

// ✅ Good
const currentDate = new Date();
const maxUserLimit = 10;
function calculateArea(width: number, height: number): number {
  return width * height;
}

2. Write Small, Single-Responsibility Functions

A function should do one thing and do it well. If your function is doing multiple things, break it down into smaller helper functions.

// ❌ Bad
function handleFormSubmit(event: Event) {
  event.preventDefault();
  const data = getFormData();
  if (data.email === "" || !data.email.includes("@")) {
    alert("Invalid Email");
    return;
  }
  fetch("/api/register", { method: "POST", body: JSON.stringify(data) })
    .then(res => res.json())
    .then(data => console.log(data));
}

// ✅ Good
function validateForm(data: UserData): boolean {
  return data.email !== "" && data.email.includes("@");
}

async function registerUser(data: UserData) {
  const response = await fetch("/api/register", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return response.json();
}

3. Leverage TypeScript Features

TypeScript provides compiler safety and rich IDE autocomplete. Always specify explicit types for function signatures and interfaces for data objects.

interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
}

function greetUser(user: User): string {
  return `Hello, ${user.name}! You are logged in as ${user.role}.`;
}

Clean code is an ongoing practice. Keep refactoring and reviewing your code to maintain high code quality!