JS naming conventions

Cache invalidity aside , It's really difficult , Whenever I can't find the right name , This infamous quote will haunt my mind .

When someone needs to understand code quickly , Clear naming provides important context , Whether they are coding 、 Debugging or assisting teammates —— I don't need to ask others what users mean , But I have to ask the meaning of the data .

Although I don't often find the best name , But I try to optimize my code by following some basic rules .

Use meaningful prefixes

Although these prefixes are not universal , But they are good for building a shared language in your team . Using them consistently in your code base can make reading easier .

• Function name prefix get、 find、 fetch Used to represent that the function returns a value
• Function name prefix set、update Used to represent that the function will be used to update
• on、handle Used for event handlers
• is、should、can Representing a value or function will be a boolean type

Any conventions that become standard in the team help improve readability . Please make sure that in the project Readme File or wiki Record these in .

Use meaningful words

for example , Developers usually name variables... By default data, But let's examine a few of its definitions ：

• As reasoning 、 Discuss or calculate the basic factual information ( Such as measurement or statistics )
• Information in digital form that can be transmitted or processed

These definitions can refer to any variable we deal with , So they don't give the reader any information . Let's look at an example of not following this rule ：

function total(data) {
  let total = 0;
  for (let i = 0; i < data.length; i++) {
    total += data[i].value;
  }

  return total;
}

We know that this function calculates something , But we're not sure what it is .

Use complete words

When it comes to variable naming , Shortcuts usually mean abbreviations or single character variable names .

Like the case code above , Let's look at a function that doesn't follow the rules ：

function totBal(accts) {
  let tot = 0;
  for (let i = 0; i < accts.length; i++) {
    tot += accts[i].bal;
  }

  return tot;
}

We can probably guess accts yes account, tot yes total, But we can't see the meaning of the code at a glance .

Do not use “ It's useless ” The word

container and wrapper It makes sense only when it is related to what they contain . The problem is , Not every component of a basic element contains another component .

You will also get bogged down in naming components MyComponentContainerContainer Awkward situation .wrapper So it is with .

Pay attention to spelling : )

Misspelling words can cause bug, Make searching code harder . Spelling mistakes are easily overlooked , But if everything in the code base is spelled correctly , It makes a huge difference , Especially when trying to find globally / When replacing .

Right case

Apply all rules at the same time , We get the following function ：

function getAccountsTotalBalance(accounts) {
  let totalBalance = 0;
  for (let accountIndex = 0; accountIndex < accounts.length; accountIndex++) {
    totalBalance += accounts[accountIndex].balance;
  }

  return totalBalance;
}

although accountIndex And i There may be controversy , But the rest of the function should be clearer .getAccountsTotalBalance Completely conveys the intent of the function , Prefix get It does not cause any mutation . For the benefit of readers , It is worthwhile for the code author to devote more energy .6 After a month , When they maintain code , Your future self will appreciate the extra work they do .

If you are worried about the line length , Consider using Prettier Tools like to automatically format code .

summary

The goal of these rules is to make the code we write for future readers as meaningful as possible . Find rules that fit your context , If a rule does more harm than good , Just change or discard it . Coding your team's rules will help you communicate your ideas on this issue , Instead of hitting your colleagues .