Home > Article > Web Front-end > 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.
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.
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?
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];复制代码
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.
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!