> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/grammar/op.md).

# operator

🚧 under construction

[JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [expression](/web/js/grammar/statement/expr.md) ⟩ [operator](/web/js/grammar/op.md) ⟩

{% hint style="success" %}
([expression](/web/js/grammar/statement/expr.md)) 

[<mark style="color:blue;">**arithmetic**</mark>](/web/js/grammar/op/arithmetic.md) / [<mark style="color:blue;">**comparison**</mark>](/web/js/grammar/op/relational/compare.md) / [<mark style="color:blue;">**logical**</mark>](/web/js/grammar/op/logical.md) / [<mark style="color:blue;">**assignment**</mark>](/web/js/grammar/op/assign.md) 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**](/web/js/grammar/op/unary.md) / [**binary**](/web/js/grammar/op/binary.md) / [**ternary**](/web/js/grammar/op/ternary.md) <mark style="color:purple;">**operators**</mark>.

:star2:[table of operators](/web/js/grammar/op/table-of-operators.md)
{% endhint %}

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

{% hint style="warning" %}
&#x20;[operator](/web/js/grammar/op.md)(s) that expect [<mark style="color:yellow;">**boolean**</mark>](/web/js/val/prim/boolean.md) 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](/web/js/val/type/falsy.md))
{% endhint %}

{% hint style="info" %}
[**property access**](/web/js/val/obj/prop/access/property-access-expression.md) and [**invocation**](/web/js/grammar/statement/expr/invoke.md) 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](/web/js/grammar/token/punctuator.md)(s).&#x20;
* <mark style="color:purple;">**some**</mark> are represented by [keyword](/web/js/grammar/token/keyword.md)(s) such as [delete](/web/js/val/obj/prop/create/delete.md) and <mark style="color:yellow;">**instanceof**</mark>.&#x20;
  {% endhint %}
  {% endtab %}

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

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

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

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

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

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#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 %}