Writing Clean and Readable JavaScript Code
Before learning variables, data types, and other concepts, it’s important to understand how to write clean and readable JavaScript code. Clean code is easy to understand, maintain, and debug. This chapter will help you develop good habits from the beginning, which is essential for college students and freshers preparing for real-world development.
Writing clean code is not about writing long or complex programs. It’s about writing code that looks simple and makes sense the moment someone reads it.
Why Clean Code Matters
Clean code helps you:
Understand your own code later
Work better in college projects
Perform well in interviews
Debug errors quickly
Collaborate with team members
Build confidence while coding
Good companies prefer clean, clear code rather than complex code.
Rule 1: Use Proper Indentation
Indentation means giving proper spacing to your code so it becomes easy to read.
Browsers don’t care about indentation, but humans do.
Example (bad):
if(true){console.log("Hello");}
Same code (clean):
if (true) {
console.log("Hello");
}
Looks much better and easier to understand.
Rule 2: Use Meaningful Variable Names
Never use confusing names like:
let a = 10;
let b = 20;
Better:
let price = 10;
let tax = 20;
The name should tell what the value represents.
Rule 3: Write Comments When Needed
Comments help you or someone else understand your logic later.
// Calculate total cost
let total = price + tax;
// Print result
console.log(total);
Comments are ignored by JavaScript, but they help developers understand the code.
Rule 4: Use Consistent Formatting
Formatting includes:
Space after commas
Line breaks
Proper spacing around operators
Example (bad):
let x=10+20;
console.log(x);
Clean:
let x = 10 + 20;
console.log(x);
Rule 5: Keep Code Simple
Beginners often write code in a very complex way.
But simplicity is the real skill.
Example (too complex):
let num1 = 10;
let num2 = 20;
let result = num1 + num2;
console.log("The result of adding num1 and num2 is:", result);
Simple version:
let result = 10 + 20;
console.log("Result:", result);
Rule 6: Use New Lines to Separate Logic
New lines make your code readable.
Example:
let name = "Rohan";
let age = 20;
console.log("Name:", name);
console.log("Age:", age);
It’s easier to follow the flow.
Rule 7: Avoid Unnecessary Code
Beginners often write extra lines that do nothing.
It is better to remove unused variables and logs.
Example (bad):
let x = 5;
let y = 10;
// let z; // unnecessary variable
console.log("Start");
console.log("Sum:", x + y);
console.log("End");
Clean:
let x = 5;
let y = 10;
console.log("Sum:", x + y);
Example: Clean vs Unclean Code
Unclean Code:
let n="Rahul"; let a=21;console.log("Name="+n);console.log("Age="+a);
Clean Code:
let name = "Rahul";
let age = 21;
console.log("Name:", name);
console.log("Age:", age);
Same output, but the clean version is much easier to read.
Example Program With Output
// Student details
let studentName = "Meera";
let courseName = "JavaScript Basics";
console.log("Student Name:", studentName);
console.log("Course Name:", courseName);
// Calculate marks
let marks1 = 45;
let marks2 = 40;
let totalMarks = marks1 + marks2;
console.log("Total Marks:", totalMarks);
Output:
Student Name: Meera
Course Name: JavaScript Basics
Total Marks: 85
This example follows all clean code rules.
Practice Task (Do it Yourself)
Write a clean program that prints:
Your name
Your college name
Your favorite programming language
Use proper indentation, spacing, and comments.
