Clean Code Principles
It is very common in our practice that we should continue projects written by other developers or do some changes on a project that we wrote some time ago.
So what is the most problematic part of doing that changes ? — understand old cold, what you thought when you wrote that code or what other developer thought, so by making our code much more predictable we should write clean and understandable code.
Clean code is more than just working code. Clean code is easy to read simple to understand , so here are most important best practices that we should keep when we code in React/JavaScript. Let’s dive in!
Naming
In our projects we always use variables, functions, components and it is very important to give them correct name, the name should describe what they represent, for what they are created for what they do.
For example it is very good when we name our functions with a verb in the beginning ` showUserInformation
Don’t add extra, unnecessary nouns,
Bad
Good
Also make your variable name easy to pronounce
Bad
Good
Good naming will give us good opportunity to refactor our code some time ago and understand what our code stands for, always be very attentive on naming.
Variables
Due to ES6 we have new ways of declearing variables let an const. First of all we should forget about var keyword, it makes different problems for us. When we should decleare variable and it isn’t going to be change we should use const and after passing some time we will have a correct understanding that this variable is static and the value is the declearation value.
Bad
Good
Avoid Globals
We shouldn’t declare our variables in global scope because it makes mess in our cod, it is difficult to understand where we use them, they are easily overwritten by other scripts, so always use local variables.
Bad
Good
Functions
Functions should do only one thing. It is very bad when we do different logics in one function and after passing some time we don’t understand what this function stands for.
Small
Ideally good function shouldn’t be much than 15 lines, so always keep your function small and always they should have return value.
Don’t pass many parameters to your functions, they should have as few parameters as possible, ideally parameters length should be 0 but it is very difficult to keep this rule so no more than 3 parameters, this is because we have to look at all them and when we call them we have to make sure they’re all passed in.
Bad
Use default values, no boolean parameter
Default values for destructuring or even basic function parameters are very useful. Firstly, they give us an example of what value we can pass to the function.
Don’t pass boolean parameter to the function because it means that you render condition inside your function which is bad because function can do only one thing.
Bad
Good
Pure Functions
Pure functions are functions that accept an parameter and return a value without modifying any data outside its scope(Side Effects). They are completely independent of outside state. The return value must depend on function arguments.
Latest standards
Always use latest standards `
let,const,arrow function,map,forEach,spread,async,await,destructuring….
A professional developer will write the code for the future self and for the “other guy” not just for the machine.
