Difference between == and === in javascript

== and ===
Both of these are javascript operators and fall under the category of comparison operators since they are used for comparing two values.
== operator is also called equals operator while === is called strict equals operator in javascript.

== and === are used for comparing values of operands on their left and right sides but there is a slight difference between the result returned by these two operators and this article will explain the difference between these two with examples.

== operator matches converts the values of its operands to a compatible type and then matches their values. It returns true if the values match and false if they do not match.
Type conversion of operand values is performed as per below rules.

• While comparing a string and a number, it converts the string to number(using ToNumber function) and then compares their values.
• If one operand is boolean while other is a number, then it converts boolean operand to a number(again using ToNumber function) and then compares their values.
  Boolean true is considered as 1 while boolean false is considered as 0 in javascript.
• If one operand is an Object and other is a String or a Number primitive, then the Object operand is converted to a primitive with ToPrimitive function and then their values are compared.
• If one operand is undefined while other is null, then it returns true.

=== operator on the other hand does not perform any type conversion. It simply checks the type and values of both the operands.
If both the type and values of operands match, then the result is true.
If either the type or the value does not match, it returns false.

== vs === comparison examples
Examples of == and === based on above rules are given below.
String and number comparison
Below is the javascript example to compare a number in string format and a number in numeric format using == and ===.

// declare a numeric string
let x = '24';
// declare an integer
let y = 24;
// compare with equals
document.write(x == y);
// change paragraph
document.write('</p>');
// compare with strict equals
document.write(x === y);

Above code will print

Boolean and number comparison
Result of comparison of a boolean and a number with == and === is given below.

// declare a boolean
let x = true;
// declare an integer
let y = 1;
// compare with equals
document.write(x == y);
// change paragraph
document.write('<p/>');
// compare with strict equals
document.write(x === y);

This will print

In case of comparison with equals(==), boolean true is converted to number and then compared with 1. Since true in numeric format is 1 in javascript, the comparison evaluates to true.
With strict equals(===) operator, boolean is not converted to a number and hence the comparison results in false.

Object and string comparison
If a string object and a string primitive having same values are compared with == and === operator, then == converts the object to primitive value and then compares their values while === operator first compares their types.

If the types are not same, then it does not compare their values and returns false. Example,

// declare a string object
let x = new String('codippa');
// declare a string
let y = 'codippa';
// compare with equals
document.write(x == y);
// change paragraph
document.write('<p/>');
// compare with strict equals
document.write(x === y);

Above code will output

Note that == operator will return true only when the values of object and string literal are same.
Number object and primitive comparison
You may also compare a Number object and a corresponding primitive. As before, == operator will convert the object to a primitive and then compare their values.
=== operator will first check the types of both. Since their types would not match, it will return false. Example,

// declare a number object
let x = new Number('1');
// declare a number primitive
let y = 1;
// compare with equals
document.write(x == y);
// change paragraph
document.write('<p/>');
// compare with strict equals
document.write(x === y);

Output will be

Comparison of undefined and null
If one value is undefined while another is null, then == will return true while === will be false. Example,

// declare an undefined variable
let x = undefined
// declare a null variable
let y = null;
// compare with equals
document.write(x == y);
// change paragraph
document.write('<p/>');
// compare with strict equals
document.write(x === y);

Output will be

If one value is undefined while another is not null, then == will return false, since the values are different and === will still be false, since their types are different. Example,

// declare an undefined variable
let x = undefined;
// declare a string
let y = 'codippa';
// compare with equals
document.write(x == y);
// change paragraph
document.write('<p/>');
// compare with strict equals
document.write(x === y);

Above example will write

That is all on the difference between ==(equals) and ===(strict equals) operator in javascript.
Click the clap if the article helped you out, won’t take more than a second.