> 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/arithmetic/binary/+.md).

# add/concate (+)

number addition / string concatenation.

[JS](/web/js.md) ⟩ [operator](/web/js/grammar/op.md) ⟩ [arithmetic](/web/js/grammar/op/arithmetic.md) ⟩ add / concate (+)

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

```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&amp;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: [object -> primitive conversion](/web/js/val/obj/convert/obj-to-prim.md) is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**`+`**</mark> operation.
* :information\_source: [comparison operator](/web/js/grammar/op/relational/compare.md) <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**numbers**</mark>](/web/js/val/prim/num.md), <mark style="color:purple;">**`+`**</mark> <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**strings**</mark>](/web/js/val/prim/str.md).
* :information\_source: <mark style="color:purple;">**`+`**</mark> operation uses <mark style="color:yellow;">**punctuator**</mark> [plus (+)](/web/js/grammar/token/punctuator/+.md).
  {% endtab %}

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

* [x] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 4.8.1 The + Operator
  {% endtab %}

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

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