How to write clean code?!

To write a clean code, it will start with thinking simple. The most important thing is less code is equal to readable code which is clean code.

A good programmer (not just a programmer) is someone who works hard regardless of their experience level or level of expertise. Your responsibility lies in the quality of the code you write, so make it good enough so that other developers can understand and don't mock you every time they have a difficult time with the code you wrote.

Object Destructuring

In object destructuring, you can extract specific fields from an object and assign them to a variable instantly. The number of lines of code we need to extract the object properties is reduced, and the code is easier to understand.

In addition to saving a lot of explicit variable declarations, object destructuring is very helpful in situations where:

• An object can have multiple properties.
• One property can be used more than once.
• A property that is deeply nested in an object can be used more than once.

const student = {name: ‘John’, email: ‘john@example.com’, phone:’236412354'};

//with destucturing

const {name, email, phone} = student;

//without destucturing

const name = student.name;
const email = student.email;
const phone = student.phone;

Both examples (with and without destructuring) have the same output. Destructuring objects simplifies the code and makes it easier to understand.

Make Use of Arrow Functions

With arrow functions, you can write concise JavaScript functions while solving the problem of accessing this property inside callbacks.
When you use arrow functions, curly braces, parenthesis, function, and return keywords become optional. Your code becomes clearer and easier to understand.
In the following example, a single-line arrow function without parentheses is compared to a regular function.

// Arrow function

const students = student => console.log(student);

// Regular Function

function(student){
   console.log(student);
}

For example, using arrow functions is not the best approach when working with object prototypes, classes, or object literals.

Spread Extension Operator

Another new feature of ES6 is the spread extension operator (...). This operator allows literals, such as arrays, to be expanded into individual elements with a single line of code.
When we need to put an array or object into a new array or object or to combine multiple parameters in an array, this operator is really useful.
The following code shows how to combine two arrays using the spread operator. As you can see, it makes the code clean and easy to understand since we don’t need to use loops or conditions.

let x = [adam, john, silvia];
let y = [mike, teddy, ..x, frank]
console.log (y);
// mike, teddy, adam, john, silvia, frank

Shorthand Whenever Possible

The shorthand method can save you a lot of time and space when working with conditions.
If you want to check for empty, null, and undefined conditions for a variable, for example, you'll need to add two conditions in the if statement.

if (x !== “” && x !== null && x !== undefined) { ... }

Final

In this tutorial, I'll show you how to use JavaScript's features to produce clean code.
As developers, we should always produce clean code since it improves readability and makes the code easier to grasp for you and your team.
I hope that these tips will assist you in improving the readability of your code, and if you have any further suggestions, please leave them in the comments area.

Thanks!