Difference equals operator (== vs ===) in JavaScript and which to use when?

In javascript, 3 equal signs(===) means "equality without type coercion". Using the triple equals, the values must be equal in type as well, to better understand it, check this comparison below

0 == false   // true
0 === false  // false, because they are of a different type
1 == "1"     // true, automatic type conversion for value only
1 === "1"    // false, because they are of a different type
null == undefined // true
null === undefined // false again for same reason, type is not same
'0' == false // true because basically in logical operator fasle emans 0
'0' === false // false becasue type is different

From the above answer you can understand, The == operator will compare for equality by doing any necessary type conversions(if required) while on the other hand === operator , will not do the conversion, so if two values are not the same type === will simply return false.

So you can say === and !== are strict comparison operators in javascript, check this URL from Mozilla.Org

In terms of performance, === is not quicker if the types are the same.

If types are not the same, === will be quicker because it won't try to do the conversion.

Hope this helps.

JavaScript provides three different value-comparison operations:

• strict equality (or "triple equals" or "identity") using ===,
• loose equality ("double equals") using ==,
• and Object.is (new in ECMAScript 2015)

Let's take a look Each of them one by one

Strict equality using ===

Strict equality compares two values for equality. Neither value is implicitly converted to some other value before being compared. If the values have different types, the values are considered unequal. Otherwise, if the values have the same type and are not numbers, they're considered equal if they have the same value. Finally, if both values are numbers, they're considered equal if they're both not NaN and are the same value, or if one is +0 and one is -0.

Example:

var num = 0;
var obj = new String('0');
var str = '0';

console.log(num === num); // true
console.log(obj === obj); // true
console.log(str === str); // true

console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false
console.log(null === undefined); // false
console.log(obj === null); // false
console.log(obj === undefined); // false

Loose equality using ==

Loose equality compares two values for equality, after converting both values to a common type.  After conversions (one or both sides may undergo conversions), the final equality comparison is performed exactly as === performs it.  Loose equality is symmetric: A == B always has identical semantics to B == A for any values of A and B (except for the order of applied conversions).

Example javascript code:

var num = 0;
var obj = new String('0');
var str = '0';

console.log(num == num); // true
console.log(obj == obj); // true
console.log(str == str); // true

console.log(num == obj); // true
console.log(num == str); // true
console.log(obj == str); // true
console.log(null == undefined); // true

// both false, except in rare cases
console.log(obj == null);
console.log(obj == undefined);

Take a look at comparison table:

Source

When we use "==" interpreter does type coercion, meaning that the interpreter implicitly tries to convert the values before comparing.

While identity operator "===" does not do type coercion, and thus does not convert the values when comparing.

true == 1; //true, because 'true' is converted to 1 and then compared
"2" == 2;  //true, because "2" is converted to 2 and then compared


true === 1; //false, no type conversion is done and hence false
"2" === 2;  //false

That's it.