JavaScript - == and ===

1. ==

Equality(==) - MDN

The equality operator's camparison can be roughly summarized as follows:

• If the operands are both objects, return true only if both operands reference the same object.

let a = { food: "pork", fruit: "watermelon" };
let b = a;
console.log(a == b); //true
let c = { ...a }; //or other object-copy operations
console.log(a == c); //false

• If one operand is null and the other is undefined, return true.

console.log(undefined == null); //true
console.log(null == undefined); //true

• If the operands have the same type, they are compared as follows:

  • String: return true only if both operands have the same characters in the same order.

  console.log("abcd" == "abcd"); //true
  console.log("abcd" == "abcde"); //false
  

  • Number: return true only if both operands have the same value. +0 and -0 are treated as the same value. If either operand is NaN, return false.

  console.log(1 == 1); //true
  console.log(1 == 2); //false
  console.log(+0 == -0); //true
  console.log(NaN == NaN); //false
  

  • Boolean: return true only if operands are both true or both false.

• If the operands are of different types, try to convert them to the same type before comparing:

  • When comparing a number to a string, try to convert the string to a numeric value.

  console.log(1 == "1"); //true
  

  • If one of the operands is a boolean, convert the boolean operand to 1 if it is true and 0 if it is false.

  console.log(true == 1); //true
  console.log(false == 0); //true
  console.log(0 == !!null); // true. !null is true, !true is false, false is 0
  console.log(0 == !!undefined); // true. !undefined is true, !true is false, false is 0
  

  • If one of the operands is an object and the other is a number or a string, try to convert the object to a primitive using the object's valueOf() and toString() methods.
  • Object.prototype.valueOf(): Returns the primitive value of the specified object(objects of type string, number, bigint, boolean, symbol). If the object has no primitive value(objects of type object), it returns the object itself.

    // objects of type string, number, bigint, boolean, symbol
    let a = 1;
    console.log(a.valueOf()); // 1
    // objects of type object
    let b = { name: "Kitty" };
    console.log(b.valueOf()); // { name: 'Kitty' }
  

  • Object.prototype.toString(): Returns a string representing the object(objects of type string, number, bigint, boolean, symbol). If the object has no primitive value(objects of type object), it returns [object Type].

    // objects of type string, number, bigint, boolean, symbol
    let a = 1;
    console.log(a.toString()); // "1"
    // objects of type object
    let b = { name: "Kitty" };
    console.log(b.toString()); // [object Object]
  

  • Array.prototype.toString(): Array object overrides Object's method toString(). It returns a string representing the elements of the array.

    let arr = ["kitty"];
    console.log(arr.toString()); // 'kitty'
  

// object == string
let obj = { name: "kitty" };
console.log(obj == "kitty"); //false. obj.valueOf(): { name: "kitty" }, obj.toString(): [object Object]
// array == string
let arr = ["kitty"];
console.log(arr == "kitty"); //true. arr.valueOf(): ['kitty'], arr.toString(): 'kitty'

2. ===

Strict equality(===) - MDN

Unlike the equality operator, the strict equality operator always considers operands of different types to be different.

• If the operands are of different types, return false.

consol.log("3" === 3); //false
console.log(true === 1); //false
console.log(null === undefined); //false

• If both operands are objects, return true only if they refer to the same object.

let obj1 = { name: "kitty", age: 1 };
let obj2 = obj1;
console.log(obj1 === obj2);
let obj3 = { name: "kitty", age: 1 };
console.log(obj1 === obj3);
let obj4 = { ...obj1 };
console.log(obj1 === obj4);

• If both operands are null or both operands are undefined, return true.

console.log(null === null); // true
console.log(undefined === undefined); // true

• If either operand is NaN, return false.

console.log(NaN === NaN); // false

• Otherwise, compare the two operand's values:

  • Numbers must have the same numeric values. +0 and -0 are considered to be the same value.

  console.log(+0 === -0); //true
  console.log(1 === 1); //true
  console.log(0 === 1); //false
  

  • Strings must have the same characters in the same order.

  console.log("kitty" === "kitty"); //true
  console.log("kitty" === "kity"); //false
  

  • Booleans must be both true or both false.

The most notable difference between == and === is that if the operands are of different types, the == operator attempts to convert them to the same type before comparing.