“There are two things that cannot be missed in life. That is the last car ride and those who love me sincerely” – This is a very good saying in the movie The Eye of the Cinema hit theaters exactly a year ago. In programming, there are two difficulties: disabling the cache and naming variables, functions …

Ignore disabling the cache, which is really hard. The second thing with variable naming seems easier to do. Naming clearly makes it easier for everyone to read code, easy to fix bugs, and to support others. When my code is trying to name the variable or function, it follows some basic rules.

1. Use meaningful prefixes

Although these prefixes are not very common, they are very useful for teamwork. Used consistently throughout the codebase makes it easier to read and understand

• get , find , fetch : tells a function to return a value or a Promise resolve a value without changing its argument or itself.
• set , update : for functions to change passed values, update objects, initialize values, … Or these functions can also return values ​​or a Promise resolve to be an updated value.
• on , handle : for event handlers. For example, onEvent used to props through the components, handleEvent used for processing in the component.
• is , should , can used for variables and functions that check or return boolean values.

Any convention of the team should be documented for the whole team to follow for everyone to review.

2. Use meaningful complementary words

There will be a lot of brothers naming the variable data as a default habit, let’s take a look at some of its definitions:

• Actual information (such as measurements or statistics) used as a basis for reasoning, discussion, reporting, or calculation.
• Information in digital form can be transmitted or processed.

These definitions are very general, do not provide detailed information for everyone, let’s take a look at the example of non-compliance:

Reading through the example, we all know this function sums something with the parameter passed as data something, obviously when reviewing the code we are very difficult.

Exception

For example, the axios library uses data , the data in the form is assigned to the data passed to the function sent to the server.

3. Use full words

Many people find that the variable name or function is long, they often abbreviate it to be short.

Let’s look at the example:

Read through and take a little time to shake the brain, we can translate: accts means accounts , tot means total , but if there is no time to think and read through, it is impossible to guess the meaning of it. what.

Exception

Common abbreviations should be used with acronyms rather than full writing (e.g. URL, API, CSS, HTML …)

4. Do not use Fluff words

Container and Wrapper only meaningful in relation to what they are containing.The problem is that any element that is not a base element contains another element, which makes naming difficult, for example : MyComponentContainerContainer .

Exception

In some contexts, the fluff words have an important meaning. A good example of React component classes is presentation / container. In this case, the container could be justified as a state management component.

5. Spelling

Probably many of us have ever named a variable or function misspelled, such as lack of words, excess words, wrong meaning … this can be annoying for reviewers. Well in this case there are no exceptions to misspellings, this move is not allowed to move

Combine together

Applying the above rules, we get the following function

Conclude

The goal of these rules helps to bring a lot of meaning to the whole team building a rule set when naming variables, function names are always consistent not only from the beginning to the end of the project but also to build people the following coding habits. this. Let’s review the rules of the team, if one does more harm than good, then remove that rule.

REFER

Stop Using data as a variable name