How to write clean JS code? 5 writing tips to share

Reduce the reading burden, inspire creative thinking, and learn JavaScript skills easily. Rigongyiping, jym, rush~

1. Define numbers as constants.

We often use numbers, such as the following code:

const isOldEnough = (person) => {
  return person.getAge() >= 100;
}

Who knows what this 100 specifically refers to? We usually need to combine the function context to speculate and judge what value this 100 may specifically represent.

If there are multiple such numbers, it will easily cause greater confusion.

Write clean JavaScript: Defining the number as a constant

solves this problem clearly:

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

Now, by declaring the name of the constant, we can immediately understand that 100 means "age requirement". When modifying, you can quickly locate it, modify it in one place, and take effect in multiple places.

2. Avoid using Boolean values ​​as function parameters.

Passing Boolean values ​​into functions as parameters is a common writing method that easily causes code confusion.

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

The Boolean value passed into the function as a parameter cannot express a clear meaning. It can only tell the reader that this function will make a judgment and produce two or more situations.

However, we advocate the Single Responsibility Principle for functions, so:

Write clean JavaScript: Avoid boolean values ​​as function parameters

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3. Encapsulating multiple conditions

we often write code like this:

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

It’s not impossible, but after a long time, you will suddenly not understand what these judgments are for, so it is recommended to encapsulate these conditions with variables or functions.

Write clean JavaScript: encapsulate multiple conditions

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}

or

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}

Oh, it turns out that these conditions are to determine whether this person is Simon ~

This kind of code is declarative style code, which is more readable.

4. Avoid negative judgments.

In conditional judgments, using negative judgments will cause an additional burden of thinking.

For example, in the code below, the condition !isCreatureNotHuman(creature) is double negative, which makes it a bit difficult to read.

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

Write clean JavaScript: Avoid negative judgment conditions

by rewriting it into the following writing rules to make it easier to read. Although this is only a small trick, in a large amount of code logic, following this principle in many places will definitely be very useful. help.

Many times, when reading code, I just keep reading. When I see a "bad" writing method, I can't stand it anymore. Details will be superimposed, and a thousand-mile dike will collapse in an ant nest.

const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}

5. Avoid a lot of if...else...

This point has always been emphasized by Bengua:

For example, the following code:

if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}

Rewritten as map:

let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

Another example is the following code:

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

Rewritten as an array:

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

Write clean JavaScript: avoid a lot of if...else...

So, when there are a lot of if...else... in the code, think one more step and see if you can make a little modification to make the code look more "clean" ".

Summary: The above techniques may not seem worth mentioning in examples, but in actual projects, when the business logic becomes complex and the amount of code becomes large, these tips will definitely provide positive effects and help. Even beyond imagination.

The above is how to write clean JS code? 5 writing tips are shared in detail. For more information, please pay attention to other related articles on the PHP Chinese website!