Shulou(Shulou.com)06/03 Report--

This article introduces you how to reduce the complexity of the function in JavaScript refactoring skills, the content is very detailed, interested friends can refer to, hope to be helpful to you.

JavaScript is an easy-to-learn programming language, and it's easy to write programs that run and perform certain operations. However, it is difficult to write a clean piece of JavaScript code.

Move duplicate code to the same location

We should extract the duplicate code and merge it into the same location, so that when we need to change it, we only need to change one place, and at the same time reduce the error rate.

Suppose we are likely to write the following code:

Const button = document.querySelector ('button'); let toggled = true; button.addEventListener (' click', () = > {toggled =! toggled; if (toggled) {document.querySelector ("p"). Style.color = 'red';} else {document.querySelector ("p"). Style.color =' green';}})

There are two document.querySelector ("p") in the above code, which we can optimize by saving document.querySelector ("p") to a variable and then using that variable, as shown below:

Const button = document.querySelector ('button'); const p = document.querySelector ("p"); let toggled = true; button.addEventListener (' click', ()) = > {toggled =! toggled; if (toggled) {p.style.color = 'red';} else {p.style.color =' green';}}

So we don't have to write a long document.querySelector ("p"), just write a variable p.

Numbers in another common code example, it's hard to know what they mean just by looking at them:

Let x = 1; let y = 1; let z = 1

We don't know what the above three ones mean, so we can remove the duplicate code and represent it with an appropriate variable name, as shown below:

Const numPeople = 1; let x = numPeople; let y = numPeople; let z = numPeople

So we can know that the value of numPeople is 1, which represents the number of people.

Simplified function

The function should be as simple as possible, it is best to do only one thing, not too many rows, no more than 30 lines at most.

We should not use the ES5 class approach, nor should we use "IIFE" with modules or blocks. Instead, we should use class syntax, where you can include multiple instance methods of the class in the class. This greatly reduces the volume of the function.

Similarly, as long as we can define functions, functions should be pure functions, which means that they should not have side effects.

For example, the best simple function is as follows:

Const add = (a, b) = > a + b

The above function does not have any side effects because it does not modify any variables outside the function. In addition, it is also a pure function, and the output is the same for the same input.

Use guard statements instead of nested statements

The definition and usage of Wei sentence:

Wei sentence is to split a complex conditional expression into multiple conditional expressions, such as a very complex expression, nested several layers of if-then-else statements, converted into multiple if statements to achieve its logic. These multiple if statements are guard sentences.

Sometimes conditionality may occur in nesting n times before it can be really executed, and the other branches simply report an error and return. In this case, the branch returned by the error report should be checked separately and returned immediately when the condition is true. Such a separate check is the guard clauses. Guard sentences can liberate our eyes from exception handling and focus on the code that handles them normally.

For example, we might write code like this:

Const greet = (firstName, lastName, greeting) = > {if (typeof firstName = 'string') {if (typeof lastName =' string') {if (typeof greeting = 'string') {return `{greeting}, ${firstName} ${lastName}`;}

We can optimize it like this.

Const greet = (firstName, lastName, greeting) = > {if (typeof firstName! = = 'string') {throw new Error (' first name is required');} if (typeof lastName! = = 'string') {throw new Error (' last name is required');} if (typeof greeting! = = 'string') {throw new Error (' greeting is required');} return `${greeting}, ${firstName} ${lastName}`;}

In the second example, if each parameter is not a string, an error is thrown, eliminating the nested if statement.

This reduces nested if statements to non-nested if statements when performing the same operation.

Nesting is difficult to read and understand, and we should get rid of them everywhere.

Summary

Repetitive code is always bad. We should always remember the principle of "Don't repeat yourself (DRY)".

In addition, some new ways should be used to replace the writing of the ES5 era.

Finally, you should replace nested if statements with guard statements because they perform the same checks as nested if statements, which is good for reading.

JavaScript refactoring skills on how to reduce the complexity of the function to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.