---
description: <, >, <=, >= operators
---

# comparison operator

[JS](../../..) ⟩ [statement](../../statement) ⟩ [expression](../../statement/expr) ⟩ [operator](..) ⟩ [relational]() ⟩ comparison

{% tabs %}
{% tab title="🗺️ 圖表" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FfbLcx6egC9OJ4axNfqlZ%2Fcomparison.operators.svg?alt=media&#x26;token=3758ab8e-7147-4e5b-ba4a-4b9addeacf4f" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
<mark style="color:yellow;">**trichotomy law**</mark>： <mark style="color:blue;">`a < b, a = b, a > b`</mark> <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**apply**</mark> to [<mark style="color:blue;">**NaN**</mark>](../../../val/prim/num/special/nan)❗

```javascript
3 <  NaN,      // false❗
3 == NaN,      // false❗
3 >  NaN,      // false❗
```
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
<mark style="color:purple;">**comparison operators**</mark>

* <mark style="color:yellow;">**operands**</mark> may be <mark style="color:yellow;">**of**</mark>**&#x20;**<mark style="color:red;">**any**</mark> [<mark style="color:yellow;">**type**</mark>](../../../val/type).
* <mark style="color:yellow;">**operands**</mark> that are <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**numbers**</mark>**/**<mark style="color:yellow;">**strings**</mark> are [<mark style="color:blue;">**converted**</mark>](../../../val/type/convert) to <mark style="color:yellow;">**numbers**</mark>**/**<mark style="color:yellow;">**strings**</mark>.
* <mark style="color:red;">**if**</mark> <mark style="color:yellow;">**either operand**</mark> is (or converts to) [nan](../../../val/prim/num/special/nan "mention"), the <mark style="color:purple;">**result**</mark>**&#x20;**<mark style="color:yellow;">**is**</mark> <mark style="color:red;">**false**</mark>. :star:
{% endhint %}

{% hint style="info" %}
<mark style="color:purple;">**comparison operators**</mark> <mark style="color:red;">**do**</mark>**&#x20;**<mark style="color:yellow;">**allow**</mark> to <mark style="color:yellow;">**mix**</mark> [bigint](../../../val/prim/bigint "mention") and [num](../../../val/prim/num "mention"):exclamation:
{% endhint %}

{% hint style="warning" %}
<mark style="color:purple;">**`<=`**</mark> and <mark style="color:purple;">**`>=`**</mark> <mark style="color:red;">**do not**</mark>**&#x20;**<mark style="color:yellow;">**rely on**</mark> <mark style="color:blue;">**`==`**</mark> or <mark style="color:blue;">**`===`**</mark>:exclamation:

* <mark style="color:purple;">**`<=`**</mark> is defined to be "<mark style="color:red;">**not**</mark> <mark style="color:purple;">**`>`**</mark>".
* <mark style="color:purple;">**`>=`**</mark> is defined to be "<mark style="color:red;">**not**</mark> <mark style="color:purple;">**`<`**</mark>".

<mark style="color:yellow;">**with one**</mark>**&#x20;**<mark style="color:red;">**exception**</mark>, if either <mark style="color:yellow;">**operand**</mark> is <mark style="color:blue;">**NaN**</mark>, the result is <mark style="color:yellow;">**always**</mark>**&#x20;**<mark style="color:red;">**false**</mark>:exclamation:
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* :information\_source: [convert](../../../val/type/convert "mention") is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**comparison**</mark>.
* :information\_source: [obj-to-prim](../../../val/obj/convert/obj-to-prim "mention") is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**comparison**</mark>.
* :information\_source: <mark style="color:purple;">**comparison**</mark> <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**numbers**</mark>](../../../val/prim/num), [+](../arithmetic/binary/+ "mention") <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**strings**</mark>](../../../val/prim/str).
{% endtab %}

{% tab title="💈範例" %}
replit： [comparison](https://replit.com/@pegasusroe/comparison#index.js)

```javascript
 11  <  3,     // false    (numeric comparison)
'11' < '3',    // true     (string comparison)

// ⭐ "prefer-number" conversion
'11' <  3,     // false    ('11'  -> 11)

// ⭐ `NaN` always leads to `false`
'one' <  3,    // false    ('one' -> NaN)
'one' == 3,    // false    ('one' -> NaN)
'one' >  3,    // false    ('one' -> NaN)

// ⭐ trichotomy law： `a < b, a = b, a > b` doesn't apply to NaN❗
3 <  NaN,      // false
3 == NaN,      // false
3 >  NaN,      // false
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [javascript-the-definitive-guide](../../../../master/ref/javascript-the-definitive-guide "mention") ⟩ 4.9.2 Comparison Operators
{% endtab %}

{% tab title="📘 手冊" %}
* [Less than (<)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than)
* [Greater than (>)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than)
* [Less than or equal (<=)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal)
* [Greater than or equal (>=)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal)
* [String.prototype.localeCompare()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)  ⭐️ simply calls Intl.Collator
* [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)  ⭐️ language-sensitive string comparison.
{% endtab %}
{% endtabs %}
