JavaScript Common Mistakes
In this chapter, we will discuss common JavaScript mistakes.
Misusing the Assignment Operator
In a JavaScript program, if you use the assignment operator's equals sign (=) in an if condition statement, it will produce an incorrect result. The correct method is to use the comparison operator's double equals sign (==).
ifThe condition statement returnsfalse(as we expected) because x is not equal to 10:
ifThe condition statement returnstrue(not what we expected) because the condition statement assigns x = 10, and 10 is true:
ifThe condition statement returnsfalse(not what we expected) because the condition statement assigns x = 0, and 0 is false:
 |
An assignment statement returns the value of the variable. |
|---|
Common Mistakes with Comparison Operators
In regular comparison, the data type is ignored. The following if condition statement returns true:
In strict comparison, === is the identity operator, which checks both the value and type of the expressions. The following if condition statement returns false:
This type of mistake often occurs in switch statements, because switch statements use the identity operator (===) for comparison:
The following example will execute an alert popup:
The following example will not execute an alert popup because the types do not match:
Precautions for Addition and Concatenation
Additionis adding twonumberstogether.
Concatenationis joining twostringstogether.
JavaScript uses the + operator for both addition and concatenation.
Next, we can use examples to see the difference between adding two numbers and concatenating a number with a string:
var x = 10 + "5"; // The result of x is "105"
Try it Yourself »
Using variables for addition also produces inconsistent results:
var y = 5;
var z = x + y; // The result of z is 15
var x = 10;
var y = "5";
var z = x + y; // The result of z is "105"
Try it Yourself »
Precautions for Floating-Point Data
All data in JavaScript is stored as 64-bitfloating-point data (float)for storage.
All programming languages, including JavaScript, find it difficult to determine the precision of floating-point data:
var y = 0.2;
var z = x + y // The result of z is 0.30000000000000004
if (z == 0.3) // returns false
Try it Yourself »
To solve the above problem, you can use integer multiplication and division:
For more details, you can refer to:Precision Issues in JavaScript and Solutions
JavaScript String Line Breaks
JavaScript allows us to use line breaks in strings:
However, using a carriage return line break directly in a string will cause an error:
You can open the developer tools or press F12 to view the error message:
To break a line in a string, you need to use a backslash (\), as shown below:
Incorrect Use of Semicolons
In the following example, the if statement loses its body. The original if statement body is executed as an independent code block, leading to incorrect output.
Because of the incorrect use of the semicolon, the code block in the if statement will always execute:
Notes on the return Statement
By default, JavaScript automatically ends at the end of a line.
The following two examples return the same result (one has a semicolon, the other does not):
JavaScript can also use multiple lines to represent a statement, meaning a statement can be split across lines.
The following examples return the same result:
However, the following example will returnundefined：
Why does this happen? Because in JavaScript, the code in Example 4 is equivalent to the following code:
function myFunction(a) {
var
power = 10;
return; // 分号结束，返回 undefined
a * power;
}
Explanation
If it is an incomplete statement, as shown below:
var
JavaScript will try to read the statement on the second line:
power = 10;
But because such a statement is complete:
return
JavaScript will automatically close the statement:
return;
In JavaScript, semicolons are optional.
Because return is a complete statement, JavaScript will terminate the return statement.
|
|
Note:Do not break the return statement across lines. |
|---|
Using Names to Index Arrays
Many programming languages allow using names as array indexes.
Arrays that use names as indexes are called associative arrays (or hashes).
JavaScript does not support using names to index arrays; it only allows numeric indexes.
Example
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length returns 3
var y = person[0]; // person
Try it Yourself »
In JavaScript,objectsusenames as indexes.。
If you use names as indexes, JavaScript will redefine the array as a standard object when accessing the array.
After this operation, the array's methods and properties will no longer be usable, otherwise errors will occur:
Example
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length returns 0
var y = person[0]; // person
Try it Yourself »
When defining array elements, do not add a trailing comma
Adding a comma after the last value of an array is syntactically fine, but different browsers may produce different results.
var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
Correct way to define:
points = [40, 100, 1, 5, 25, 10];
When defining an object, do not add a trailing comma
Incorrect way to define:
websites = {site:"Example", url:"www.example.com", like:460,}
Correct way to define:
websites = {site:"Example", url:"www.example.com", like:460}
Undefined is Not Null
In JavaScript,nullused for objects,undefinedused for variables, properties, and methods.
An object can only be null if it has been defined; otherwise, it is undefined.
If we want to test whether an object exists, it will throw an error if the object has not been defined yet.
Incorrect usage:
if (myObj !== null && typeof myObj !== "undefined")
The correct way is to first use typeof to check whether the object is defined:
if (typeof myObj !== "undefined" && myObj !== null)
Block Scope
In each code block, JavaScript does not create a new scope; generally, the scope of each code block is global.
The variable i in the following code returns 10, not undefined:
Other extensions