Five good practices when coding in JavaScript

Subscribe to my newsletter and never miss my upcoming articles

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 at 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 on 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 it. When you indent your code, it looks more simple and professional, and other programmers will focus on your algorithm istead 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, that 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 make 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 the object methods inside itself.

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! 😄

Buy me a coffee

Comments (2)

Tapas Adhikary's photo

Super suggestions!

Luiz Filipe da Silva's photo

Brazilian full stack developer, tale writer and aspiring designer

Thank you, Tapas 😄