Avoid these five Javascript mistakes

The

javascript column will list five tips to make your code more readable and easier to maintain.

When editing old projects, have you ever encountered confusing code that "shatters" as soon as new logic is added? Of course we've all been there. In order to save the world from unreadable Javascript code, I have to show you the following five examples - my pillar of shame.

Use array destructuring to obtain multiple return values ​​of a function

If we have a function that returns multiple values, we can use array destructuring to obtain the value. The code is as follows:

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4; 
  return [a,b,c,d];
}const [a,b,c,d] = func();console.log(a,b,c,d); // Outputs: 1,2,3,4复制代码

Although the above method can achieve assignment, it has some side effects.

When calling a function to get the return value a,b,c,d, we need to pay attention to the order in which the return value is returned. A small mistake here may be your debugging nightmare.

In addition to paying attention to the order, we can't just get a few of the return values ​​we want. What if I only want c,d?

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();复制代码

We can use object destructuring assignment to replace it.

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();复制代码

Now we can freely choose which function return values ​​we need.

In the future, even if the function adds more return values, the object destructuring code can remain unchanged, making the code more stable.

No object destructuring is used in function input parameters

Suppose we have a function whose input parameter is an object, and the code within the function needs to use the properties of this object. A naive implementation is as follows:

// badfunction getDaysRemaining(subscription) {  const startDate = subscription.startDate;  const endDate = subscription.endDate;  return endDate - startDate;
}复制代码

Although this solution meets our needs, it declares two unnecessary temporary reference variables startDate and endDate.

A better solution is to use object destructuring to obtain the input parameters startDate and endDate in one line.

// betterfunction getDaysRemaining(subscription) {  const { startDate, endDate } = subscription;  return startDate - endDate;
}复制代码

We can even use object destructuring to define these two variables directly in the input parameters.

// even betterfunction getDaysRemaining({ startDate, endDate }) {  return startDate - endDate;
}
Much more elegant wouldn’t you agree?复制代码

Don’t you think this is more elegant?

Copy the array without using expansion syntax (...)

Use for Looping through the elements and then copying them to a new array is not only cumbersome but also ugly.

Using expansion syntax can make the implementation clearer and more concise.

const stuff = [1,2,3];// badconst stuffCopyBad = []for(let i = 0; i < stuff.length; i++){
  stuffCopyBad[i] = stuff[i];
}// goodconst stuffCopyGood = [...stuff];复制代码

Use Var

Use const to ensure that a variable cannot be reassigned, which can reduce bugs and improve code readability.

// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";复制代码

If you really need to reassign a variable, always prefer let over var . If you really need to reassign a variable, use let instead of var.

let works at block scope, while var works at function scope.

Block scope makes the variable only valid in the code block in which it is defined. Accessing the variable outside the block scope will prompt a ReferenceError.

for(let i = 0; i < 10; i++){  //something}
print(i) // ReferenceError: i is not defined复制代码

Variables defined in function scope can be used within the scope of the function in which it is defined. Both

for(var i = 0; i < 10; i++){  //something}console.log(i) // Outputs 10复制代码

let and const defined variables can be accessed in the block scope.

Not using template strings

Manually splicing strings is very complicated to write and confusing to read. See example:

// badfunction printStartAndEndDate({ startDate, endDate }) {  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}复制代码

Template strings provide a clear and readable way to insert variables into strings.

// goodfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}复制代码

Template strings provide a simple way to wrap lines. You only need to press the enter key on the keyboard, just like you usually use (in the system).

// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}复制代码

More related free learning recommendations: javascript(Video)

The above is the detailed content of Avoid these five Javascript mistakes. For more information, please follow other related articles on the PHP Chinese website!