> 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/statement/expr/lhs.md).

# left-hand side expression

🚧 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) ⟩ [left-hand side](/web/js/grammar/statement/expr/lhs.md) ⟩ 

{% hint style="success" %}
([operator](/web/js/grammar/op.md)) ❓🚧
{% endhint %}

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

* <mark style="color:purple;">**left-hand side**</mark>**&#x20;**<mark style="color:yellow;">**expressions**</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) )
  * [new.target](/web/js/val/obj/create/new/new.target.md) (in constructors) refers to the constructor itself.
  * [new](/web/js/val/obj/create/new.md) (object creation expression)
  * [`import.meta`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta)

    &#x20;an object exposing context-specific metadata to a JavaScript module.
  * [`super`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) \
    calls the parent constructor.
  * [`...obj`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

    spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %} <mark style="color:yellow;">**two types of expressions**</mark>

* those that have <mark style="color:orange;">**side effects**</mark> (such as assigning values)&#x20;
* those that <mark style="color:yellow;">**purely evaluate**</mark>.
  {% endhint %}

{% hint style="info" %}
you can use an [expression](/web/js/grammar/statement/expr.md) to refer to an object's [property](/web/js/val/obj/prop.md)<mark style="color:yellow;">.</mark>&#x20;

👉 [bracket notation \[\]](/web/js/val/obj/prop/access/bracket-notation.md)
{% endhint %}
{% endtab %}

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

* [ ] (2020) JavaScript The Definitive Guide, 1.3 A Tour of JavaScript
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#x20;
  * [ ] 1.3 A Tour of JavaScript
  * [ ] Ch. 4：Expressions & Operators
* [ ] [Expressions versus statements in JavaScript](https://2ality.com/2012/09/expressions-vs-statements.html) ⭐️
* [ ] [Javascript 的表達式 (Expressions) 和陳述式 (Statements)：一個用說的，一個用做的](https://medium.com/itsems-frontend/javascript-expressions-and-statements-7bd374effc95)
  {% endtab %}

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

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

{% tab title="❓問題" %}
{% hint style="warning" %} <mark style="color:red;">**問：**</mark>「為何 super, new, new\.target, ... 這些稱為 left-hand side expression」❓

<mark style="color:green;">答：</mark>「...」
{% endhint %}
{% endtab %}
{% endtabs %}