How To Write Clean Code As A Developer
Tags: webdev, javascript, beginners, programming
Published: 2023-01-30 17:13:28


<p class="ace-copy-paste-skip-this-tag"><span class="thread-907053617578789941065767 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v" style="font-size: 16px;">Writing functional code is one thing, </span><span class="thread-907053617578789941065767 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i" style="font-size: 16px;">and </span><span class="thread-907053617578789941065767 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v" style="font-size: 16px;">making that code readable and </span><span class="thread-907053617578789941065767 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i" style="font-size: 16px;">accessible</span><span class="thread-907053617578789941065767 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v" style="font-size: 16px;"> for other developers to understand is just as important as the functional code itself.</span></p>

</div>
<div><span class="thread-099478163061870097789485 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Writing clean code means that the code is easy to read, understand, maintain, and organize. </span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">
</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Clean coding is a</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">n essential</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> skill to have as a developer because it helps other developers understand and work with the code we have written without asking for clarification.</span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"> </span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Sometimes, because our program works as expected, we would like to leave our code </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">as</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> it is but this is not advisable. In this tutorial, we w</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">ill</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> learn some tips to master the habit of writing clean code as a developer:</span></div>
<div></div>
<div>
<h4 data-usually-unique-id="031508437162909999539457"><span class="thread-669701812205058338515929 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Use Descriptive Names and Naming Conventions</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">When writing codes, </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">descriptive names allow</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> us to know what that thing represents</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> for example</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">. W</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">e could name a variable </span><span class="inline-code author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">firstName </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">instead of </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">fName`</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> or worst using letters like fn. </span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Using descriptive syntax allows others to know what that variable or value represents.</span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Also, there are different reserved names that we are not allowed to use</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> so it's better to prefix the name with a letter or word e</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">xample,</span> <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i h-grave">`</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v h-grave">const</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> myVar =</span> <span class=" h-quot">"</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v h-quot">string</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> goes here</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">`</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">.</span></div>
<div></div>
<div>
<h4 data-usually-unique-id="069595173563419506894867"><span class="thread-620139920540579209330761 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Use Empty Lines To Make Your Code Readable</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Using empty lines in between codes</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> or better still</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> 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</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">.</span></div>
<div></div>
<div>
<figure><img src="https://paper-attachments.dropboxusercontent.com/s_75D3936DD1743C92B1BCF6B58BF11744636BBFA3BD7C10B6C65EFBE70A477653_1674164108628_spacing.png" /><figcaption>in between line spacing in javascript</figcaption></figure>
</div>
<div></div>
<div>
<h4 data-usually-unique-id="566560522647171470517631"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Use Good Formatting And Indentation</span></h4>
</div>
<div><span class="thread-925497574185306674875413 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">The same applies to codes, just like we have paragraphs, margins, and linebreaks in books. </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">A good developer should use paragraphs and break his/her code into multiple lines</span><span class="thread-925497574185306674875413 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> to make them clear and easy to read. </span></div>
<div></div>
<div><span class="thread-925497574185306674875413 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">To fully understand this concept</span><span class="thread-925497574185306674875413 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span> <span class="thread-925497574185306674875413 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">examples of excellent and lousy indentation are below</span><span class="thread-925497574185306674875413 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">.</span></div>
<div></div>
<div>
<figure><img src="https://paper-attachments.dropboxusercontent.com/s_75D3936DD1743C92B1BCF6B58BF11744636BBFA3BD7C10B6C65EFBE70A477653_1674165942142_indent.png" /><figcaption>example of a good and bad indentation</figcaption></figure>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> </span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Well</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> there are some plugins or extensions we could use to format our code</span></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">VS Code: </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"><a class="attrlink" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a></span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Atom: </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"><a class="attrlink" href="https://atom.io/packages/atom-beautify" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://atom.io/packages/atom-beautify">Atom Beautify</a></span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Sublime Text: </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"><a class="attrlink" href="https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify">Prettify</a></span></li>
</ul>
<div>
<h4 data-usually-unique-id="972097054987833106718464"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Ensure Enough Spacing Between Words And Symbols</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Proper spacing makes our codes readable, so as a developer</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> we should avoid conjoining </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">words and symbols so that </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">we can tell what that line of code talks about at a glance</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">. Let's look at an example of good spacing and bad spacing</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">.</span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> </span></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">var example(param1, param2)</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">function(){</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">  <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">    This is an example of a code with good spacing of words and symbols.</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">    </span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">    result = param1 + str(param2)</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">    return { result }</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">          <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">}</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">var example1 = "hello" ;</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">var example2 = 42 ;</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">console.log(example_function(example_input1, example_input2)) ;</span></code></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> </span></div>
<div>
<h4 data-usually-unique-id="051804384935173749610003"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Use Comments </span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">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 </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">to maintain</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> the code.</span></div>
<div></div>
<div><code class="listtype-code listindent1 list-code1 lang-go" spellcheck="false"><span class="thread-407969960477743096881166 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">//localStorage is used to store a variable in the syatem's memory</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-go" spellcheck="false"><span class="thread-407969960477743096881166 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">var notifCounter = localStorage.getItem("notifCounter") ;</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-go" spellcheck="false"> </code></div>
<div><code class="listtype-code listindent1 list-code1 lang-go" spellcheck="false"><span class="thread-407969960477743096881166 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">localStorage.setItem("notifCounter", notifCounter);</span></code></div>
<div></div>
<div>
<h4 data-usually-unique-id="567674404155476678392558"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Avoid Misleading Comments</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Even as we use comments</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">,</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> we should always try to put our comments in a way that it does not mislead others.</span></div>
<div></div>
<div><strong><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Here is an example of a misleading comment</span></strong></div>
<div></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">      <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">  //clean the last number </span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">         function backspace(){</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">          num = document.getElementById('num');</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">         var remove = num.innerText;</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">         remove = remove.slice(0, -1);</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">         }</span></code></div>
<div><span class="thread-415953302537502696565509 thread-641593562970716422874068 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> This piece of </span><span class="thread-415953302537502696565509 thread-641593562970716422874068 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">the </span><span class="thread-415953302537502696565509 thread-641593562970716422874068 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">comment above the code does not </span><span class="thread-415953302537502696565509 thread-641593562970716422874068 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">correct</span><span class="thread-415953302537502696565509 thread-641593562970716422874068 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">ly explain what the code does</span><span class="thread-415953302537502696565509 thread-641593562970716422874068 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">.</span></div>
<div>
<h4 data-usually-unique-id="535405513757013959409384"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Functions Should Perform Just One Action</span></h4>
</div>
<div><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Writing short and s</span><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">traightforward</span><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> functions is a</span><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">n outstanding</span><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> coding practice. Functions should only perform a single task. It is better to have two or more functions than </span><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">a complex one</span><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">. </span></div>
<div></div>
<div><span class="ace-all-bold-hthree"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"><b>For example:</b></span></span></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">//instead of writing this</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">function incrementVariableAndSlice(){</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">// this is a wrong way of writing functions as it would contain many other functions inside</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">}</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">//write this</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">function incrementVariable(){</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">//this would perform the function first and use the result to perform the second one</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">}</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">function slice(){</span></code></div>
<div><code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class="thread-415953302537502696565509 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">}</span></code></div>
<div>
<h4 data-usually-unique-id="585282511736316039717688"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Other Things To Note When Writing Codes:</span></h4>
</div>
<ol class="listtype-number listindent1 list-number1" start="1">
 	<li style="list-style-type: none;">
<ol class="listtype-number listindent2 list-number2" start="1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Never repeat or duplicate code</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Reduce the number of characters in a line</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Keep it classy</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Do not send more than three parameters into a function.</span></li>
</ol>
</li>
</ol>
<div>
<h4 data-usually-unique-id="642451952231503701487545"><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Conclusion</span></h4>
</div>
<div><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Writing clean code comes with many advantages, as it helps </span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">improve your software quality, enables developers to </span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">detect errors quickly</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">, and enables code maintainability. </span></div>
<div></div>
<div><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Too much emphasis on writing </span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">clean code can kill productivity. </span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">I</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">t is good </span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">always to</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"> keep your clean code on the </span><span class="thread-407276026193623716809084 thread-663941292975206115880174 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">mild side.</span></div>
<div></div>
<div><span class="thread-407276026193623716809084 thread-663941292975206115880174 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Do not overthink writing clean code at the early stage</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">s of a project</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">. J</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">ust make sure it works well and has no errors. Then we can start cleaning our code</span><span class="thread-407276026193623716809084 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v">Resource: </span></div>
<div><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"><a class="attrlink" href="https://www.myhatchpad.com/insight/7-practical-tips-for-writing-clean-code/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://www.myhatchpad.com/insight/7-practical-tips-for-writing-clean-code/">MyHatchPad</a></span></div>
<div><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zt2mz66zz89z0xz65zz68zez65zz85zaz71zsz85zz74z79p7z88zrvtjs93v"><a class="attrlink" href="https://blog.unosquare.com/10-tips-for-writing-cleaner-code-in-any-programming-language" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.unosquare.com/10-tips-for-writing-cleaner-code-in-any-programming-language">UnoSquare</a>
<a href="https://blog.learnhub.africa/2022/10/05/5-effective-rules-to-be-a-top-programmer-in-2022/">Effective rules to be a programmer</a></span></div>
<div></div>
<div></div>