What Are The Common Mistakes Done With Java Script

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

In Java script we make common mistake so do we discuss about common mistakes in java script

What Are The Common Mistakes Done With Java Script

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:

Example(3)
<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>

In strict comparison, data type does matter. This 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>

When adding two variables, it can be difficult to anticipate the result:

Example(8)
<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>

To solve the problem above, it helps to multiply and divide:
<script>
    var x = 0.1;
    var y = 0.2;
    var z = (x * 10 + y *10) / 10;
    document.getElementById("demo").innerHTML = z;
</script>


Complete Code For Common Mistakes Done With Java 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>

Related Post