# operator

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [statement](https://lochiwei.gitbook.io/web/js/grammar/statement) ⟩ [expression](https://lochiwei.gitbook.io/web/js/grammar/statement/expr) ⟩ [operator](https://lochiwei.gitbook.io/web/js/grammar/op) ⟩

{% hint style="success" %}
([expr](https://lochiwei.gitbook.io/web/js/grammar/statement/expr "mention")) 

[<mark style="color:blue;">**arithmetic**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic) / [<mark style="color:blue;">**comparison**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/relational/compare) / [<mark style="color:blue;">**logical**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/logical) / [<mark style="color:blue;">**assignment**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/assign) expressions, categorized as：

* <mark style="color:yellow;">**prefix**</mark> / <mark style="color:yellow;">**infix**</mark> / <mark style="color:yellow;">**postfix**</mark> <mark style="color:purple;">**operators**</mark>.
* [**unary**](https://lochiwei.gitbook.io/web/js/grammar/op/unary) / [**binary**](https://lochiwei.gitbook.io/web/js/grammar/op/binary) / [**ternary**](https://lochiwei.gitbook.io/web/js/grammar/op/ternary) <mark style="color:purple;">**operators**</mark>.

:star2:[table-of-operators](https://lochiwei.gitbook.io/web/js/grammar/op/table-of-operators "mention")
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
JS <mark style="color:purple;">**operators**</mark> usually <mark style="color:red;">**convert**</mark> the [type](https://lochiwei.gitbook.io/web/js/val/type "mention") of their <mark style="color:yellow;">**operands**</mark> as needed.
{% endhint %}

{% hint style="warning" %}
&#x20;[op](https://lochiwei.gitbook.io/web/js/grammar/op "mention")(s) that expect [<mark style="color:yellow;">**boolean**</mark>](https://lochiwei.gitbook.io/web/js/val/prim/boolean) operands will work with an <mark style="color:yellow;">**operand**</mark> of <mark style="color:red;">**any**</mark>**&#x20;**<mark style="color:yellow;">**type**</mark>:exclamation:(every value is [truthy or falsy](https://lochiwei.gitbook.io/web/js/val/type/falsy))
{% endhint %}

{% hint style="info" %}
[**property access**](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/property-access-expression) and [**invocation**](https://lochiwei.gitbook.io/web/js/grammar/statement/expr/invoke) expressions have <mark style="color:red;">**higher**</mark>**&#x20;**<mark style="color:yellow;">**precedence**</mark> <mark style="color:yellow;">**than**</mark> <mark style="color:red;">**any**</mark> of the <mark style="color:purple;">**operators**</mark>.
{% endhint %}

{% hint style="info" %}

* most <mark style="color:purple;">**operators**</mark> are represented by [punctuator](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator "mention")(s).&#x20;
* <mark style="color:purple;">**some**</mark> are represented by [keyword](https://lochiwei.gitbook.io/web/js/grammar/token/keyword "mention")(s) such as [delete](https://lochiwei.gitbook.io/web/js/val/obj/prop/create/delete "mention") and <mark style="color:yellow;">**instanceof**</mark>.&#x20;
  {% endhint %}
  {% endtab %}

{% tab title="🔴 主題" %}

* :star2:[table-of-operators](https://lochiwei.gitbook.io/web/js/grammar/op/table-of-operators "mention")
* <mark style="color:yellow;">**types of operators**</mark>
  * [assign](https://lochiwei.gitbook.io/web/js/grammar/op/assign "mention") ([<mark style="color:blue;">**`=`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/assign/assignment), +=, -=, \*=, /=, ...)
  * [arithmetic](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic "mention")&#x20;
    * [unary](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/unary "mention") ([<mark style="color:blue;">**`+, -, ++, --`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/unary))
    * [binary](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/binary "mention") (<mark style="color:blue;">**`+`**</mark>, <mark style="color:blue;">**`-`**</mark>, <mark style="color:blue;">**`*`**</mark>, [<mark style="color:blue;">**`/`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/binary/division), <mark style="color:blue;">**`%`**</mark>, [<mark style="color:blue;">**`**`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/binary/exp))
    * [bitwise](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/bitwise "mention") ([<mark style="color:blue;">**`&, |, ^, ~, >>, <<, >>>`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/bitwise))
  * [relational](https://lochiwei.gitbook.io/web/js/grammar/op/relational "mention")&#x20;
    * ([<mark style="color:blue;">**`==`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/relational/equal/sloppy-equality), [<mark style="color:blue;">**`===`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/relational/equal/strict-equality)), &#x20;
    * ([<mark style="color:blue;">**`<, >, <=, >=`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/relational/compare))
  * [logical](https://lochiwei.gitbook.io/web/js/grammar/op/logical "mention") (<mark style="color:blue;">**`&&`**</mark>, <mark style="color:blue;">**`||`**</mark>, <mark style="color:blue;">**`!`**</mark>)
  * <mark style="color:yellow;">**categorized by associativity**</mark>
    * <mark style="color:yellow;">**L (left-hand side)**</mark>
      * [property-access-expression](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/property-access-expression "mention") ( [<mark style="color:blue;">**`.`**</mark>](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/dot-notation-.), [<mark style="color:blue;">**`[]`**</mark>](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/bracket-notation), [<mark style="color:blue;">**`?.`**</mark>](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/optional-chaining), [<mark style="color:blue;">**`?.[]`**</mark>](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/optional-chaining), [<mark style="color:blue;">**`?.()`**</mark>](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/optional-invocation-.) )
  * <mark style="color:yellow;">**categorized by arity**</mark>
    * [unary](https://lochiwei.gitbook.io/web/js/grammar/op/unary "mention")：
      * [typeof](https://lochiwei.gitbook.io/web/js/val/type/name/typeof "mention") <mark style="color:yellow;">**/**</mark> [delete](https://lochiwei.gitbook.io/web/js/val/obj/prop/create/delete "mention") <mark style="color:yellow;">**/**</mark> [void](https://lochiwei.gitbook.io/web/js/grammar/op/unary/void "mention")
    * &#x20;[binary](https://lochiwei.gitbook.io/web/js/grammar/op/binary "mention")：
      * [nullish-coalescing](https://lochiwei.gitbook.io/web/js/grammar/op/logical/nullish-coalescing "mention")
      * [double-tilde](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/bitwise/not/double-tilde "mention")
      * [comma-operator](https://lochiwei.gitbook.io/web/js/grammar/op/binary/comma-operator "mention")
    * [ternary](https://lochiwei.gitbook.io/web/js/grammar/op/ternary "mention")： [conditional-operator](https://lochiwei.gitbook.io/web/js/grammar/op/ternary/conditional-operator "mention")
* [yield\*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*) operator - application： [seq](https://lochiwei.gitbook.io/web/js/iteration/generator/examples/seq "mention")
  {% endtab %}

{% tab title="👥 相關" %}

* :heavy\_plus\_sign: [<mark style="color:orange;">**arithmetic**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic) <mark style="color:purple;">**operators**</mark> (<mark style="color:blue;">**`+`**</mark>, <mark style="color:blue;">**`-`**</mark>, <mark style="color:blue;">**`*`**</mark>, [<mark style="color:blue;">**`/`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/binary/division), <mark style="color:blue;">**`%`**</mark>, [<mark style="color:blue;">**`**`**</mark>](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic/binary/exp)) <mark style="color:yellow;">**operate on**</mark> [<mark style="color:blue;">**numbers**</mark>](https://lochiwei.gitbook.io/web/js/val/prim/num).
* [TS Operators](https://lochiwei.gitbook.io/web/appendix/typescript/operators)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩&#x20;
  * [ ] 3.9
  * [ ] 4.7 Operator Overview
    {% endtab %}

{% tab title="📘 手冊" %}

* [ ] [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [ ] [Operator precedence](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
  {% endtab %}
  {% endtabs %}