Clean Code in Javascript : Naming variables

Be careful for naming.

In this article , I will share topic clean code in naming variables. Also I will use some example to explore the key characteristic that make a good name.

Spesifically, I'll be covering the following topics :

  1. What is a name ?
  2. Principle for naming varible
    • intention
    • meaningful
    • easy to search
    • avoid redundant word

Let's, check it out!

# What is a name ?

Variables are the smallest part of a program that we cannot avoid when writing code. In a simple program we can create a lot of variables. What about complex programs? Because of the many variables that are created, many of us choose to name them as we like. In fact, variable naming is vital and bad naming will cause a lot of problems in the future.

James Padolsey author of book "Clean code in javascript" says good name might have the following characteristics:

  1. Purpose: What something is for and how it behaves. Purposes is what something does or what something is. In the case of a function, its purpose is its behavior.

  2. Concept: Its core idea and how to think about it. A good name indicates concept. A name's concept refers to the idea behind it, the intent in its creation, and how we should think about it.

  3. Contract: A good name indicates a contract with other parts of the surrounding abstraction. A variable, by its name, may indicate how it will be used or what type of value it contains and what general expectations we should have about its behavior. For example :

    • a variable prefixed with is, for example, isUser, is expected to be a Boolean type (either true or false).
    • a variable in all-caps is expected to be a constant (only set once and immutable), for example, DEFAULT_USER_EXPIRY.

## Principle for naming variable

  1. Intention

    Have you ever created a variable with the name d, n, inc, desc, or some other name that doesn't give a clear meaning? Try to change this habit if you are still stubborn about it. It's important to know that while providing clear variables can take a long time, it will save us a lot more time working on bugs and then finding faults.

    Bad Code

    let b; // button
    

    Naming the variable d doesn't mean anything. Wouldn't it be better if we explicitly wrote it like this?

    Good Code

    let buttonSearch ;
    
  2. Meaningful

    Before creating a variable or function. It's essential to think about the meaning of the choice of words you take. Make sure to use a clear name, because if we collaborate as a team, we need to give clear instructions to our colleagues.

    Bad Code

const rectangleSize = (a, b) => {
return a * b;
}

Using a and b as function arguments can be confusing. It would be much better if we explained explicitly and meaningfully like this

Good Code

 const rectangleSize = (width, height) => {
 return width * height;
 }

3. Easy to search

In the development of an application. We will continue to write, read, and develop the syntax as needed. This makes more code. So, it is important to write code that is easy to understand and search for so that it is easy for maintenance and development processes.

Bad Code

// What value is this 12800000?
setTimeout(release, 12800000)

Who knows the number 128000 ? What does it mean ? There are no clear directions to find the value.

We make the values ​​easy to understand

Good Code

// Declare as constant variable (use capital letters).
const MILLISECONDS_IN_A_DAY = 1280000;


setTimeout(release, MILLISECONDS_IN_A_DAY);

4. Avoid Redundant Words

Avoid giving/adding words that are contextually clear. We usually encounter this kind of thing when creating an object literal.

Bad Codes

const Player = {
playerName: 'Andres Iniesta',
playerClub: 'Barcelona',
playerCountry: 'Spain',
};

//calling object
Player.playerName = "Iniesta";

Instead, use a cleaner concept like the following:

Good Codes

const Player = {
name: 'Andres Iniesta',
clubs: 'Barcelona',
country: 'Spain',
};

//calling object
Player.name = "Iniesta";

i hope this article is useful for you. thanks for reading.