Craft Clear and Maintainable Code: Getting started with Clean Coding
Tags: cleancode, cleancoding, bestpractices, beginners
Published: 2024-05-30 11:16:36

We want you to imagine something...

Let's say you just joined a company and you're assigned a project.

You're really excited about it, but when you start going through the codebase, you notice that there's a lot of spaghetti code; cluttered and unreadable.

The more time you spend reading it, the more confusion you have and the more you start doubting yourself and experiencing something called imposter syndrome.

This story is as **real** as the **sun** and the **wind** and is not the only scenario in real life.

The only way this doesn’t happen is to ensure the principles of Clean Code are practiced.
![Infrasity](https://media.licdn.com/dms/image/D4D3DAQHFzUxVo6jHBg/image-scale_191_1128/0/1694951147476/infrasity_cover?e=2147483647&v=beta&t=oS_E6ixVpThzWAJQ0oYxZouD2bRM-8H_zImyxeYe-Wo)

We at [Infrasity](infrasity.com) specialize in crafting tech content that informs and drives a ~20% increase in traffic and developer sign-ups. Our content, tailored for developers and infrastructure engineers, is strategically distributed across platforms like [Dev.to](dev.to), [Medium](medium.com), and [Stack Overflow](https://stackoverflow.com/), ensuring maximum reach. We deal in content & (Go-To-Marketing)GTM strategies for companies like infrastructure management, API, DevX, and Dev Tools. We’ve helped some of the world’s best infrastructure companies like [Scalr](https://scalr.com/), [Env0](https://env0.com/), [Terrateam](https://terrateam.io/), [Terramate](https://terramate.io/), [Devzero](https://devzero.io/), [Kubiya](https://kubiya.ai/), and [Firefly.ai](https://firefly.ai/), just to name a few, with tech content marketing.

In this article brought to you by [Infrasity](infrasity.com), you’ll learn what Clean Code is all about, how to assess if a code follows the clean code principles, which if not followed will hinder productivity, increase debugging time, the benefits of following clean code principles, how to clean your code, tools for assisting in writing clean code and how to make it a habit.

## Example (Bad Code)

In the following example for a mock club app, the user is asked to enter name, email, and age, and based on that, the code allows the user to enter if the age is greater than or equal to 18.

```js
const readline = require("node:readline");


// Global variables (not recommended)
var userName = "";
var userEmail = "";
var userAge = 0;


async function ask(q) {
 return new Promise((resolve) => {
   const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout,
   });
   rl.question(q, (i) => {
     resolve(i);
     rl.close();
   });
 });
}


async function doStuff() {
 // Logic mixed with unrelated task (data collection)
 userName = await ask("Enter your name:");
 userEmail = await ask("Enter your email:");


 // Logic mixed with unrelated task (greeting user)
 if (userName) {
   console.log("Hello, " + userName + "!");
 } else {
   console.log("Please enter your name.");
   doStuff(); // Recursive call can lead to infinite loop
 }


 // Repetitive code (can be refactored)
 userAge = parseInt(await ask("Enter your age:"));
 if (isNaN(userAge)) {
   console.log("Please enter a valid number for age.");
   doStuff(); // Recursive call can lead to infinite loop
 } else if (userAge < 18) {
   console.log("You must be 18 or older to proceed.");
 } else {
   console.log("Welcome!");
 }
}


doStuff();
```

As you can see, it’s harder to understand what’s going on, the variable names as well as the functional names are messed up. Not only that, one function named `doStuff` does multiple tasks (responsibilities that aren’t **closely related**) and that’s something that clutters the code and makes it **spaghetti**.

## Example (Clean Code)
By applying the lessons that you’ll learn from this blog post, you’ll be able to re-write the above code like this!
```js
const readline = require("node:readline");


// User data object (encapsulation)
const userData = {
 name: "",
 email: "",
 age: 0,
};
async function ask(question) {
 return new Promise((resolve) => {
   const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout,
   });
   rl.question(question, (input) => {
     resolve(input);
     rl.close();
   });
 });
}


async function keepAsking(question) {
 while (true) {
   const answer = await ask(question);
   if (answer) {
     return answer;
   }
 }
}


async function collectUserData() {
 // Separate function for data collection
 userData.name = await keepAsking("Enter your name:");
 userData.email = await keepAsking("Enter your email:");
}


function greetUser() {
 // Logic focused on greeting
 if (userData.name) {
   console.log("Hello, " + userData.name + "!");
 } else {
   console.log("Please enter your name.");
 }
}


async function validateAge() {
 // Refactored validation with loop for clarity
 while (true) {
   userData.age = parseInt(await keepAsking("Enter your age:"));
   if (!isNaN(userData.age)) {
     break; // Exit loop on valid input
   }
   console.log("Please enter a valid number for age.");
 }


 if (userData.age < 18) {
   console.log("You must be 18 or older to proceed.");
 } else {
   console.log("Welcome!");
 }
}


async function main() {
 await collectUserData();
 greetUser();
 await validateAge();
}
main();
```
As you can see how readable it has become compared to the previous iteration by splitting the function into smaller functions, following the S in SOLID principles and the tenets of clean code that you’ll learn which will help in developing the perspective it takes to go from writing ugly unmaintainable code to cleaner code.

## What is Clean Code?

Clean code is code that is easy to read, understand and maintain. It's a code written in a way that makes it easy for other developers to understand and work with.
Clean, well-formatted code with clear variable names, consistent indentation, and a logical flow makes it easier to read, debug, maintain, and collaborate on. Take the time to write clean code – You and your team will save a great deal of headaches in the long run!
As far as clean code principles are concerned, we at [Infrasity ](infrasity.com)keep in mind all the best practices of writing clean code, inculcating SOLID principles, using Linting tools, well formatted code, making sure that comments are excluded when committing the code, and only necessary comments make it to the commits. [Infrasity](infrasity.com) has made a lot of demo recipe libraries to assist [Devzero](devzero.io), one of our customers, in creating recipe libraries, which helped them in quick developer onboarding. The recipe libraries created were a combination of different tech stacks, like NodeJs, BunJS, React, and CockroachDB, so that the end users could directly use them as boilerplate code without writing the entire code from scratch. All the code written by our developers incorporated clean code principles making the codebase robust.

## Who needs to learn to write Clean Code?

- **New developers** who are joining a company, and are trying to understand the codebase.
- **Anyone who has to deal with code** that was not written by themselves.
- **Senior developers** who are trying to improve the codebase.

This group consists of people who want to improve the quality of their code regardless of whether they are working on a SQL file or a Python script.

Even though the principles of clean code are applicable to all programming languages, making them a valuable investment in your coding skills, we'll stick to showcasing the value of clean code in JavaScript for the sake of simplicity.

## Why Should you learn to write Clean Code?

![Clean Code meme](https://img.devrant.com/devrant/rant/r_1205476_UFofK.jpg)

_Source: devrant_

Even though the above story We asked you to imagine should be enough,
**Let’s take another example:**
Imagine your code as your kitchen. You love to cook, but lately, things feel messy. There's a faint odour (a code smell!), and it's getting harder to find things (your code is getting complex).
**Code smells** are warning signs that your code could be improved. They're not necessarily errors, but more like burnt toast - a sign something isn't quite right. Just like cleaning your kitchen makes cooking more enjoyable, clean code principles can help you write code that's easier to understand and maintain.
**Here's the analogy:**
**Duplicate Code:** It's like having multiple half-used spice jars littering your counter. Clean Code Principle: DRY (Don't Repeat Yourself) - Consolidate that code into reusable functions, like a spice rack!
**Long Method Names:** Imagine labels on your jars that are tiny novels. Clean Code Principle: **Meaningful Names** - Use clear and concise names that tell you exactly what the code does, like "Garlic Powder" or "Cayenne Pepper".
**Magic Numbers:** Random numbers sprinkled throughout your code are like mystery ingredients. Clean Code Principle: **Use Constants** - Give these numbers clear names, like "TEASPOON" or "BAKING_SODA_AMOUNT".
Clean code principles are like good kitchen habits.
They help you write code that's:
**Readable:** Easy for you and others to understand, like a well-organized recipe.
**Maintainable:** Easier to fix and update, like having everything in its place.
**Scalable:** Able to grow as your project grows, like having plenty of cabinet space for future ingredients.

## So here are some benefits of writing clean code:

**Get Things Done Faster:** Code that is easier to understand and modify makes it faster to complete tasks.
**Work Better Together:** Clear code helps developers work together more effectively.
**Build For The Future:** Clean code ensures that your codebase is easy to maintain and grow over time.

## The Hidden Cost of Messy Code

### Traditional Approach: A Recipe for Headaches
Messed code is filled with unclear variable names, a lack of indentation, and spaghetti logic. This makes it difficult to read and debug.
Messy code examples might look something like these:

### Unclear variable names
Unclear names make the code cryptic. You (or someone else reading it) might spend minutes guessing what the variable in question represents.

**Example:**

```js
// Unclear variable names
let thingy = 10;
if (thingy > 5) {
  let result = thingy * 2;
  console.log(result);
}
```

**Challenge**: What does `thingy `represent? What's the purpose of this code?

### Inconsistent indentation
Indentation visually represents code blocks. Inconsistent or missing indentation makes it hard to see the flow of logic.

**Example**:

```js
// Inconsistent indentation
let age = 30;
if (age > 21)
// Missing indentation here
console.log("You can buy alcohol");
else {
  console.log("No alcohol for you!");
}
```

**Challenge:** How many lines of code are actually part of the if statement?

### Spaghetti Logic
```js
// Spaghetti Logic
let score = 75;
if (score >= 90) {
  console.log("Excellent!");
} else if (score < 70) {
  console.log("Needs improvement");
} else {
  if (score >= 80) {
    console.log("Good job!");
  } else {
    console.log("Try harder next time!");
  }
}
```
**Challenge:** Can you rewrite this code with a simpler logic flow?

## The Domino Effect of Code Confusion

- Each of these issues can have a domino effect:
- Unclear code takes **longer to understand**, making it **harder to pinpoint bugs**.
- Teammates **struggle to contribute** to a messy codebase, hindering development.
- Future modifications become a guessing game, potentially introducing _new bugs_.

## Embracing Clean Code: Principles for Beginners

![Clean Code Meme](https://cdn-media-1.freecodecamp.org/images/0*q3-4kypImPD0VDPg.jpg)

_Source: freecodecamp_

Now let's introduce the fundamental principles of clean code, making them accessible for everyone.
**SOLID Principles:**
SOLID is an acronym for five key design principles that promote well-structured, maintainable, and flexible **object-oriented code**.
Here's a breakdown of each principle in the context of JavaScript:

1. **Single Responsibility Principle (SRP):**
**Concept:** Each class, module, or function should have a single, well-defined responsibility. This means it should perform a specific task and avoid having multiple unrelated functionalities crammed together.

**Benefits:**
- Increased code clarity: Easier to understand what a piece of code does.
- Reduced complexity: Changes in one area are less likely to impact others.
- Improved maintainability: Easier to modify or extend code without unintended side effects.

**Example:**
```js
// Bad example: A class with multiple responsibilities
class UserManager {
   constructor(user) {
     this.user = user;
   }
    saveUser() {
     // Code to save user data
   }
    sendEmail() {
     // Code to send email
   }
    logActivity() {
     // Code to log user activity
   }
 }
  // Good example: Separate classes with single responsibilities
 class User {
   constructor(user) {
     this.user = user;
   }
    saveUser() {
     // Code to save user data
   }
 }
  class EmailService {
   sendEmail() {
     // Code to send email
   }
 }
  class Logger {
   logActivity() {
     // Code to log user activity
   }
 }
```
Separating classes based on how closely the responsibilities are related makes it so much better to debug and understand.

2. **Open-Closed Principle (OCP):**

Functional programming encourages creating pure functions (without side effects) that can be easily composed with other functions. This allows for extension without modifying existing code.
**JavaScript Example (Bad):**
	**Concept:**
Software entities (classes, modules) should be open for extension but closed for modification. This means you should be able to add new functionality without changing existing code.
**Benefits:**
Increased flexibility: Easier to adapt code to new requirements.
Reduced risk of regressions: Changes in one area are less likely to break other parts.

**Example:**
```js
// Bad example: A class that violates the OCP
class Circle {
   constructor(radius) {
     this.radius = radius;
   }
    getArea() {
     return Math.PI * this.radius ** 2;
   }
 }
  class Square {
   constructor(side) {
     this.side = side;
   }
    getArea() {
     return this.side ** 2;
   }
 }
  // Good example: Using polymorphism and interfaces
 class Shape {
   getArea() {
     throw new Error("getArea method must be implemented");
   }
 }
  class Circle extends Shape {
   constructor(radius) {
     super();
     this.radius = radius;
   }
    getArea() {
     return Math.PI * this.radius ** 2;
   }
 }
  class Square extends Shape {
   constructor(side) {
     super();
     this.side = side;
   }
    getArea() {
     return this.side ** 2;
   }
 }
```

As we can see, the we made the subclass open to extension but closed for modification, making the code cleaner and easier to debug, also ensuring nothing that the functions that need to be present in the derived class needs to be implemented.

3. **Liskov Substitution Principle (LSP)**
 
**Concept:** Subtypes (child classes) should be substitutable for their base types (parent classes) without altering the program's correctness. In other words, if you expect a base-type object, you should be able to use a subtype object without encountering unexpected behaviour.
**Benefits:**
Improved code reliability: Ensures that child classes behave consistently with the base class contract.
Increased maintainability: Easier to refactor code by swapping subtypes without breaking functionality.
		**Example:**
```js
		class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Square extends Shape {
  constructor(length) {
    super(length, length); // Square has same width and height
  }
}

class AreaCalculator {
  static calculateArea(shapes) {
    let totalArea = 0;
    for (const shape of shapes) {
      totalArea += shape.getArea();
      console.log(shape.getArea()); // implemented in both rectangle and square
    }
    return totalArea;
  }
}
const rectangle = new Shape(5, 4);
const square = new Square(3);
const shapes = [rectangle, square];

const totalArea = AreaCalculator.calculateArea(shapes);
console.log(totalArea); // Output: 29 (incorrect, Square area is counted twice)
```

**Why it's wrong?**
In the Shape class, getArea() assumes width and height are independent.
However, Square enforces a square shape (width = height).
Setting the height of the rectangle through the square instance modifies
both width and height of the square, leading to an incorrect total area.

**Fixed Code**
```js
class Shape {
 constructor(width, height) {
   if (new.target === Shape) {
     throw new Error("Shape is an abstract class and cannot be instantiated");
   }
   this.width = width;
   this.height = height;
 }


 getArea() {
   throw new Error("getArea() must be implemented in subclasses");
 }
}


class Rectangle extends Shape {
 constructor(width, height) {
   super(width, height);
 }


 getArea() {
   return this.width * this.height;
 }
}


class Square extends Shape {
 constructor(length) {
   super(length, length);
 }


 getArea() {
   return this.width * this.height; // Can directly use width and height here
 }
}


class AreaCalculator {
 static calculateArea(shapes) {
   let totalArea = 0;
   for (const shape of shapes) {
     if (typeof shape.getArea === "function") {
       totalArea += shape.getArea();
     } else {
       throw new Error("Object does not have a getArea() method");
     }
   }
   return totalArea;
 }
}


// Usage (fixed)
const rectangle = new Rectangle(5, 4);
const square = new Square(3);
const shapes = [rectangle, square];


const totalArea = AreaCalculator.calculateArea(shapes);
console.log(totalArea); // Output: 17 (correct)
```

**Improvements:**
**Abstract** `Shape` **class:** We make Shape an abstract class using `new.target === Shape` to prevent direct instantiation. Subclasses like `Rectangle` and `Square` are the ones that can be created.
Enforced getArea: The base Shape class throws an error if getArea is not implemented in subclasses, ensuring all shapes have a way to calculate area.
**Type check in** `AreaCalculator`: We check for the existence of a `getArea` function using `typeof`. This allows for more flexibility with different shape implementations.

**This revised code exemplifies LSP better by:**

- Defining a clear contract (`getArea`) that subclasses must implement.
- Enforcing consistency in area calculation behaviour.
- Making the code more robust to potential future changes in shape types.

4. **Interface Segregation Principle (ISP)**
 
**Concept**: Clients (code that uses a class) should not be forced to depend on methods they don't use. Break down large interfaces into smaller, more specific ones. This promotes loose coupling between classes.
**Benefits**:
Improved flexibility: Clients can only depend on the functionality they need.
**Reduced complexity**: Smaller interfaces are easier to understand and implement.

**Example**:
```js
// This example demonstrates the Liskov Substitution Principle (LSP).
// The Parrot class is a subclass of Bird, and it can be used as a
// substitute for Bird objects without affecting the correctness of the program.
class Bird {
 constructor(name) {
   this.name = name;
 }


 // The Bird class provides a basic implementation of the fly() method.
 fly() {
   console.log(`${this.name} is flying.`);
 }
}


class Parrot extends Bird {
 constructor(name, color) {
   super(name);
   this.color = color;
 }


 // The Parrot class provides a more specific implementation of the fly() method.
 fly() {
   console.log(`${this.name} the ${this.color} parrot is flying.`);
 }
}


const parrot = new Parrot("Sunny", "blue");
const bird = new Bird("Sunny", "blue");


parrot.fly();
bird.fly();
```

A **Parrot** object (subclass) can be used in place of a **Bird** object (superclass) without causing any errors or unexpected behaviour.
The **fly** method still fulfils the core functionality of a bird flying, but the **Parrot** class adds more specific details.

5. **Dependency Inversion Principle (DIP)**
 
**Concept:** High-level modules (classes that depend on others) should not depend on low-level modules (classes that are implemented). Both should depend on abstractions (interfaces or abstract classes). This promotes loose coupling and easier testing.
**Benefits:**

- **Improved testability**: Easier to mock (create a fake implementation of) low-level modules for unit testing.
- **Increased flexibility**: Easier to swap out implementations of low-level modules without affecting high-level modules.
	**Example:**
```js
// Bad example: A class that depends on a low-level module
class FileWriter {
 constructor() {
   this.reader = new FileReader();
 }


 writeToFile() {
   this.reader.readFile("example.txt");
 }
}
```
**Explanation of the Violation:**
`FileWriter` class:
The constructor directly creates a new instance of `FileReader`. This tightly couples `FileWriter` to the specific implementation of `FileReader`.
If you ever need to use a different file reading mechanism (e.g., reading from a database or network), you'd have to modify the `FileWriter` class to use the new functionality.
Problems with this approach:
**Inflexible:** The code is limited to using `FileReader`. Switching to a different reading method requires code changes in FileWriter.
**Testability Issues:** Mocking or stubbing FileReader for unit tests becomes difficult because it's directly instantiated within FileWriter.
```js
// Good example: A class that depends on an interface
class FileWriter {
 constructor(reader) {
   this.reader = reader;
 }


 writeToFile() {
   this.reader.readFile("example.txt");
 }
}
const fileReader = new FileReader();
const fileWriter = new FileWriter(fileReader);
```

**Dependency Inversion in Action:**

1. No direct `FileReader `usage: The `FileWriter `class doesn't create a new `FileReader `instance itself. Instead, it takes a reader object as a constructor argument.
2. Abstraction through Interface: We can assume there's an implicit interface (or potentially an abstract class) that defines the readFile method. This interface represents the abstraction for file reading functionality.
3. **Dependency Injection:** By accepting a reader object in the constructor, `FileWriter` injects its dependency for file reading. This dependency can be any object that fulfils the `readFile `method's contract.
4. Benefits of this approach:
5. **Flexibility:** You can use different implementations of the file reading interface with `FileWriter`. For instance, you could inject a `DatabaseReader` for reading from a database instead of `FileReader`.
6. **Loose Coupling:** `FileWriter `doesn't rely on a specific `FileReader` implementation. It depends on the ability to read files, which makes the code more adaptable.
7. **Improved Testability:** It's easier to write unit tests for FileWriter because you can mock or stub the reader dependency to isolate the writing logic.

**Benefits of this approach:**

- **Flexibility:** You can use different implementations of the file reading interface with FileWriter. For instance, you could inject a DatabaseReader for reading from a database instead of FileReader.
- **Loose Coupling:** FileWriter doesn't rely on a specific FileReader implementation. It depends on the ability to read files, which makes the code more adaptable.
- **Improved Testability:** It's easier to write unit tests for FileWriter because you can mock or stub the reader dependency to isolate the writing logic.

**Additional Notes:**

- In JavaScript, interfaces are not explicitly declared like in some other languages. However, the concept of interfaces can still be applied through functions or abstract classes that define the expected behaviour.
- The above code snippet showcases the constructor injection pattern, which is a common way to implement dependency injection.

![cat meme](https://res.cloudinary.com/practicaldev/image/fetch/s--U6dysjeQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07u8tscy08hq9o2ijvn7.gif)

**Meaningful Names:**
Imagine a variable named x1 or a function named `doStuff`. What do they do? Instead, use descriptive names that reflect their purpose.

- For a variable storing a user's age, use userAge.
- For a function calculating the area of a circle, use `calculateCircleArea`.
- Descriptive names make the code **self-documenting** and easier to understand.

**Before**:
```js
function processInfo(data1, data2) {
// Do something with data
}

let tempVar = calculateSomething();
```
**After**:
```js
function calculateUserDiscount(userData, productPrice) {
// Calculate discount based on user data and product price
}
const userAge = getUserInput("What is your age?");
```

**Formatting and Indentation:** 
Think of proper formatting and indentation as adding spaces and line breaks to your code. It visually represents the code's structure, similar to paragraphs and bullet points in writing. Consistent indentation shows which lines of code belong to loops, if statements, and functions.

- Use spaces around arithmetic operators.
- Indent code blocks within functions and loops consistently (usually 2 or 4 spaces per level).
- Proper formatting makes the code flow clear and easier to follow.

**Before**
```js
let message = "Hello";console.log(message)
if(age > 21){message = "Welcome!"}else{message = "See you later!"}
```
**After**:
```js
let message = "Hello";
console.log(message);

if (age > 21) {
message = "Welcome!";
} else {
message = "See you later!";
}
```

**Single Responsibility**:
Imagine a function that calculates a discount, applies it to a price, and then formats the final price with a currency symbol.
**That's doing a lot!**
The Single Responsibility Principle suggests each function should have a single, well-defined task.

- Break down complex functions into smaller ones with specific purposes.
- Each function should ideally do one thing and do it well.
- This makes the code more modular, easier to test, and improves reusability.

**Before:**
```js
function calculateAndFormatPrice(price, discount) {
    const discountedPrice = price * (1 - discount);
    const formattedPrice = `$${discountedPrice.toFixed(2)}`;
    return formattedPrice;
}
```
**After**
```js
function calculateDiscount(price, discount) {
    return price * (1 - discount);
}

function formatPrice(price) {
    return `$${price.toFixed(2)}`;
}

const discountedPrice = calculateDiscount(productPrice, discountRate);
const formattedPrice = formatPrice(discountedPrice);
```

- **Comments (Use Sparingly):**
Comments can help explain complex logic, but use them sparingly to avoid clutter and outdated information.
**Before:**
```js
// This function calculates the area of a circle (pi * r^2)
function calculateArea(radius) {
    const area = Math.PI * radius * radius;
    return area;
}
```
**After:**
```js
function calculateCircleArea(radius) {
    const area = Math.PI * radius * radius;
    return area;
}
```

**Minimize Hardcoding:**
Hardcoded information like numbers or strings directly written in the code can make it inflexible.
Instead, use variables or constants whenever possible.

- Store configuration values, formulas, or messages in variables or constants.
- This makes the code adaptable and easier to modify if needed.

**Before**:
```js
const discountRate = 0.1; // 10% discount
const message = "Welcome new user!";

if (userLevel === "VIP") {
    discountRate = 0.2; // 20% discount for VIPs
}

console.log(message);
```

**After**:
```js
const DISCOUNT_RATES = {
    standard: 0.1,
    vip: 0.2,
};

const discountRate = userLevel === "VIP" ? DISCOUNT_RATES.vip : DISCOUNT_RATES.standard;
const welcomeMessage = "Welcome new user!";

console.log(welcomeMessage);
```

**DRY Principle: Eliminate Repetition**
It stands for **Don't Repeat Yourself**.
Imagine writing the same logic for calculating discounts in multiple places.
DRY reminds us to avoid this redundancy.
**Before:**
```js
const array = [1, 2, 3, 4, 5];

console.log(array[0] * array[0]);
console.log(array[1] * array[1]);
console.log(array[2] * array[2]);
console.log(array[3] * array[3]);
console.log(array[4] * array[4]);
```

**After:**
```js
const printArraySquare = (array) => {
    for (let i = 0; i < array.length i++)
    {
        console.log(array[i] * array[i]);
    }
}
const array = [1, 2, 3, 4, 5];
printArraySquare(array);
```

## Essential Tools for Clean Coding
Writing clean code isn't just about following principles – it's about having the right tools in your belt!
Here's a look at some beginner-friendly tools to help you write clean and maintainable code:

1. **Linters: Your Code's Grammar Police**
Imagine having a tool that scans your writing and points out typos, grammatical errors, and stylistic inconsistencies. Linters do the same for your code! They are automated tools that analyze your code for potential errors and style violations based on predefined rules.
**Examples**: ESLint (JavaScript), StyleCop (C#), Pylint (Python), SonarLint

2. **Code Formatters: Auto-magically Tidy Code**
Ever argued with a teammate about the number of spaces after an indent? Code formatters take the guesswork out of formatting. These tools automatically reformat your code according to a pre-defined style guide.
Examples: Prettier (various languages), Beautify (various languages), Black (Python)

3. **Version Control Systems (Git): Your Code Time Machine**
Version control systems (VCS) like Git act as a safety net for your code. They track all changes you make, allowing you to Revert to previous versions, See how your code has evolved over time, collaborate with others, and track their changes.
**Learning Resource:** https://git-scm.com/book/en/v2

4. **AI-powered Coding Assistants: Your Smart Code Buddy**
The world of AI is making its way into coding! AI-powered coding assistants can analyze your code, suggest improvements, recommend best practices, and even help you complete code snippets.
**Examples:** GitHub Copilot, Tabnine, Kite

5. **Code Review Tools: Your Modern Code Review Solution**
Reviewing code has never been easier cause of the tech that is available. These tools not only tell what flaws your code has but also assess the quality of your code by integrating it into your project. These tools also help in identifying [code smells](https://en.wikipedia.org/wiki/Code_smell). 
**Examples:** [SonarQube](https://docs.sonarsource.com/sonarqube/latest/), Axolo, Crucible

## Building the Clean Code Habit
![Clean Code Meme](https://miro.medium.com/v2/resize:fit:720/format:webp/0*flOFNulDD-rk5GKs)

_Source: Medium_

Writing clean code isn't just about knowing the principles and tools – it's about developing good habits.

Here are some practical tips for beginners to cultivate the art of clean coding:

1. **Learn from the Masters:**

    Immerse yourself in clean code examples! Look at open-source projects known for their clean code practices.
    
    Many experienced developers share code reviews and tutorials online.
    
    By studying how others write clean code, you'll pick up valuable techniques and best practices.

- Open-source projects like [ReactJS](https://github.com/facebook/react), [Django ](https://github.com/django/django)and [Telegram Desktop](https://github.com/telegramdesktop/tdesktop) on GitHub
- Code review blogs and articles (like this one) and platforms like [Code Review at Stack Exchange](https://codereview.stackexchange.com/) 
- Online tutorials and courses on clean coding (mentioned in resources at the end of the article)

2. **Start Small, Win Big:**
_Don't try to rewrite your entire codebase overnight._
Focus on incorporating clean code principles in smaller, **manageable chunks**.
Start with a single function, refactor a specific section of code, or write a new piece with clean code practices in mind.
These steps will help you in building your **confidence** and gradually make clean coding a habit.

3. **Review and Refactor:**
Writing clean code is an **iterative process**.
Just like a good writer revises their work, make it a habit to regularly review your code.
Getting your code reviewed by someone can help you tremendously as a different perspective can often identify problems we cannot see cause of our own biases.
Look for opportunities to improve readability, eliminate redundancy, and simplify logic.
Refactoring involves restructuring your code without changing its functionality.
This can make your code cleaner and easier to maintain in the long run.

## FAQs

### How can We format our code for better readability?

Use spaces over tabs, be consistent in spacing between lines, and use code formatters like Prettier or Beautify.

### What are the popular tools that can help me write clean code?

Linters like ESLint, StyleCop, and Pylint check syntax and style. Code formatters like Prettier reformat code. Version control systems like Git track changes, and AI-powered coding assistants like GitHub Copilot, Tabnine, and Kite offer suggestions.

### What are some additional clean code practices beyond the basics?

Test your code, document it, and use design patterns. Testing catches bugs, documenting makes code easier to understand, and design patterns make code more robust.

### How does clean code differ between programming languages?

Best practices for clean code vary between languages. For example, Python uses descriptive variable names and consistent spacing, while JavaScript uses function hoisting and consistent indentation. C# uses descriptive variable names and spacing.

## Conclusion: Code with Confidence

Clean code is a skill worth cultivating.

It takes time to build this habit, but the benefits it brings are well worth the effort.

With this guide, you're now equipped with the knowledge you need to write code that is easier to read, debug, and maintain.

## Summary of Key Points

- Learn to write code that is easy to read, understand, and maintain.
- Use descriptive variable names, consistent indentation, and logical flow to make your code easier to understand.
- Use linters, code formatters, version control systems, and AI-powered coding assistants to help you write clean code.
- Write code with confidence, and watch your coding skills grow as a result.

**Note:** Spending too might time on writing Clean code can often distract developers from focusing on what truly matters in the end, that is to solve problems. Don’t spend too much time refactoring your code bases, do it after solving high-priority problems.

[Infrasity](infrasity.com) assists organizations with creating tech content for infrastructural organizations on Kubernetes, cloud cost optimization, DevOps, and engineering infrastructure platforms.
We specialize in crafting technical content and strategically distributing it on developer platforms to ensure our tailored content aligns with your target audience and their search intent.
For more such content, including Kickstarter guides, in-depth technical blogs, and the latest updates on cutting-edge technology in infrastructure, deployment, scalability, and more, follow [Infrasity](infrasity.com).
Contact us at [contact@infrasity.com](contact@infrasity.com) today to help us write content that works for you and your developers.
Cheers! 🥂

Written by [Gagan Deep Singh](https://www.linkedin.com/in/gagan-gulyani) for [Infrasity](infrasity.com).