JavaScript Clean Code Cheatsheet – Fix Code Smells and Write Maintainable Code
Writing clean, readable, and maintainable JavaScript is a skill that separates beginner developers from professionals. Over time, it’s easy for projects to accumulate messy patterns — inconsistent naming, deep nesting, magic numbers, or overly long functions. These code smells not only make debugging harder but also slow down teams and increase technical debt.
This JavaScript Clean Code Cheatsheet is your quick reference to writing better, more professional JavaScript. Each section highlights a bad example (code smell) and a clean alternative, helping you recognize poor coding practices and refactor them into elegant, consistent, and maintainable code.
Whether you’re building a new project or refactoring an old one, following these JavaScript best practices will help you:
- Improve code readability and consistency.
- Avoid bugs caused by unclear naming and logic.
- Reduce duplication and complexity.
- Make your JavaScript easier to test, extend, and collaborate on.
From fixing bad indentation and duplicate code to addressing long functions, tight coupling, and error handling, this cheatsheet covers it all — concise, practical, and ready for everyday development. Bookmark it as your go-to guide to write cleaner, faster, and smarter JavaScript code.
Code Smell to Clean Code: With JavaScript Examples
Formatting & Readability: Indentation & Spacing
Poor indentation and lack of spacing make code hard to scan and maintain. Always use consistent indentation (2 or 4 spaces) and spacing around operators for readability.
// 🔴 Smell: Bad Indentation and lack of Spacing
const sum=(a,b)=>{
const result=a+b;
return result;
}
// 🟢 Clean: Proper Indentation and Spacing
const sum = (a, b) => {
const result = a + b;
return result;
};Formatting & Readability: Consistent Line Breaks
Avoid long lines and clusters of statements. Break statements logically and use line breaks to visually group related code so it's easier to read and maintain.
// 🔴 Smell: Hard to read
if(isLoggedIn){showDashboard();updateUserActivity();logAnalytics();}
// 🟢 Clean: Structured and readable
if (isLoggedIn) {
showDashboard();
updateUserActivity();
logAnalytics();
}Formatting & Readability: Inconsistent Syntaxes
Mixing different coding styles (quotes, semicolons, function styles) causes confusion and inconsistency. Pick a style guide and be consistent.
// 🔴 Smell: Mixed styles
function greet(name) {
return "Hello, " + name
}
const bye = (name) => {
return 'Goodbye, ' + name;
};
// 🟢 Clean: Consistent modern syntax
const greet = (name) => {
return `Hello, ${name}`;
};
const bye = (name) => {
return `Goodbye, ${name}`;
};Formatting & Readability: Inconsistent Naming Cases
Inconsistent use of camelCase, PascalCase, or snake_case makes code unpredictable and error-prone. Choose a naming convention and apply it consistently across the codebase.
// 🔴 Smell: Inconsistent naming let user_name = "Tapas"; let UserAge = 32; let isloggedIn = true; // 🟢 Clean: Consistent camelCase let userName = "Tapas"; let userAge = 32; let isLoggedIn = true;
Formatting & Readability: Overuse of Comments
Too many comments clutter code. Write expressive code and use comments to explain intent, not syntax.
// 🔴 Smell: Over-commented code
// Create user object
// Assign name and email
// Save to database
function saveUser(name, email) {
const user = { name, email };
db.save(user);
}
// 🟢 Clean: Code is self-explanatory
function saveUser(name, email) {
db.save({ name, email });
}Naming & Structure: Clear Variable Names
Meaningless variable names make it hard to understand intent. Use descriptive names that express purpose and context so other developers (and future you) can read intent quickly.
// 🔴 Smell: Unclear variable names let x = 10; let y = 20; // 🟢 Clean: Descriptive variable names let width = 10; let height = 20;
Naming & Structure: Too Many Parameters
Functions with many parameters are hard to read and easy to misuse. Group related parameters into objects (or use a config object) to improve readability and extensibility.
// 🔴 Smell: Too many parameters
function createUser(name, age, email, address, isAdmin) {}
// 🟢 Clean: Use an object parameter
function createUser({ name, age, email, address, isAdmin }) {}Naming & Structure: Ambiguous Function Purpose
Functions should have a clear and single responsibility. Avoid mixing unrelated actions that reduce clarity.
// 🔴 Smell: Function doing multiple things
function updateUser(user) {
user.name = 'Tapas';
sendEmail(user);
logChange(user);
}
// 🟢 Clean: Separate concerns
function updateUser(user) {
user.name = 'Tapas';
}
function notifyUserUpdate(user) {
sendEmail(user);
logChange(user);
}Naming & Structure: Non-standard File Naming
Inconsistent or non-standard file names lead to confusion in large projects. Follow conventions like kebab-case for components and utilities.
// 🔴 Smell: Random naming HeaderFile.js userUTILS.JS Dbhelper.js // 🟢 Clean: Consistent file naming header-file.js user-utils.js db-helper.js
Code Complexity: Magic Numbers/Strings
Avoid unexplained literals (magic numbers/strings). Use named constants to express meaning and make values easier to change and document.
// 🔴 Smell: Magic values if (user.role === "01") discount = 0.1; // 🟢 Clean: Named constants const ADMIN_ROLE = "01"; const ADMIN_DISCOUNT = 0.1; if (user.role === ADMIN_ROLE) discount = ADMIN_DISCOUNT;
Code Complexity: Long Function
Functions that do too much are hard to test and reason about. Break long functions into smaller functions with single responsibilities.
// 🔴 Smell: Long function doing many things
function handleOrder() {
validateInput();
checkInventory();
calculateTotal();
processPayment();
sendEmail();
updateAnalytics();
}
// 🟢 Clean: Decompose into focused functions
function handleOrder() {
validateOrder();
processPayment();
notifyUser();
}
function validateOrder() {
validateInput();
checkInventory();
}
function notifyUser() {
sendEmail();
updateAnalytics();
}Code Complexity: Larger Classes
Classes with many responsibilities violate the Single Responsibility Principle. Split large classes into smaller services that each handle a clear concern.
// 🔴 Smell: God class with many responsibilities
class UserManager {
createUser() {}
deleteUser() {}
sendEmail() {}
logUserActivity() {}
}
// 🟢 Clean: Separate responsibilities into classes/services
class UserService {
createUser() {}
deleteUser() {}
}
class NotificationService {
sendEmail() {}
}
class Logger {
logUserActivity() {}
}Code Complexity: Complex Loops
Overly nested or complicated loops reduce clarity. Use array methods like map, filter, or reduce for Cleaner intent.
// 🔴 Smell: Complex loop logic
for (let i = 0; i < users.length; i++) {
if (users[i].isActive && users[i].age > 18) {
active.push(users[i].name);
}
}
// 🟢 Clean: Expressive functional style
const active = users
.filter(u => u.isActive && u.age > 18)
.map(u => u.name);Code Complexity: Nested Ternary Hell
Avoid nested ternary operators that harm readability. Replace with clear conditionals or helper functions.
// 🔴 Smell: Nested ternary
const status = user
? user.isAdmin
? 'Admin'
: 'User'
: 'Guest';
// 🟢 Clean: Readable conditional
let status;
if (!user) status = 'Guest';
else if (user.isAdmin) status = 'Admin';
else status = 'User';Logic & Maintainability: Duplicate Code
Duplicating logic increases maintenance cost and introduces inconsistencies. Abstract repeated logic into a reusable function to follow DRY (Don't Repeat Yourself).
// 🔴 Smell: Duplicate logic
function addUser() { saveToDB(); logAction(); }
function removeUser() { saveToDB(); logAction(); }
// 🟢 Clean: Reuse behavior
function performUserAction(action) {
saveToDB();
logAction(action);
}Logic & Maintainability: Long Conditional / Nested If
Deeply nested conditionals reduce readability. Use guard clauses or early returns to flatten control flow and make the main path clearer.
// 🔴 Smell: Deeply nested conditionals
if (user) {
if (user.isActive) {
if (user.role === 'admin') {
accessAdminPanel();
}
}
}
// 🟢 Clean: Guard clause / early return
if (!user || !user.isActive || user.role !== 'admin') return;
accessAdminPanel();Logic & Maintainability: Deep Nesting / Pyramid DOM
Excessive nesting in UI code (or logic) makes components hard to reason about. Use early returns, smaller components, or conditional helpers to flatten nesting.
// 🔴 Smell: Pyramid of nested JSX
<div>
{isLoggedIn ? (
<div>
{user.isAdmin ? (
<AdminPanel />
) : (
<UserPanel />
)}
</div>
) : (
<LoginForm />
)}
</div>
// 🟢 Clean: Flattened and readable
{!isLoggedIn && <LoginForm />}
{isLoggedIn && (user.isAdmin ? <AdminPanel /> : <UserPanel />)}Logic & Maintainability: Temporary Variable Abuse
Unnecessary temporary variables add noise. Return expressions directly when it keeps clarity and avoids extraneous identifiers.
// 🔴 Smell: Unnecessary temporary variable const total = price * quantity; return total; // 🟢 Clean: Return expression directly return price * quantity;
Logic & Maintainability: Neglecting Default Cases
Switch statements or enums should always handle unexpected cases. Missing defaults can lead to silent errors.
// 🔴 Smell: Missing default case
switch (role) {
case 'admin': doAdmin(); break;
case 'user': doUser(); break;
}
// 🟢 Clean: Always handle fallback
switch (role) {
case 'admin': return doAdmin();
case 'user': return doUser();
default: return handleUnknown();
}Logic & Maintainability: Implicit Type Coercion
Loose equality (==) can produce confusing results. Always use strict equality (===) for predictable behavior.
// 🔴 Smell: Loose equality
if (count == '5') {}
// 🟢 Clean: Strict equality
if (count === 5) {}Design & Architecture: Primitive Obsession
Relying on primitives to model complex concepts leads to fragile code. Use objects, classes, or value objects to give structure and intent.
// 🔴 Smell: Primitives for structured data
const order = ["Tapas", "123 Main St", 2, 299];
// 🟢 Clean: Use object with named fields
const order = {
customerName: "Tapas",
address: "123 Main St",
quantity: 2,
totalPrice: 299
};Design & Architecture: Tight Coupling / Shotgun Surgery
When small changes force edits across many modules, the system is tightly coupled. Encapsulate responsibilities and create clear interfaces to reduce ripple effects.
// 🔴 Smell: Directly mixing responsibilities
function sendEmail(user) {
console.log("Email sent to", user.email);
updateUserStatus(user.id, "emailed");
addLog("Email", user.id);
}
// 🟢 Clean: Delegate responsibilities
function sendEmail(user) {
console.log("Email sent to", user.email);
notifyUserActions(user.id);
}
function notifyUserActions(userId) {
updateUserStatus(userId, "emailed");
addLog("Email", userId);
}Design & Architecture: Global State Abuse
Overusing global variables leads to hidden dependencies and unexpected mutations. Use scoped variables or state managers.
// 🔴 Smell: Global mutable state
let userCount = 0;
function addUser() { userCount++; }
// 🟢 Clean: Scoped or managed state
function createUserManager() {
let count = 0;
return {
addUser: () => count++,
getCount: () => count
};
}Design & Architecture: Hidden Side Effects
Functions that change external state without clear intent make debugging hard. Use pure functions that return new values instead.
// 🔴 Smell: Function mutates external variable
let total = 0;
function addToTotal(amount) { total += amount; }
// 🟢 Clean: Pure function
function addToTotal(total, amount) {
return total + amount;
}Error Handling & Resilience: Ignoring Errors
Not handling errors can crash applications or leak incorrect states. Use try/catch, validations, and error boundaries to handle failures gracefully and return meaningful feedback.
// 🔴 Smell: Ignoring potential errors
const data = JSON.parse(jsonString);
// 🟢 Clean: Handle errors gracefully
let data;
try {
data = JSON.parse(jsonString);
} catch (error) {
console.error("Invalid JSON:", error);
data = null; // or fallback
}Error Handling & Resilience: Swallowing Errors
Catching errors but not handling or logging them hides important issues and makes debugging difficult. Always log or handle exceptions meaningfully.
// 🔴 Smell: Silent catch block
try {
riskyOperation();
} catch (e) {
// ignored
}
// 🟢 Clean: Log or handle the error
try {
riskyOperation();
} catch (e) {
console.error('Operation failed:', e.message);
showUserFriendlyMessage();
}Error Handling & Resilience: Assuming Success
Ignoring potential failures from async operations can cause runtime crashes or undefined behavior. Always check for success responses or handle errors.
// 🔴 Smell: Assuming request always succeeds
const data = await fetch('/api/user').then(res => res.json());
// 🟢 Clean: Handle possible errors
try {
const res = await fetch('/api/user');
if (!res.ok) throw new Error('Network error');
const data = await res.json();
} catch (err) {
console.error('Failed to fetch user:', err);
}Error Handling & Resilience: Inconsistent Error Handling
Mixing different error-handling styles (callbacks, promises, try/catch) creates confusion. Use a consistent async/await pattern throughout your codebase.
// 🔴 Smell: Mixing callback and promise error handling
getData((err, data) => {
if (err) throw err;
processData(data).catch(console.error);
});
// 🟢 Clean: Consistent async/await error handling
try {
const data = await getDataAsync();
await processData(data);
} catch (err) {
console.error('Error processing data:', err);
}Performance & Efficiency: Unnecessary Loops
Looping multiple times over the same data adds redundancy and increases computational cost. Combine operations when possible for cleaner, faster code.
// 🔴 Smell: Multiple loops over same array
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);
const doubled = [];
evens.forEach(e => doubled.push(e * 2));
// 🟢 Clean: Combine using reduce
const doubledEvens = numbers.reduce((acc, n) => {
if (n % 2 === 0) acc.push(n * 2);
return acc;
}, []);Performance & Efficiency: Blocking Operations
Long-running synchronous loops block the main thread and freeze the UI. Defer or split heavy tasks to keep the app responsive.
// 🔴 Smell: CPU-heavy loop blocks UI
for (let i = 0; i < 1e9; i++) {
heavyCalculation(i);
}
// 🟢 Clean: Offload using setTimeout or Web Workers
function runHeavyTask() {
setTimeout(() => {
for (let i = 0; i < 1e9; i++) heavyCalculation(i);
}, 0);
}
runHeavyTask();Performance & Efficiency: Unnecessary Re-Renders (React)
Passing new inline functions or non-memoized props causes avoidable re-renders. Memoize callbacks or components for better performance.
// 🔴 Smell: Inline function recreated on every render
function List({ items }) {
return items.map(item => (
<Item key={item.id} onClick={() => alert(item.name)} />
));
}
// 🟢 Clean: Memoize the callback
function List({ items }) {
const handleClick = useCallback((name) => alert(name), []);
return items.map(item => (
<Item key={item.id} onClick={() => handleClick(item.name)} />
));
}
