JavaScript - == and ===
Tags: bfe, javascript, programming
Published: 2022-05-05 16:22:06

## 1. `==`

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality">Equality(==) - MDN</a>

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.

```js
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`.

```js
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.

    ```js
    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`.

    ```js
    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.
    ```js
    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`.
    ```js
    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.

      ```js
      // 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]`.

      ```js
      // 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.

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

```js
// 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. `===`

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality(===) - MDN</a>

Unlike the equality operator, <b>the strict equality operator always considers operands of different types to be different.</b>

- If the operands are of different types, return `false`.

```js
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.

```js
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`.

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

- If either operand is `NaN`, return `false`.

```js
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.

    ```js
    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.

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

  * Booleans must be both `true` or both `false`.

###

<b>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.</b>