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

This article mainly introduces "how to write better JS code". In daily operation, I believe many people have doubts about how to write better JS code. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to write better JS code". Next, please follow the editor to study!

Use template string

A template string is a string (variable) that can be embedded in an expression, which makes the code simpler and easier to read.

Var code = "javascript"; var str = `I love ${code} I love ${code} `

If there is no template string, we need to write:

Var code = "javascript"; var str1 = "n I love" + code + "n I love" + code + "n"; use ternary operator

In programming, logical operations are encountered. Ternary operators are much more readable if you want to execute logic between two statements.

Let price= isMember?'$2.00':'$10.00 'uses the include statement

The include statement in JS is an easier way to search for strings in arrays and sentences.

Var str = "I love JavaScript."; var word = str.includes ("javaScript"); / / result: true

Arrays can also use the include method:

Var str = ["taimoor", "ali", "umer"]; var n = str.includes ("taimoor"); / / result: true null merge operator

If we are using a third-party API, we may encounter the same key-value that does not appear in each query. So we have to check the null keys in JSON to avoid errors.

To check for null keys, you can use the following methods:

Conditional statement

Empty merge operator (?)-(recommended)

For example, we have the following JSON:

Var person = {name: "Taimoor Sattar", age: 21, metadata: {hobby: "football, blog"}}

Using conditional statements, we can access the hobby property in the matadata of JSON, as shown below

Let hobby = ""; if (person.metadata) {hobby = person.metadata.hobby? Person.metadata.hobby: ";}

Using the null merge operator, we just need to do this:

Let hobby = person.metadata?.hobby? ""

The above code checks the hobby key in the JSON metadata and returns a value if available, otherwise an empty string.

Function default parameter

Some functions in JS allow us to send option parameters. The return value of the function can be changed depending on the optional parameters.

Function outputName (name= "taimoor") {return name;} let string1 = outputName (); / / result: taimoor let string2 = outputName ("ali"); / / result: type checking of the ali parameter

In some cases, function parameters have type restrictions, and we can check the type of the function as follows:

Function sum (a, b) {let result = (typeof a = = "number" & & typeof b = = "number")? A + b: null; return result} sum ("s", 6) / / result: null sum (4,6) / / result: 10 use Try/Catch wrapper code

The Try/Catch statement is used to check for errors in the code. If something goes wrong, the catch statement will be run.

Try {functionnotexist ();} catch (e) {console.log ("error");} deconstruction

Through deconstruction, we can extract the complex structure from the parts we need.

Function outputName ({name = "taimoor"}) {/ / De-structuring return name;} var person = {name: "Taimoor Sattar", age: 21, metadata: {hobby: "football, blog"}} let str = outputName (person); / / Taimoor Sattar write DRY code

DRY (don't repeat yourself) to avoid repetition in your code to avoid confusion. To avoid code confusion, you can follow the following rules.

Write reusable functions

Well-defined names for variables and functions

At this point, the study on "how to write better JS code" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.