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

This article mainly introduces "what are the bad coding habits of JavaScript". In the daily operation, I believe that many people have doubts about the bad coding habits of JavaScript. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what are the bad coding habits of JavaScript?" Next, please follow the editor to study!

1. Do not use implicit type conversion

JavaScript is a loosely typed language. If used properly, this is an advantage because it gives you flexibility.

Most operators +-* / = = (excluding =) are implicitly converted when dealing with different types of operands.

The statement if (condition) {...}, while (condition) {...} implicitly converts the condition to a Boolean value.

The following example relies on implicit conversion of types, which can be confusing at times:

Console.log ("2" + "1"); / / = > "21" console.log ("2"-"1"); / / = > 1 console.log ('= 0); / / = > true console.log (true = = []); / /-> false console.log (true = =! []); / /-> false

Over-reliance on implicit type conversions is a bad habit. First of all, it makes your code unstable on the edge. Secondly, it increases the chance of introducing bug that is difficult to reproduce and repair.

Now let's implement a function that gets the properties of the object. If the property does not exist, the function returns a default value

Function getProp (object, propertyName, defaultValue) {if (! object [propertyName]) {return defaultValue;} return object [propertyName];} const hero = {name: 'Batman', isVillian: false}; console.log (getProp (hero,' name', 'Unknown')); / / = >' Batman'

GetProp () reads the value of the name attribute, that is, 'Batman'.

Then try to access the isVillian property:

Console.log (getProp (hero, 'isVillian', true)); / / = > true

This is a mistake. Even if the property isVillian of hero is false, the function getProp () returns the wrong true.

This is because the validation of the existence of the property depends on the Boolean value implicitly converted by if (! object [propertyName]) {.}.

These errors are hard to find, and to fix the function, you need to explicitly verify the type of value:

Function getPropFixed (object, propertyName, defaultValue) {if (object [propertyName] = undefined) {return defaultValue;} return object [propertyName];} const hero = {name: 'Batman', isVillian: false}; console.log (getPropFixed (hero,' isVillian', true)); / / = > false

Object [propertyName] = undefined exactly verifies that the property is undefined.

It is recommended that you avoid using undefined directly. Therefore, the above solution can be further improved:

Function getPropFixedBetter (object, propertyName, defaultValue) {if (! (propertyName in object)) {return defaultValue;} return object [propertyName]}

Forgive the author's advice: do not use implicit type conversions as much as possible. Instead, make sure that variables and function parameters always have the same type, using explicit type conversions if necessary.

List of good practices:

Always compare using the strict equality operator =

Do not use the loose equation operator = =

Addition operator operand1 + operand2: two operands should be numbers or strings

Arithmetic operator-* /% * *: both operands should be numbers

Statements such as if (condition) {...}, while (condition) {...}: condition must be a Boolean value.

You might say that this approach requires more code. You're right! But in a clear way, you can control the behavior of the code. In addition, dominance improves readability.

two。 Do not use early JavaScript techniques

What's interesting about JavaScript is that its creators didn't expect the language to be so popular.

Applications built on JavaScript are more complex than languages. This situation forces developers to use JavaScript techniques and workarounds just to make things work.

A typical example is to see if an array contains an element. I never liked to use array.indexOf (item)! = =-1 to check.

ES6 and later versions are much more powerful, and you can safely ReFactor many techniques using new language features.

Array.includes (item) can be used in ES6 instead of array.indexOf (item)! =-1

3. Do not pollute the function scope

Before ES2015, you may have developed the habit of declaring all variables in the scope of the function.

Let's look at an example:

Function someFunc (array) {var index, item, length = array.length; / * * Lots of code * / for (index = 0; index

< length; index++) { item = array[index]; // Use `item` } return someResult; } 变量index、item和length 在函数作用域内。但是这些变量会影响函数作用域，因为它们只在for()块作用域内才被需要。 通过引入具有块作用域 let和const，应该尽可能地限制变量的生命周期。 function someFunc(array) { /* * Lots of code */ const length = array.length; for (let index = 0; index < length; index++) { const item = array[index]; // Use `item` } return someResult; } index和 item 变量被限制为for()循环块作用域。length 被移动到使用地方的附近。 重构后的代码更容易理解，因为变量不会分散在整个函数作用域内，它们存在于使用地方的附近。 在使用的块作用域定义变量 if 块作用域 // 不好 let message; // ... if (notFound) { message = 'Item not found'; // Use `message` } // 好 if (notFound) { const message = 'Item not found'; // Use `message` } for 块作用域 // 不好 let item; for (item of array) { // Use `item` } // 好 for (const item of array) { // Use `item` }4.尽量避免 undefined 和 null 未赋值的变量默认被赋值为undefined。例如 let count; console.log(count); // =>

Undefined const hero = {name: 'Batman'}; console.log (hero.city); / / = > undefined

The count variable is defined, but has not been initialized with a value. JavaScript implicitly assigns it undefined.

Undefined is also returned when accessing the property hero.city that does not exist.

Why is it a bad habit to use undefined directly? Because when comparing with undefined, you are dealing with variables in an uninitialized state.

Variables, object properties, and arrays must be initialized with values before they are used

JS provides many ways to avoid comparing with undefined.

Determine whether the attribute exists or not

/ / Bad const object = {prop: 'value'}; if (object.nonExistingProp = undefined) {/ /...} / / good const object = {prop:' value'}; if ('nonExistingProp' in object) {/ /.}

The default properties of the object

/ / Bad function foo (options) {if (object.optionalProp1 = undefined) {object.optionalProp1 = 'Default value 1century;} / /...} / / good function foo (options) {const defaultProps = {optionalProp1:' Default value 1'}; options = {. DefaultProps,. Options}}

Default function parameters

/ / Bad function foo (param1, param2) {if (param2 = undefined) {param2 = 'Some default value';} / /...} / / good function foo (param1, param2 =' Some default value') {/ /.}

Null is an indicator of a missing object. You should try to avoid returning null from a function, especially when calling a function with null as an argument.

Once the null appears in the call stack, you must check for its existence in every function that may access the null, which is error-prone.

Function bar (something) {if (something) {return foo ({value: 'Some value'});} else {return foo (null);}} function foo (options) {let value = null; if (options! = = null) {value = options.value; / /.} return value;}

Try to write code that does not involve null. The alternative is the try / catch mechanism, the use of default objects.

5. Don't use a random coding style, implement a standard

What could be more daunting than reading randomly coded code? You never know what will happen!

What if the code base contains different coding styles for many developers? it's like graffiti walls for all kinds of characters.

The entire team and the application code base need the same coding style, which improves the readability of the code.

Some examples of useful coding styles:

Airbnb JS style Guide

Google JS style Guide

To be honest, when I prepare to submit before I go home, I may forget to style the code.

I always say: keep the code the same and update it later, but "later" means never.

It is recommended that eslint be used to standardize the coding style.

Install eslint

Configure eslint with the coding style that best suits you

Set a pre-commit hook to run eslint validation before committing.

At this point, the study of "what are the bad coding habits of JavaScript" 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.