Indentations

Indentations are an essential part of writing clean and readable code. They help to improve the structure and organization of your code, making it easier to understand and maintain. In this section, we will discuss some best practices for using indentations.

Why Use Indentations?

Indentations are used to visually separate different parts of your code and show the hierarchy of the code blocks. They help to identify the beginning and end of loops, conditionals, functions, and other code blocks. Proper indentations make the code more readable and maintainable, especially when working with large codebases.

Best Practices

Here are some best practices for using indentations in programming:

1. Use Consistent Indentation

Consistency is key when it comes to indentations. Use the same number of spaces or tabs for each level of indentation throughout your code. This makes the code more uniform and easier to read.

2. Indent Nested Code Blocks

When you have nested code blocks, make sure to indent them properly to show the hierarchy of the blocks. Each level of indentation should represent a new scope or block of code.

3. Avoid Mixing Tabs and Spaces

Choose either tabs or spaces for indentation and stick to it. Mixing tabs and spaces can lead to formatting issues and make the code harder to read.

Examples

Here are some examples of bad and good indentation in different languages:

C++

Bad

#include <iostream>

using namespace std;

int main() {
for (int i = 0; i < 5; i++) {
cout << "Hello, World!" << endl;
}
return 0;
}

Good

#include <iostream>

using namespace std;

int main() {
    for (int i = 0; i < 5; i++) {
        cout << "Hello, World!" << endl;
    }
    return 0;
}

In the bad example, the code is starts in the same column, making it difficult to identify the different code blocks. In the good example, the code is properly indented, clearly showing the structure of the code.

Here is another example of bad and good indentations with nested code blocks:

Bad

#include <iostream>

using namespace std;

int main() {
for (int i = 0; i < 5; i++) {
    if (i % 2 == 0) {
    cout << "Even" << endl;
} else {
        cout << "Odd" << endl;
}
            }
return 0;
}

Good

#include <iostream>

using namespace std;

int main() {
    for (int i = 0; i < 5; i++) {
        if (i % 2 == 0) {
            cout << "Even" << endl;
        } else {
            cout << "Odd" << endl;
        }
    }
    return 0;
}

In the bad example, the nested code blocks are not properly indented, making it hard to distinguish the different levels of nesting. In the good example, the nested code blocks are properly indented, clearly showing the hierarchy of the blocks.

HTML

Bad

<div>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</div>

Good

<div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</div>

In the bad example, the HTML elements are not properly indented, making it hard to see the structure of the document. In the good example, the HTML elements are properly indented, clearly showing the hierarchy of the elements.

Here is another example of bad and good indentations with nested HTML elements:

Bad

<div>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

Good

<div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>

In the bad example, the nested HTML elements are not properly indented, making it hard to see the hierarchy of the elements. In the good example, the nested HTML elements are properly indented, clearly showing the structure of the document.

CSS

Bad

body {
font-family: Arial, sans-serif;
}

h1 {
color: blue;
}

Good

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
}

In the bad example, the CSS rules are not properly indented, making it hard to see the different styles. In the good example, the CSS rules are properly indented, clearly showing the different styles.

Here is another example of bad and good indentations with nested CSS rules:

Bad

input { border: tomato 2px solid; }
label {
font-family: system-ui;
font-size: 1.25rem;
input {
    border: blue 2px dashed;
}}

Good

input {
    border: tomato 2px solid;
}
label {
    font-family: system-ui;
    font-size: 1.25rem;
    input {
        border: blue 2px dashed;
    }
}

In the bad example, the nested CSS rules are not properly indented, making it hard to see the hierarchy of the rules. In the good example, the nested CSS rules are properly indented, clearly showing the structure of the styles.

JavaScript

Bad

function celsiusToFahrenheit(celsius) {
return (celsius * 9) / 5 + 32;
}
function celsiusToKelvin(celsius) {
return celsius + 273.15;
}
function convertTemperature(value, scale) {
if (scale === "F") return celsiusToFahrenheit(value);
if (scale === "K") return celsiusToKelvin(value);
return "Invalid scale. Use 'F' for Fahrenheit or 'K' for Kelvin.";
}
console.log(convertTemperature(25, "F"));
console.log(convertTemperature(25, "K"));

Good

function celsiusToFahrenheit(celsius) {
    return (celsius * 9) / 5 + 32;
}

function celsiusToKelvin(celsius) {
    return celsius + 273.15;
}

function convertTemperature(value, scale) {
    if (scale === "F") return celsiusToFahrenheit(value);
    if (scale === "K") return celsiusToKelvin(value);
    return "Invalid scale. Use 'F' for Fahrenheit or 'K' for Kelvin.";
}

console.log(convertTemperature(25, "F"));
console.log(convertTemperature(25, "K"));

In the bad example, the JavaScript function is not properly indented, making it hard to see the structure of the code. In the good example, the JavaScript function is properly indented, clearly showing the different parts of the function.

Here is another example of bad and good indentations with nested JavaScript code:

Bad

function generateFibonacci(limit) {
if (typeof limit !== "number" || limit < 0) {
throw new Error("Please provide a non-negative number.");
}

let fibSequence = [0, 1];

while (true) {
let nextValue = fibSequence[fibSequence.length - 1] + fibSequence[fibSequence.length - 2];
if (nextValue > limit) break;
fibSequence.push(nextValue);
}
return fibSequence;
}

try {
let limit = 100;
let result = generateFibonacci(limit);
console.log("Fibonacci sequence up to", limit, ":", result);
} catch (error) { console.error(error.message); }

Good

function generateFibonacci(limit) {
    if (typeof limit !== "number" || limit < 0) {
        throw new Error("Please provide a non-negative number.");
    }

    let fibSequence = [0, 1];

    while (true) {
        let nextValue = fibSequence[fibSequence.length - 1] + fibSequence[fibSequence.length - 2];
        if (nextValue > limit) break;
        fibSequence.push(nextValue);
    }

    return fibSequence;
}

try {
    let limit = 100;
    let result = generateFibonacci(limit);
    console.log("Fibonacci sequence up to", limit, ":", result);
} catch (error) {
    console.error(error.message);
}

In the bad example, the nested JavaScript code is not properly indented, making it hard to see the hierarchy of the code blocks. In the good example, the nested JavaScript code is properly indented, clearly showing the structure of the code.

Java

Bad

public class HelloWorld {
public static void main(String[] args) {
for (int i = 0; i < 5; i++) {
System.out.println("Hello, World!");
}}}

Good

public class HelloWorld {
    public static void main(String[] args) {
        for (int i = 0; i < 5; i++) {
            System.out.println("Hello, World!");
        }
    }
}

In the bad example, the Java code is not properly indented, making it hard to see the structure of the code. In the good example, the Java code is properly indented, clearly showing the different parts of the code.

Here is another example of bad and good indentations with nested Java code:

Bad

public class HelloWorld {
public static void main(String[] args) {
for (int i = 0; i < 5; i++) {
if (i % 2 == 0) {
System.out.println("Even");
} else {
System.out.println("Odd");
}}}}

Good

public class HelloWorld {
    public static void main(String[] args) {
        for (int i = 0; i < 5; i++) {
            if (i % 2 == 0) {
                System.out.println("Even");
            } else {
                System.out.println("Odd");
            }
        }
    }
}

By following these best practices, you can improve the readability and maintainability of your code. Proper indentations help you and other developers understand the code more easily and make it easier to debug and modify in the future. Even if you are working on a small project, using consistent and proper indentations is a good habit to develop.