Difference between == and === in javascript

== and === fall under the category of javascript comparison operators since they are used for comparing two values.
== operator is also called equals operator while === is called Strict equals operator in javascript. Both 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.
== 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 do 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

true
false

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

true
false

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

false
true

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

true
false


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

true
false

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

false
false

That is all on the difference between ==(equals) and ===(strict equals) operator in javascript. Click the clap if the article helped you out.

0

Share your thoughts !!

Close Menu

Never Miss an article !

Get the new post delivered straight into your inbox, enter your email and hit the button

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

codippa will use the information you provide on this form to be in touch with you and to provide updates and marketing.