If you aren't going to name it better then people aren't going to interpret it better. Good naming of variables, functions, properties, methods, classes, constants, etc makes code more predictable and contributes highly towards clean coding.

Descriptive Names

Whatever name you provide to the variable, function, class, etc should describe it well. The name should reflect whatever is inside instead of confusing your junior developer.

Although you don't start giving perfect names on the first go. But when you keep trying to come up with better names in code, you will lean towards perfect.

Rules of Naming

Variables (and Properties)

The name of a variable or property should represent the type or any kind of data stored in it. Especially in JavaScript, justifying types through naming matters more as JavaScript is value typed not data typed language (In JS, we don't declare type while declaring variables).

Data stored in variables or properties are of value types - number, string, boolean, array, etc, therefore, name them accordingly.

Mostly you should use nouns for naming variables and properties. For example product, seller, student, price, user, etc.

But for booleans, you can go for short phrase with an adjective . For example, isValid, isPassed, isReal, emailExists, etc.

Functions (and Methods)

Functions and Methods are meant to perform tasks and operations i.e., action. Therefore, they should be named by a verb.

For example: validateEmail(), saveUser(), database.deleteUser(), createLog(), etc.

But for scenarios when a function returns a boolean there you can use short phrases with adjectives.

For example: isEmpty(), isPincode(), isValid(), isEmail() etc.

Don't try to use nouns for function names as it will confuse the reader like email()instead of isEmail(). Also, try to be specific with functions and methods name to give more clarity to the user. Like, use createSuperUser() instead of just createUser().

Classes

In JavaScript there are classes and in alternative to it, there are constructor functions that try to imitate objectives like a class (often used prior to ES6). So the below rule applies to both.

The rule is that the class should describe the kind of object it will produce. And objects are of noun form so always use nouns for class names.

Example: Card, User, Seller, Currency, Root, etc.

Consistency (Needed Everywhere)

Consistency with names is important. If you are using one specific file naming convention in one folder use the same in other folders, if you are using a specific name for storing specific data then use that same name at other places in code for that specific data, if you are using a specific prefix for naming constants then try to use the same prefix for all other constants etc.

One example, if you are using fetchProducts() at one place then you should use fetchReviews() at another place instead of getReviews().

Well, no matter if you use fetch or get, whatever you use, stay consistent all day, all time.

Be Specific, Not Generic

In code, mostly try to avoid generic names like change(), handle(), container, data, etc as less specificity gives less idea to the reader.

Try to make names specific wherever possible and necessary. Like, instead of change() use inputChange(), instead of data use userData.

Well, the next part of this series is Don't fuck your code: Part 2. It is good to get specialized in the frontend knowledge so please follow and stay tuned for that.