Accidentally Using the Assignment Operator
JavaScript programs may generate unexpected results if a programmer accidentally uses an assignment operator (=
), instead of a comparison operator (==
) in an if statement.
This if
statement returns false
(as expected) because x is not equal to 10:
Example(1)
<script> var x = 0; document.getElementById("demo").innerHTML = Boolean(x == 10); </script>
This if
statement returns true
(maybe not as expected), because 10 is true:
Example(2)
<script> var x = 0; document.getElementById("demo2").innerHTML = Boolean(x = 10); </script>
This if
statement returns false
(maybe not as expected), because 0 is false:
<script> var x = 0; document.getElementById("demo3").innerHTML = Boolean(x = 0); </script>
An assignment always returns the value of the assignment.
Expecting Loose Comparison
In regular comparison, data type does not matter. This if
statement returns true:
Example(4)
<script> var x1 = 10; var y1 = "10"; document.getElementById("demo4").innerHTML = Boolean(x1 == y1); </script>
if
statement returns false:
<script> var x1 = 10; var y1 = "10"; document.getElementById("demo5").innerHTML = Boolean(x1 === y1); </script>
It is a common mistake to forget that switch
statements use strict comparison:
This case switch
will display an alert:
Example(5)
<script> var x = 10; switch(x) { case 10: alert("Hello"); } </script>
This case switch
will not display an alert:
Example(6)
<script> var x = 10; switch(x) { case "10": alert("Hello"); } </script>
Confusing Addition & Concatenation
Addition is about adding numbers.
Concatenation is about adding strings.
In JavaScript both operations use the same +
operator.
Because of this, adding a number as a number will produce a different result from adding a number as a string:
Example(7)<script> var x = 10 + "5"; document.getElementById("demo").innerHTML = x; </script>
<script> var x = 10; var y = "5"; var z = x + y; document.getElementById("demo").innerHTML = z; </script>
Misunderstanding Floats
All numbers in JavaScript are stored as 64-bits Floating point numbers (Floats).
All programming languages, including JavaScript, have difficulties with precise floating point values:
Example(9)<script> var x = 0.1; var y = 0.2; var z = x + y; document.getElementById("demo").innerHTML = z; </script>
<script> var x = 0.1; var y = 0.2; var z = (x * 10 + y *10) / 10; document.getElementById("demo").innerHTML = z; </script>
<!DOCTYPE html> <html> <head> <title>What Are The Common Mistakes Done With Java Script</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> body{ background: black; } </style> <body> <div class="container"> <br> <div class="text-center"> <h1 id="color" style="color: White">What Are The Common Mistakes Done With Java Script</h1> </div> <br> <br> <div class="well"> <h2 id="demo1"></h2> <h2 id="demo2"></h2> <h2 id="demo3"></h2> <h2 id="demo4"></h2> <h2 id="demo5"></h2> <script> var x = 0; document.getElementById("demo1").innerHTML = Boolean(x == 10); document.getElementById("demo2").innerHTML = Boolean(x = 10); document.getElementById("demo3").innerHTML = Boolean(x = 0); var x1 = 10; var y1 = "10"; document.getElementById("demo4").innerHTML = Boolean(x1 == y1); document.getElementById("demo5").innerHTML = Boolean(x1 === y1); </script> </div> </div> </body> </html>