DEV Community

Cover image for JavaScript - == and ===
Lachelle Zhang
Lachelle Zhang

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  • If one operand is null and the other is undefined, return true.
console.log(undefined == null); //true
console.log(null == undefined); //true
Enter fullscreen mode Exit fullscreen mode
  • 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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode
  • If both operands are null or both operands are undefined, return true.
console.log(null === null); // true
console.log(undefined === undefined); // true
Enter fullscreen mode Exit fullscreen mode
  • If either operand is NaN, return false.
console.log(NaN === NaN); // false
Enter fullscreen mode Exit fullscreen mode
  • 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.

Top comments (0)