Difference Between =, == And === In JavaScript

Difference between =, ==, and === in JavaScript

This article explains the difference between =, ==, and === in JavaScript. I have chosen an example to illustrate the comparison of =, ==, and ===. 

• = is used for assigning values to a variable in JavaScript.
• == is used to compare two variables irrespective of the variable's data type. The == operator performs a loose equality comparison. This means that it will compare the values of the two operands, even if they are of different types. If the values are equal, the operator will return true. If the values are not equal, the operator will return false.
• === is used to compare two variables, but this will check strict type, which means it will check the datatype and compare two values. The === operator performs a strict equality comparison. This means that it will compare the values of the two operands, and it will also check that they are of the same type. If the values are equal and they are of the same type, the operator will return true. If the values are not equal, or if they are of different types, the operator will return false.

Let's take the example of each one by one.

Example of =

var number = 100;  // Here number variable assigned using =

Example of == 

if (number == 100)  
// Here Comparision between two values using ==. 
//It will compare irrespective ve of datatype of variable
   alert("Both are equal");    
else    
   alert("Both are not equal");

Example of ===

if (number === 100)  
// Here Comparision between two values using ===. 
//It will compare checks, check means it will check datatype as well.
   alert("Both are equal");      
else      
   alert("Both are not equal");     

Let's take an example below to understand how == comparison of two variable values. 

<h2>Difference between =, == and === in Javascript</h2>  
<script type="text/javascript">  
    function Comparision() {  
        var number = 100;  // Here number variable assigned using =  
        debugger;  
  
        if (number == 100)  
        // Here Comparision between two values using ==. 
        //This will not the check datatype, irrespective ve of datatype it will do the comparison  
            $("#lblMessage").text("Both are equal");  
        else  
            $("#lblMessage").text("Both are not equal");  
  
      if(number == "100")  
      //Here Comparision between two values using ==. 
      //This will not check datatype, irrespective of datatype it will do comparison  
            $("#lblMessage1").text("Both are equal");  
        else  
           $("#lblMessage1").text("Both are not equal");  
    }  
</script>  

In the above example, the comparison returns a true value irrespective of the datatype. So 100==100 means both are int values, and the other condition, 100 == implies means int comparison with "100" string type of variable still returns true. So it means == is not doing a strict type check.

<h2>Difference between =, == and === in Javascript</h2>  
<script type="text/javascript">  
    function Comparision() {  
        var number = 100;  // Here number variable assigned using =  
        debugger;  
  
        if (number === 100)  
        // Here comparison between two values using ==. 
        //This will not check datatype, irrespective of datatype it will do the comparison  
            $("#lblMessage").text("Both are equal");  
        else  
            $("#lblMessage").text("Both are not equal");  
  
        if (number === "100")  
        // Here comparison between two values using ===. 
        //This will not check datatype, irrespective of datatype it will do the comparison  
            $("#lblMessage1").text("Both are equal");  
        else  
           $("#lblMessage1").text("Both are not equal");  
    }  
</script>  
<table>  
    <tr>  
        <td>  
            100 === 100  
        </td>  
        <td>  
           <label id="lblMessage" runat="server" ></label>  
        </td>  
    </tr>  
    <tr>  
        <td>  
            100 === "100"  
        </td>  
        <td>  
           <label id="lblMessage1" runat="server" ></label>  
        </td>  
    </tr>  
      
</table>  
 <button id="btnSubmit" type="submit" onclick="Comparision();" class="btn btn-primary">Submit</button>  

In the above code snippet, I have compared two variables using the === operator. It returns true for 100 =,== 100 and false for 100 === "100". It means === does a strict check for comparison. It checks datatype also compares whether both are equal or not.

Conclusion

This article explained the difference between =, ==, and === in JavaScript. The single = is used for assigning the value due to the variable, and == , === are used for comparison purposes. == compares two variables irrespective of data, a type, while === compares two variables in a strict check, which means it checks for data and returns true or false.