Sometimes it does not matter if you write an ugly code - it will run anyway. But as your code grows, and more and more lines of code appear on the screen, you realize that some good practices would make your algorithm better for reading and editing.
In this article, I will show you five essential tips to write code like a pro.
Comments
Writing comments along with the code make the next reading easier because you will understand why you decided to create things in that order. There are many ways of commenting on code. JavaScript offers us two types of comment:
// Single line comment
and
/*
Multiple lines comment
*/
Where can I use them?
You can write comments to explain what a function does, why a variable exists, and what you expect to do with the code.
Here are some examples:
// Request users from server and update template
const getUsers = () => {...}
// Save new todo and show it in template
const addTodo = () => {...}
Always write comments wondering if you would understand your own code three years from now, or if another programmer could do it.
Indentation
Take a look at the examples below:
1) 🤯
function multiply(a, b) {
return a * b;
}
let x=10, y=2, z=multiply(x, y);
2) 😉
function multiply(a, b) {
return a * b;
}
let
x = 10,
y = 2,
z = multiply(x, y);
Which code is better? Well, both 1 and 2 do the same. But the second one takes us less time to understand. When you indent your code, it looks more simple and professional, and other programmers will focus on your algorithm instead of getting confused by a bad organization.
Consistent names
You can name your variables and methods practically anything you want. But when you choose consistent names your code looks better, and it allows you to make your algorithm more understandable too.
See an example:
let list = [
"banana",
"apple",
"pineapple"
];
Ok, we can understand that the array above comports fruits. But the name list could be replaced by fruitsList, which makes our intentions more explicit.
Another example:
let r = fetch("config.json");
Why naming a server response as r instead of response? Be more specific in your code and help yourself and other programmers to focus on what really matters.
I strongly recommend you to read an amazing article about it: Thoughts about naming variables and methods, by Líkið Geimfari.
Scoping
Scoping the code is essential to make it more reusable and understandable as it grows. Instead of creating global variables and functions, try to scope some functionalities of your application using objects and other functions. It will avoid errors using common names along with the code, renaming things that should not be changed in some places, and recreating functionalities that already exist.
Take an example:
const userConfirmation = confirm("Are you sure you want to delete the model?");
if (userConfirmation) model.delete();
Why not creating a function that wraps that operation? See:
const confirmAndDelete = () => {
const userConfirmation = confirm("Are you sure you want to delete the model?");
if (userConfirmation) model.delete();
}
confirmAndDelete();
Scoping your code inside functions makes it easier to understand what it does.
Object-oriented programming
In order to improve the practice of scoping code, it is really important to know how to work with object-oriented programming (OOP) in JavaScript.
When you organize the algorithm inside objects it is easier to find what you need and to maintain the code. Instead of creating functions in the global scope, you put them in the classes to which they belong.
The example below shows how it works:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("Hello! My name is " + this.name);
}
isChild() {
return this.age < 12;
}
}
Now we can create multiple objects using the same structure, as it follows:
let person1 = new Person("John", 19);
let person2 = new Person("Mary", 22);
person1.sayHello(); // "Hello! My name is John"
person2.isChild(); // false
Later, it will be easy to edit this entity and you will not be afraid to change the behavior of other parts of your code unintentionally.
Conclusion
Writing code is easy. Writing good code is for great developers. 👌🏻
If you want to improve your applications and share beautiful code anywhere, start practicing what you learned in this article today.
Thank you for reading! 😄
