JavaScriptで[1,2]+[3,4]が「1,23,4」になる理由を解説

JavaScriptの+演算子は、数値同士の加算、または文字列同士の連結に使用されます。しかし、配列を結合して新しい配列を作りたい場合には、concat()メソッドを使う必要があります。

配列の結合にはconcat()メソッドを使う

例えば、次のように2つの配列を結合できます。

[50, 70].concat([90, 100])

上記のコードを実行すると、以下のような結果が出力されます。

[50, 70, 90, 100]

[1,2]+[3,4]が「1,23,4」になる仕組み

では、なぜ[1,2] + [3,4]が「1,23,4」という文字列になってしまうのでしょうか。その理由は、+演算子は配列に対しては加算や結合を行わず、両方の配列を自動的に文字列へ変換して連結するためです。

処理の流れを見てみましょう。

[1,2] + [3,4]
// 配列がそれぞれ文字列に変換される
'1,2' + '3,4'
// 結果
"1,23,4"

このように、配列はtoString()メソッドによって「1,2」や「3,4」のようなカンマ区切りの文字列に変換され、その後+演算子によって文字列として連結されます。そのため、意図しない結果になってしまうのです。

正しく配列を結合する方法

配列を結合したい場合は、前述のとおりconcat()メソッドを使用しましょう。

[1,2].concat([3,4])
// 結果
[1,2,3,4]

concat()メソッドは元の配列を変更せず、新しい配列を返すため、安全に配列を結合できます。また、ES2015以降ではスプレッド構文を使って[...[1,2], ...[3,4]]のように書くことも可能です。

まとめ： +演算子で配列を足すと文字列化されて連結されてしまうため、配列の結合には必ずconcat()メソッド（またはスプレッド構文）を使いましょう。