THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Common Mistakes


In this section we will discuss the misunderstandings of using JavaScript.

Wrong assignment operator applied

If you use the equal sign (=) of the assignment operator in an if conditional statement in a JavaScript program, it will produce an incorrect result. The correct way is to use the two equal signs (==) of the comparison operator. The if conditional returns false (which we expected) because x is not equal to 10:
var x = 0;
if (x == 10)
Try it Yourself »

The if conditional returns true (not what we expected) because the conditional statement evaluates to 10 and assigns 10, which is true:/p>

var x = 0;
if (x = 10)
Try it Yourself »

The if conditional returns false (not what we expected) because the conditional statement evaluates to 0 and assigns 0 to 0, which is false:

var x = 0;
if (x = 0)
Try it Yourself »

Comparison operator common errors

In regular comparisons, the data type is ignored, and the following if conditional returns true:

var x = 10;
var y = "10";
if (x == y)
Try it Yourself »

In strict comparison operations, === is the identity operator, while checking the value and type of the expression, the following if conditional statement returns false:

var x = 10;
var y = "10";
if (x === y)
Try it Yourself »

This error often occurs in switch statements, which are compared using the identity operator (===): The following example executes an alert popup:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}
Try it Yourself »

The following example does not execute an alert popup due to inconsistent types:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}
Try it Yourself »

Addition and connection considerations

Addition is the addition of two numbers .

Connections are two strings connections.

JavaScript uses the + operator for addition and concatenation.

Next, we can see the difference between the addition of two numbers and the connection between numbers and strings through examples:

var x = 10 + 5; // x yields 15 var x = 10 + "5"; // x yields "105"
Try it Yourself »

Adding results using variables is also inconsistent:

var x = 10; var y = 5; var z = x + y; // z yields 15 var x = 10; var y = "5"; var z = x + y; // z yields "105"
Try it Yourself »

Notes on the use of floating-point data

All data in JavaScript is stored as 64-bit float data .

All programming languages, including JavaScript, have difficulty determining the accuracy of floating-point data:

var x = 0.1; var y = 0.2; var z = x + y // z yields 0.3 if (z == 0.3) // returns false
Try it Yourself »

To solve the above problem, you can use integer multiplication and division to solve:

Example

var z = (x * 10 + y * 10) / 10; // the result of z is 0.3
Try it Yourself »

JavaScript string branch

JavaScript allows us to use line break statements in strings:

Example 1

var x =
"Hello World!";
Try it Yourself »

However, using a carriage return or line feed in a string will report an error:

Example 2

var x = "Hello
World!";
Try it Yourself »

However, using a carriage return or line feed in a string will report an error:

Example 3

var x = "Hello \
World!";
Try it Yourself »

Incorrect use of semicolons

In the following example, the if statement loses its method body, and the method body of the original if statement is executed as a separate code block, resulting in an incorrect output.

Because the semicolon is wrong, the code block in the if statement will be executed:

if (x == 19); { // code block }
Try it Yourself »

Breaking a Return Statement

By default, JavaScript ends automatically at the last line of code. The following two examples return the same results (one with a semicolon and one without):

Example 1

function myFunction(a) { var power = 10 return a * power }
Try it Yourself »

Example 2

function myFunction(a) { var power = 10; return a * power; }
Try it Yourself »

JavaScript can also use multiple lines to end a statement. The following example returns the same result:

Example 3

function myFunction(a) { var power = 10; return a * power; }
Try it Yourself »

However, the following instance results return undefined:

Example 4

function myFunction(a) { var power = 10; return a * power; }
Try it Yourself »

Why is there such a result? Because in JavaScript, the code for instance 4 is consistent with the following:

Example 5

function myFunction (a) { var power = 10; return; // end of semicolon, return undefined a * power; }
Try it Yourself »

Explanation

If it is an incomplete statement, it looks like this:

var

JavaScript will try to read the statement on the second line:

return = 10;

But since such a statement is complete:

return;