# callable vs. constructable

* [JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [create](/web/js/val/obj/create.md) ⟩ [new](/web/js/val/obj/create/new.md) ⟩ callable vs. constructable

{% hint style="success" %}

* if a [**function**](/web/js/val/func.md) can be invoked in the form <mark style="color:yellow;">`F()`</mark>, it's <mark style="color:purple;">**callable**</mark>.
* if a [**function**](/web/js/val/func.md) can be invoked in the form <mark style="color:yellow;">`new F()`</mark>, it's <mark style="color:purple;">**constructable**</mark>.
  {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**every function is**</mark>**&#x20;**<mark style="color:purple;">**callable**</mark>, for example, [**Map**](/web/js/val/builtin/map.md) is a <mark style="color:yellow;">**function**</mark>, but calling it with <mark style="color:blue;">`Map()`</mark> throws a [<mark style="color:red;">**TypeError**</mark>](/web/js/err/type.md):exclamation:
{% endhint %}

{% hint style="warning" %} <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**every function is**</mark>**&#x20;**<mark style="color:purple;">**constructable**</mark>, for example, [**Symbol**](/web/js/val/prim/symbol.md) is a <mark style="color:yellow;">**function**</mark>, but calling it with <mark style="color:blue;">`new Symbol()`</mark> throws a [<mark style="color:red;">**TypeError**</mark>](/web/js/err/type.md):exclamation:
{% endhint %}
{% endtab %}

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

* :point\_right: \[\[Call]], \[\[Construct]] [**internal methods**](/web/js/val/obj/prop/internal.md).
* [constructor](/web/js/val/func/constructor.md) is a <mark style="color:purple;">**constructable**</mark> function.
  {% endtab %}

{% tab title="💈範例" %}

* replit ⟩ [callable vs. constructable](https://replit.com/@pegasusroe/callable-vs-constructable#index.js)

```javascript
// Array is callable & constructable, same effect.
let arr1 = Array(3);
let arr2 = new Array(3);

let map = Map();            // Map is not callable.
//        ^^^
// ⛔ TypeError: Constructor `Map` requires 'new'

let sym = new Symbol();     // Symbol is not constructable.
//        ^^^
// ⛔ TypeError: `Symbol` is not a constructor

arr1,    // [ , , ] (3 empthy items)
arr2,    // [ , , ] (3 empthy items)

Map instanceof Function,    // true
Symbol instanceof Function, // true
```

{% endtab %}

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

* [ ] JS.info ⟩ [Constructor, operator "new"](https://javascript.info/constructor-new)
  {% endtab %}

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

* [new operator ⭐️ ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)
  {% endtab %}
  {% endtabs %}

<table><thead><tr><th width="237.66666666666669">function</th><th width="141">F()</th><th width="151">new F()</th><th>note</th></tr></thead><tbody><tr><td>Array, Error, Function</td><td>✅</td><td>✅</td><td>same effect</td></tr><tr><td>Boolean, String, Number</td><td>primitive</td><td>wrapper object</td><td></td></tr><tr><td>Date</td><td>string</td><td>object</td><td></td></tr><tr><td>Symbol, BigInt</td><td>✅</td><td>⛔️ <a href="/pages/tVNY83SMlAWHdsSMHCT5"><mark style="color:red;"><strong>TypeError</strong></mark></a></td><td></td></tr><tr><td>Proxy, Map</td><td>⛔️ <a href="/pages/tVNY83SMlAWHdsSMHCT5"><mark style="color:red;"><strong>TypeError</strong></mark></a></td><td>✅</td><td></td></tr><tr><td>class</td><td>⛔️ <a href="/pages/tVNY83SMlAWHdsSMHCT5"><mark style="color:red;"><strong>TypeError</strong></mark></a></td><td>✅</td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/val/obj/create/new/callable-vs.-constructable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.