---
description: number addition / string concatenation.
---

# add/concate (+)

[JS](../../../..) ⟩ [operator](../..) ⟩ [arithmetic](..) ⟩ add / concate (+)

{% hint style="success" %}
string concatenation or number addition. :point\_right: [table-of-operators](../../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](../../../../val/obj/convert/obj-to-prim "mention") is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**`+`**</mark> operation.
* :information\_source: [compare](../../relational/compare "mention") <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**numbers**</mark>](../../../../val/prim/num), <mark style="color:purple;">**`+`**</mark> <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**strings**</mark>](../../../../val/prim/str).
* :information\_source: <mark style="color:purple;">**`+`**</mark> operation uses <mark style="color:yellow;">**punctuator**</mark> [+](../../../token/punctuator/+ "mention").
{% endtab %}

{% tab title="📗 參考" %}
* [x] [javascript-the-definitive-guide](../../../../../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 %}
