Difference in == and === comparison operators in JavaScript Difference in == and === comparison operators in JavaScript

Ashish Lahoti
Javascript

This is frequently asked question in JavaScript interview. We can compare primitive types, array and object using two comparison operators == and === available in JavaScript. This post describes the difference between these two with many examples.

“==” operator

  • == is also known as abstract comparison operator which compares only content of operand and not type.
  • == attempts to convert the operands to compatible type before comparison.
  • String and number with same content are equal. == converts the string to number before comparison.
  • 0, false and empty string "" are comparable and equal.
  • null and undefined are comparable and equal.
  • Two arrays with exactly same elements are not equal because both refers to different object in memory.
  • Similarly two objects with exactly same properties are not equals because both refers to different object in memory.

“===” operator

  • === is also known as strict comparison operator which compares both content and its type.
  • === does not attempt to convert the operand to compatible types before comparison and compare directly. It has better performance compare to ==
  • Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
  • Two numbers are strictly equal when they are numerically equal (have the same number value).
  • NaN is not equal to anything, including NaN. Confusing in JavaScript.
  • Positive zero (+0) and negative zero (-0) are strictly equal. Confusing in JavaScript since content is different.
  • Two boolean values are strictly equal only if both either true or false.
  • Two objects are strictly equal only if they refer to the same Object.
  • null only strictly equals to null
  • undefined only strictly equals to undefined

Compare “==” and “===”

console.log("cnc" == "cnc");     // true, same content and type
console.log("cnc" === "cnc");    // true, same content and type

console.log(12345 == 12345);     // true, same content and type
console.log(12345 === 12345);     // true, same content and type

console.log(false == false);     // true, same content and type
console.log(false === false);    // true, same content and type
 
console.log(12345 == "12345");   // true, comparable and equal
console.log(12345 === "12345");  // false, different type

console.log(0 == false);         // true, comparable and equal
console.log(0 === false);        // false, different type

console.log("" == false);        // true, comparable and equal
console.log("" === false);       // false, different type

console.log(null == undefined);  // true, comparable and equal
console.log(null === undefined); // false, different type

console.log([] == []);           // false, both refers to different object in memory
console.log([] === []);          // false, both refers to different object in memory

console.log([1, 2] == [1, 2]);   // false, both refers to different object in memory
console.log([1, 2] === [1, 2]);  // false, both refers to different object in memory

console.log({} == {});           // false, both refers to different object in memory
console.log({} === {});          // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(array1 == array2);   // true, both refers to same array
console.log(array1 === array2);  // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(obj1 == obj2);       // true, both refers to same object
console.log(obj1 === obj2);      // true, both refers to same object

console.log(+0 == -0);           // true, confusing, content is different
console.log(+0 === -0);          // true, confusing, content is different

console.log(NaN == NaN);         // false, confusing, content and type is same
console.log(NaN === NaN);        // false, confusing, content and type is same

The last two comparisons are very confusing in Javascript, Remember always

  • NaN is not equal to NaN
  • +0 is equal to -0

Also remember, === is recommended to use for comparison where ever possible as it is faster then == in terms of performance.

Object.is()

ES6 has introduced a new method Object.is() to compare two values, let’s check it out

console.log(Object.is("cnc", "cnc"));     // true, same content and type
console.log(Object.is(12345, 12345));     // true, same content and type
console.log(Object.is(false, false));     // true, same content and type

console.log(Object.is(12345, "12345"));   // false, different type
console.log(Object.is(0, false));         // false, different type
console.log(Object.is("", false));        // false, different type
console.log(Object.is(null, undefined));  // false, different type

console.log(Object.is([], []));           // false, both refers to different object in memory
console.log(Object.is([1, 2], [1, 2]));   // false, both refers to different object in memory
console.log(Object.is({}, {}));           // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(Object.is(array1, array2));   // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(Object.is(obj1, obj2));       // true, both refers to same object

console.log(Object.is(+0, -0));           // false, es6 is good, different content
console.log(Object.is(NaN, NaN));         // true, es6 is good, same content and type

You see that Object.is() makes the NaN and +0/-0 comparison less confusing.

Summary

Where == compares only content, === compares both content and type of operands. Strict comparison operator === does not attempt to convert the operands to compatible types and provide better performance as compare to abstract comparison operator ==.

Last, Object.is() introduced in ES6 works very much similar to strict operator === and also avoid confusion of NaN comparisons and +0/-0 comparisons. It is recommended to use Object.is().