Saturday, 1 August 2015

InDetail : The Difference Between === and == in JavaScript

Before going to understand the difference, first you need to know, on higher level, we can classify the variables into 2 types in JavaScript.

They are

1. Value type variables - just like primitives in Java
2. Object type variables - like arrays, JSon objects, just like reference variables in Java.

First Let's see how ===, == operators works in JavaScript?

With Value types (numbers) :

for examples if you have two variables a,b.

=== operator:

The === operator first checks for type and then checks for value. If type if not same it returns false without comparing values. If type is same then it compares values.

a === b returns true if a and b have same types as well as same value.

for example:
case 1:

var a = 5, b = 5;

a === b; // true -- types are same as well as values are also same.

case 2:

var a = 5, b = '5';

a === b; //false

In case 2, the types of variables a , b are different, a is of type number, where as b is of type string. So === operator first checked the type of variables and returned false.

== operator:

 The == operator compare for equality of two variables only after doing type conversions if necessary.

for example:
case 1:

var a = 5, b = 5;

a ==b; // true

case 2:

var a = 5, b = '5';

a == b; // true

In case 2, the types of variables are not same, so == operator converted variable b to number and compared with a. So the result is true.

Some more cases with both === and == :
Expression with == Result
'' == '0' false
0 == '' true
0 == '0' true
false == 'false' false
false == '0' true
false == undefined false
false == null false
null == undefined true
'\t\r\n' == 0 true

Expression with === Result
'' === '0' false
0 === '' false
0 === '0' false
false === 'false' false
false === '0' false
false === undefined false
false === null false
null === undefined false
'\t\r\n' === 0 false
With reference/ Object types :

With reference/object types, the == & === operators check whether the operands are referencing to the same object. If they are pointing to the same object, both operators return true, else return false.

For example:
var a = [1,2,3];

var b = [1,2,3];

var c = a;

a === b ; // false (even though a and b are of same type)

a == b;    // false ( a and b are different objects). 

c === a;  // returns true;

c == a;    // returns true; 

One more example: 

var a = { x:1, y:2 };

var b = { x:1, y:2 };

var c = a;

a === b; // false (even though a and b are of same type)

a === c; // true

a == c;   // true 

With Strings:
Strings are not value types, but in JavaScript they behave like value types, so they will be equal when the characters in the string are the same and when they are of the same length.

For example:
var a = "12" + "3";

var b = "123";

a === b; // true, here strings behave like value types.

a == b;   // true 

A different example: 

var a = new String("123");

var b = "123";

a === b; // false,(even though they are equal and of same type)

a == b;   // true  

For this case, even though a and b looks like of type Strings, actually they are different types. Here variable 'a' is of type Object, while variable 'b' is of type string.

So, the operator == applies type conversion and performs equality, that's why a == b resulted true where are a === b resulted false.

One more case:
var a = "123";

var b = String("123");

a === b; // true

a == b; // true 

Here, if you see, the types of both variables, a and b are of string type (not Object type). so it returns true.

Remember creating a String object using new and String constructor creates something of type Object that behaves as a string value type most of the time.

A real string (string literal), can be made with string literals or calling String as a function without new operator.

for example, String("123"); is Real string not an object.

Pictorial representation of how == and === works:

image reference :JS Comparison Table

a == b:

a === b:


in case of reference/Object type:

You can think of === operator in JavaScript with equals() method of Object class in Java. In Java, objects which don't have implementation for equals() method, they gets implementation from Object class. So calling a.equals(b) always compares references not contents.

Same happens in JavaScript for Object types.

in case of value types:

use === only, unless you fully understand the conversions that take place for == operator.


Post a Comment

Note: only a member of this blog may post a comment.