# add/concate (+)

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [operator](https://lochiwei.gitbook.io/web/js/grammar/op) ⟩ [arithmetic](https://lochiwei.gitbook.io/web/js/grammar/op/arithmetic) ⟩ add / concate (+)

{% hint style="success" %}
string concatenation or number addition. :point\_right: [table-of-operators](https://lochiwei.gitbook.io/web/js/grammar/op/table-of-operators "mention")

```javascript
1 + 2            // number addition 
'the' + 'fox'    // string concatenation
```

{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %} <img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2F5giUhbbzjChDX5pwzHW5%2F%2B.operator.svg?alt=media&#x26;token=b46bd683-efcf-460d-9944-360250ee830a" alt="" class="gitbook-drawing">
{% endtab %}

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

* replit：[the + operator](https://replit.com/@pegasusroe/the-operator#index.js)

```javascript
//                   result             conversion
// -------------------------------------------------------------
1 + 2,            // 3
'1' + 2,          // '12'               (2 -> '2')
'1' + '2',        // '12'

1 + {},           // '1[object Object]' ({} -> object to primitive)
true + true,      // 2                  (true -> 1)
2 + null,         // 2                  (null -> 0)
3 + undefined,    // NaN                (undefined -> NaN)

// ❗ `+` mixed with strings and numbers is not associative
// -------------------------------------------------------------
(1 + 2) + ' cats',    // '3 cats'       (addition -> concatenation)
1 + (2 + ' cats'),    // '12 cats'      (2 concatenations)
```

{% endtab %}

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

* :information\_source: [obj-to-prim](https://lochiwei.gitbook.io/web/js/val/obj/convert/obj-to-prim "mention") is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**`+`**</mark> operation.
* :information\_source: [compare](https://lochiwei.gitbook.io/web/js/grammar/op/relational/compare "mention") <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**numbers**</mark>](https://lochiwei.gitbook.io/web/js/val/prim/num), <mark style="color:purple;">**`+`**</mark> <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**strings**</mark>](https://lochiwei.gitbook.io/web/js/val/prim/str).
* :information\_source: <mark style="color:purple;">**`+`**</mark> operation uses <mark style="color:yellow;">**punctuator**</mark> [+](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator/+ "mention").
  {% endtab %}

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

* [x] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ 4.8.1 The + Operator
  {% endtab %}

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

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