Lesson 5: Writing Clean JavaScript Code

Learning Objectives

By the end of this lesson, learners will:

• Understand the importance of writing clean, readable code
• Learn formatting, naming, and structural best practices
• Identify and fix messy or error-prone code
• Improve the quality and maintainability of their JavaScript code

Why Clean Code Matters

Writing clean code isn’t just about making it look pretty — it’s about writing code that:

• ✅ Is easy to read and understand
• ✅ Can be debugged and updated more easily
• ✅ Helps other developers (and future you!) work with it smoothly
• ✅ Avoids common mistakes and bugs

Think of clean code as good communication with your future self and teammates.

1. Use Clear and Descriptive Variable Names

✅ Good:

let totalPrice = 49.99;
let userAge = 25;

❌ Bad:

let tp = 49.99;
let a = 25;

Why it matters: Code is read more than it’s written. Good names explain the purpose of the variable.

2. Use Consistent Indentation and Formatting

Most teams use 2 or 4 spaces for indentation. Choose one and stick to it.

✅ Good:

if (score > 90) {
  console.log("Excellent!");
}

❌ Bad:

if(score>90){
  console.log("Excellent!");
}

Why it matters: Proper indentation makes the structure of your code visible at a glance.

3. One Statement Per Line

✅ Good:

let x = 5;
let y = 10;

❌ Bad:

let x = 5; let y = 10;

Why it matters: Keeping things on separate lines improves readability and debugging.

4. Use let and const (Not var)

✅ Use let for values that will change.
✅ Use const for values that won’t change.
❌ Avoid var — it behaves inconsistently due to function scope and hoisting.

Why it matters: let and const are safer and more predictable in modern JavaScript.

5. Write Comments to Explain Why, Not What

✅ Good:

// Calculate discounted price for VIP customers
let finalPrice = basePrice * 0.8;

❌ Bad:

// Multiply basePrice by 0.8
let finalPrice = basePrice * 0.8;

Why it matters: Your code already shows what it does — comments should explain why you’re doing it.

6. Keep Functions and Code Blocks Short

Split long pieces of logic into smaller, reusable functions.

✅ Good:

function calculateDiscount(price, rate) {
  return price * (1 - rate);
}

❌ Bad:

// long block of logic without any structure

Why it matters: Smaller blocks are easier to understand, test, and reuse.

7. Avoid Magic Numbers and Strings

Use named variables instead of hard-coded values.

✅ Good:

const TAX_RATE = 0.07;
let total = price * TAX_RATE;

❌ Bad:

let total = price * 0.07;

Why it matters: It makes your code easier to understand and maintain.

8. Use console.log() Strategically

✅ Use for:

• Debugging
• Learning what values are at a given moment

❌ Don’t leave in production code:

console.log("Testing..."); // Remove when no longer needed

Summary Table

Practice Activity

Rewrite this messy code to make it clean:

var x=10;var y=5;if(x>y){console.log("x is greater")}else{console.log("y is greater")}

✅ Clean version:

let x = 10;
let y = 5;

if (x > y) {
  console.log("x is greater");
} else {
  console.log("y is greater");
}