How To Write Clean Code As A Developer

Writing functional code is one thing, and making that code readable and accessible for other developers to understand is just as important as the functional code itself.

Writing clean code means that the code is easy to read, understand, maintain, and organize. 

Clean coding is an essential skill to have as a developer because it helps other developers understand and work with the code we have written without asking for clarification.
 
Sometimes, because our program works as expected, we would like to leave our code as it is but this is not advisable. In this tutorial, we will learn some tips to master the habit of writing clean code as a developer:

Use Descriptive Names and Naming Conventions

When writing codes, descriptive names allow us to know what that thing represents, for example. We could name a variable firstName instead of fName` or worst using letters like fn. 

Using descriptive syntax allows others to know what that variable or value represents.

Also, there are different reserved names that we are not allowed to use, so it's better to prefix the name with a letter or word example, </span><span>const</span><span> myVar =</span> <span>"</span><span>string</span><span> goes here</span><span>.

Use Empty Lines To Make Your Code Readable

Using empty lines in between codes, or better still, when we use empty lines to separate different functions or arguments, our code becomes readable, and it's easy to identify where a function ends.

in between line spacing in javascript

Use Good Formatting And Indentation

The same applies to codes, just like we have paragraphs, margins, and linebreaks in books. A good developer should use paragraphs and break his/her code into multiple lines to make them clear and easy to read. 

To fully understand this concept, examples of excellent and lousy indentation are below.

example of a good and bad indentation

 

Well, there are some plugins or extensions we could use to format our code

• VS Code: Prettier
• Atom: Atom Beautify
• Sublime Text: Prettify

Ensure Enough Spacing Between Words And Symbols

Proper spacing makes our codes readable, so as a developer, we should avoid conjoining words and symbols so that we can tell what that line of code talks about at a glance. Let's look at an example of good spacing and bad spacing.

 

var example(param1, param2)

function(){

      This is an example of a code with good spacing of words and symbols.

    

    result = param1 + str(param2)

    return { result }

          }

var example1 = "hello" ;

var example2 = 42 ;

console.log(example_function(example_input1, example_input2)) ;

 

Use Comments 

Even as we’re trying to make our codes self-explanatory, comments have been a way for developers to explain what a piece of code does and clarify the other developer who intends to maintain the code.

//localStorage is used to store a variable in the syatem's memory

var notifCounter = localStorage.getItem("notifCounter") ;

 

localStorage.setItem("notifCounter", notifCounter);

Avoid Misleading Comments

Even as we use comments, we should always try to put our comments in a way that it does not mislead others.

Here is an example of a misleading comment

        //clean the last number 

         function backspace(){

          num = document.getElementById('num');

         var remove = num.innerText;

         remove = remove.slice(0, -1);

         }

 This piece of the comment above the code does not correctly explain what the code does.

Functions Should Perform Just One Action

Writing short and straightforward functions is an outstanding coding practice. Functions should only perform a single task. It is better to have two or more functions than a complex one. 

For example:

//instead of writing this

function incrementVariableAndSlice(){

// this is a wrong way of writing functions as it would contain many other functions inside

}

//write this

function incrementVariable(){

//this would perform the function first and use the result to perform the second one

}

function slice(){

}

Other Things To Note When Writing Codes:

1. 1. Never repeat or duplicate code
   2. Reduce the number of characters in a line
   3. Keep it classy
   4. Do not send more than three parameters into a function.

Conclusion

Writing clean code comes with many advantages, as it helps improve your software quality, enables developers to detect errors quickly, and enables code maintainability. 

Too much emphasis on writing clean code can kill productivity. It is good always to keep your clean code on the mild side.

Do not overthink writing clean code at the early stages of a project. Just make sure it works well and has no errors. Then we can start cleaning our code.

Resource: 

MyHatchPad

UnoSquare
Effective rules to be a programmer

Comments

[Noel Ethan Chiwamba]

Good piece! I just thought it would look more interesting if you would use the code blocks than the single code lines

You can use the back ticks, three back ticks for opening a code block

    ```javascript
     lines of code
    ```

and other 3 for closing the code block.

[Scofield Idehen]

So sorry, i had to drag the code from from my blog, i will make the corrections soon.

Thanks for kind observations.