How to write clean code
Programming with Shahan

Programming with Shahan @codewithshahan

About: I train people how to program in a fun & easy way ⌐╦╦═─ Clean code enthusiast • Sharing Fullstack News based on JavaScript Since 2020 • 1.3M+ reads [Grab My book: Clean Code Zero to One]

Joined:
Jun 3, 2021

How to write clean code

Publish Date: Oct 23 '24
184 23

Why Write Clean Code? ⛩️

Image of writing clean code by shahan
Imagine if you tried to find something in a messy room—you'd waste time searching, right?

The same goes for messy code! It’s HARDER to find problems or understand what’s happening. With clean code, you can avoid that mess.

You know what?.. By writing clean code you will save other developers valuable time as well. Trust me... You are saving the world! 🦸


7 Tips for Writing Clean Code🧯

Image of writing clean code by shahan

1. Use Meaningful Names

When you create a variable or a function, give it a name that tells what it does.

Think of it like naming a folder on your computer. Instead of calling it b, call it numberOfUsers. This way, you don’t need extra comments to explain what b is.

Example:

let numberOfUsers = 5; // Clear and easy to understand
Enter fullscreen mode Exit fullscreen mode

2. Follow the Single Responsibility Principle (SRP)

A function should do one job and do it well.

This makes it easier to understand and fix if needed. It’s like having one tool for one task, like a pencil for writing and scissors for cutting.

Image of writing clean code by shahan

Example:

function addNumbers(a, b) {
    return a + b;
}
Enter fullscreen mode Exit fullscreen mode

This function only adds two numbers. It doesn’t do anything else.

3. Avoid Unnecessary Comments

Instead of adding comments everywhere, try to make your code self-explanatory by using good names.

Use comments only when something is tricky or needs a special note. Too many comments can confuse people. 😕🤬

Example:

// Good: Clear name, no extra comment needed
let userAge = 25; 

// Bad: Unclear name, needs a comment
let a; // age of the user
Enter fullscreen mode Exit fullscreen mode

4. Make Your Code Readable

Use spaces, indentation, and line breaks to keep your code neat.

Just like writing a paragraph, you should break your code into smaller pieces so it’s not all in one line.

Example:

// Good Code
if (isLoggedIn) {
    console.log("Welcome!");
} else {
    console.log("Please log in.");
}

// Bad Code
if(isLoggedIn){console.log("Welcome!");}else{console.log("Please log in.");}
Enter fullscreen mode Exit fullscreen mode

5. Write Unit Tests

Unit tests are check-ups for your code.

They make sure that everything works as it should. When you change your code, these tests will tell you if something breaks.

Example:

function add(a, b) {
    return a + b;
}

// Test
console.assert(add(2, 3) === 5, 'Test failed: 2 + 3 should be 5');
Enter fullscreen mode Exit fullscreen mode

6. Be Careful with Dependencies

When you build software, try to keep things separate so they don’t rely too much on each other.

For example, a dishwasher can be in any kitchen, not just one specific kitchen. It’s easier to manage that way.

Image of writing clean code by shahan

7. Organize Your Project

Keep your files and folders organized, just like keeping your desk clean. This makes it easier to find things when your project grows bigger.

Image of writing clean code by codewithshahan

Example:

  • Use folders like components, services, and utils in your project.
  • Keep similar files together so you know where to look for them.

✅ Recommendation

What you just read in this article is nothing more than a tiny information from my book, Clean Code Zero to One.

clean code zero to one book cover

These 10 rules? They’re just the SURFACE.

👉 Grab Clean Code Zero to One Now

or KEEP struggling with your messy code.


Conclusion 🏁

Writing clean code is like building a strong foundation for a house. It keeps everything in order, making it easy to add new things or fix issues without much trouble.

Follow these 7 tips to make your code simple, readable, and easy to work with!

Read more: skills to become a backend developer in 6 months (roadmap)

Comments 23 total

  • FxFeed
    FxFeedOct 23, 2024

    Nice!

  • Ayoola Kitan
    Ayoola KitanOct 23, 2024

    very helpful for us beginners

  • McKwen2
    McKwen2Oct 23, 2024

    Nice. Thank you.

  • Omkar Deshpande
    Omkar DeshpandeOct 24, 2024

    Elegant and crisp explanatiom

  • apsi cleaning
    apsi cleaningOct 24, 2024

    To achieve clean code, focus on simplicity, readability, and maintainability. Use meaningful variable names, consistent formatting, and modular functions. Remember, allpowersvc emphasizes the importance of clear documentation and testing for quality code.

  • Martin Baun
    Martin BaunOct 24, 2024

    I'm glad to see this being highlighted yet again! I'm not quite sure where the hostility to code structures beyond "just code it bro" come from, but I have had to see some pretty horrific codebases and so am happy to see ANY kind of overarching structure in a codebase being talked about!

  • Garimu Alonso
    Garimu AlonsoOct 24, 2024

    Thanks for this! Saving it! 💖

  • Daniel Cooper 🇺🇸🦅
    Daniel Cooper 🇺🇸🦅Oct 24, 2024

    Going back to "Code Complete" being one of my favorite books when it comes to programming. During my career (going on 20+ years) I had to learn some of this the hard way trying to decipher code that I myself had written after not looking at it for a few years.

    Recently had to go back and work on a program I wrote just 7 years ago and it was very easy to modify and make changes to the program because I used common sense when designing it. Take the time to refactor your code into functions where able and it makes sense. Then your subroutines can be a few lines long, with easy sections to troubleshoot.

  • Goodnews Daniel
    Goodnews DanielOct 24, 2024

    Awesome! Thank you

  • Charles Roth
    Charles RothOct 26, 2024

    Read "Uncle Bob"s book "Clean Code". The chapter on "code smells" by itself is worth the price of admission.

    Comments: always have a comment block at the top of the module/package/class/whatever, describing WHY this (whatever) exists -- what is its purpose? Not HOW it works, but WHY it exists. Give the next person to touch it the context needed to understand it.

    • Programming with Shahan
      Programming with ShahanOct 26, 2024

      I always loved Uncle Bob's clean code technics. He is the best. My teacher Mosh (programming with mosh) always followed him as well.

  • Berat Yilmaz
    Berat YilmazOct 27, 2024

    Read the „ Refactoring“ book for the beginning.

  • Farhad Nadimi
    Farhad NadimiOct 28, 2024

    Thank you for useful information

  • José Luis Rodriguez
    José Luis RodriguezNov 22, 2024

    “As a first semester student in Software Engineering,
    I have found the debate on Clean Code very interesting. I consider that
    establishing good practices from the beginning of our training is fundamental.
    A question for the community: What static analysis tools would you recommend for beginners
    do you recommend for beginners who are learning to write cleaner code?”

Add comment