Difference Between == and === Operators In JavaScript and How to Use It?

We often encounter many situations where we need to compare two things. For example, when you log into any application. The login page requests you for your username and password. After you submit the details, the application checks through its database and compares the entered details with the details available in database. If the records match, it allows you to log in; otherwise, it throws an error. Here the equality == and === operators are used in JavaScript.

We can use the == and === operators in JavaScript for the comparison. The main difference between the two equality operators in JavaScript is that the == operator performs the data type conversion of the operands before comparison, whilst the === operator compares the values as well as the data types of the operands.

• == operator.
• === operator.

What are the == and != in JavaScript?

The == and != operators in JavaScript are also used to compare two input values. The == operator compares if two values are equal. Whereas, the != operator checks if two values are not equal. This one is also known as the loose equality operator as it checks for abstract equality, i.e. it tends to convert the data types of operands to carry the comparison when two operands are not of the same data type.

The syntax on how to use both is given below.

Equality Operator:

a == b

Inequality Operator:

a != b

Here a and b are operands, and in between them is the operator. For equality comparison, we use the == operator, and for inequality comparison, we use != operator.

The return type of the expression is Boolean, i.e. It either returns true or false value.

The == operator will return true if both operands have the same value or if both are of different data types, are of the same or even different data types. If both operands have varying values, then it will return false.

The != operator also returns true if both operands have the same data type but different values or if both have a different data types and none of the types can be compared to the other operand’s type. For example, a string and an integer on both sides.

It will return false if both operands are of the same data type and have the same value or if both are of varying data types, but either one of them can be converted to the data type of the other operand and have the same value. For example, while comparing an integer and floating point integer.

The == or != operator performs type conversion of operands before comparing them.

What is type conversion?

Type conversion is what differentiates the == and === operators. When using == or !=, it loosely compares two operands. Here, if both operands are not of the same data type, the operator tries to convert them to one similar data type and compares their values. For example entering 12 and 12.0 using == will return true.

However, using === operator and comparing == and === will give use false. As === may not perform type conversion and strictly compares the two operands, as well as their data types.

This is a main and the most significant difference between == and === operators in JavaScript. Consider the example below.

let a = 5;
let b = '5';

console.log(a == b);
//output: true


If you are comparing two values, where one is a string, and another is a number, then using the == operator converts the string value to the number type and then compare the values.

In the example above, b is converted to an integer type by the operator ==, and then it is compared to a. Now, since the numeric value of both a and b are the same, so it returns true.

To understand type conversion in other frameworks, check here.

How does == and != operator works when both operands are of the same type

When both operands to be compared are of the same data type, then the == and != operators behave in the following way.

• If both are of integer data type, then the == operator will return true if both have the same value, or else false.
• The != operator will perform vice versa. Consider the example below.

let x = 10; 
let y = 10; 
let z = -10; 
console.log(x==y); //output: true console.log(x==z); 
//output: false console.log(y!=z); 
//output: true console.log(a!=b); //output: false 

In the example above, the first output returns true as the value of x and y are same, and the second value is false as x and z have different comparison sign (i.e. !=). Likewise, the third output is true as y, and z are not the same, and the fourth is also true as x and y are the same.

• When you compare a number with NaN, it still outputs false when using the == operator.
• When both operands are of string data type, the == operator returns true only if every element of the first operand matches with every element of the second operand. The != operator performs the opposite.

Operands are Case Sensitive

Lets consider the example below.

let str_a = 'Javascript';
    let str_b = 'Javascript';
    let str_c = 'JavaScript';

    console.log(str_a == str_b);
    //output: true

    console.log(str_a == str_c);
    //output: false

    console.log(str_a != str_c);
    // output: true
    

In the example above, the first output is true as str_a and str_b are exactly the same, but the second output is false as str_a and str_c are not exactly the same. The third output is true as str_a and str_b are not the same.

Therefore, we can conclude that the comparison is case-sensitive as well.

How does the == and != operator works when both operands are not of the same type?

When the type of operands are not the same, the == and != operators will use abstract equality comparison algorithm to compare the two operands. This algorithm does loose checking and tries to modify the operands into the same type before performing doing any operation.

• When comparing a string and number data type, the string converts into a number before the comparison.
• When comparing boolean and integer (0 or 1), then it treats 0 as false and 1 as true.
• When comparing two objects, then the operator checks if both refer to the same object. If yes, then the == operator returns true, and != returns false. Otherwise == returns false, and != returns true.
• When comparing null and undefined, then == operator returns true, and != operator returns false.

Consider the example below when comparing a string and an integer.

9 == '9'    //true
9 == '99'    //false
9 != '99'    //true
9 != '9'    //true


In the example above, the first operand is of integer type and the second is of string type. The == operator does the type conversion of string into a number.

The first output is true as 9, and 9 (string) to number are now equal, thus output true for == operator, the second output is false as 9 and 99 are not equal.

The third output is true as 9 and 99 are not equal, but is true for != operator. Meanwhile the fourth output is false as 9 and 9 are equal and the operator used is !=.

When comparing null and undefined, consider the example below.

let x = null;
let y;

console.log(x == y);
//output: true

It outputs true when using == operator, the comparison of null and undefined is true.

When comparing objects, consider the example below.

let model1= {
    name: "Macbook"
}

let model2= {
    name: "Windows"
}

console.log(model1 == model1);
//output: true

console.log(model1 == model2);
//output: false

console.log(model1 != model1);
//output: false

console.log(model1!= model2);
//output: true


In the example above, the first output is true as model1 and model1 refer to the same instance whereas the second output is false as model1 and model2 refer to different instances.

This only works for the same object. Different objects having the same value are not equal. Thus == operator will return false when we compare two different objects with the same value.

What is === and !== in JavaScript?

The === operator is referred to as the strict equality operator, while !== is called the strictly inequality operator. The === operators follow Strictly equality comparison algorithm, i.e. they don’t do the type conversion of the operands before comparing their values and also return false even if the data type of the operands aren’t the same. The same syntax can be used for these as well, with the different operator.

a === b // for equality
a !=== b // for inequality

Here a and b are operands and the middle portion is for the operator. For equality comparison, we use === operator, while for inequality comparison, we use !== operator.

The return type for these is also Boolean.

The === operator compares the two operands and returns true, only if both operands are of the same data type and same value, otherwise, it returns false.

The !== operator compares operands and returns true if both operands are of different data types or are of the same data type but have different values. If both operands are of the same data type and have the same value, then it returns false. Consider the example below.

let x = 10;
let y = '10';
let z = 10;

console.log(x===y);
//output: false;

console.log(x===z);
//output: true;

Here the first output is false as a is a number type whereas b is a string type, the second output is true as both x and z have the same data type and value.

Therefore, the === and !== operators follow strict equality comparison algorithm to compare two operands.

Highlights of Strict equality comparison algorithm:

• When the operands that we compare are of different data type, then it returns false.
• When any one of the two operands that we compare is NaN, then it will return false.
• When the operands that we compare are null or undefined, then it will return true.
• When the operands that we compare are objects, then it returns true if both refer to the same object, else it returns false.

Consider the example below.

34 === '34'    //false
34 !== '34'    //true

The first operand is of integer data type, while the second operand is of string data type, so the === operator returns false and the !== operator will return true.

When one of the operands is NaN.

let a = NaN;
let b = 6;

a === b        //false
a !== b        //true

Since the first operand is in NaN form so the === operator will return false and the !== operator will return true.

If both operands are undefined or null.

null === null             //true
undefined === undefined   //true
null === undefined        //false

In this case, the first two comparisons return true as both operands are of same type and also have the same value. However the last output is false as one operand is null and the other is undefined, i.e.. of different types.

If both operands are object, consider the example below.

let model1 = {
    name: "Macbook"
}

let model2 = {
    name: "Windows"
}

console.log(model1 === model1 );
//output: true

console.log(model1 === model2 );
//output: false

console.log(model1 !== model1 );
//output: false

console.log(model1 !== model2 );
//output: true

In the example above, the first output is true because model1 and model1 refer to the same instance whereas the second output is false as model1 and model2 refer to different instances.

Similarities and Difference between == and === Operators