[Javascript]const の配列変数に複数項目追加するには push.apply を使おう

 今回遭遇した件です。以下に結論含めソースを書いておきます。

// const で配列定義
const arr = [];
// オブジェクトに対しての操作は問題無し
arr.push(1);
arr.push(2);
arr.push(3);
// 戻り値は追加されるが arr は変化無し
arr.concat([4, 5, 6]);
// 代入するのでエラーになる
arr = arr.concat([4, 5, 6]);
// concat のようなふるまいをする
Array.push.apply(arr, [4, 5, 6]);

const は変数定義したら、定義を変更できない特徴があります。できることが制限されるので不便に思えるかもしれませんが、不意のコード再利用やコード変更など、ソースメンテナンスでメリットがあります。
const arr の後は arr そのものへの代入ができなくなりますが、配列の中身を変更できなくなるわけではありません。
Javascript の変数は配列の場合、オブジェクトとして arr に代入されます。仕切り版のついた箱にマジックで名前を書くイメージでしょうか。中身の仕切りについては自由に変更できます。

配列を連結する Array.concat ですが、新しく配列を生成する関数なので、引数などに指定した変数関係には影響されません。この場合 const arr2 = などのように新しい配列変数を定義すれば使えますが、arr のメモリ領域が無駄になります。

代替策の Array.push.apply について、まず Array.push は配列に仕切りと値を追加する関数です。これは引数を直接指定することで、複数追加させることはできますが、配列を指定すると、配列そのものが追加されてしまいます。
ただし、関数には配列の中身を引数として指定する方法があります。Function.apply です。Array.push に対して apply を行うと、第二引数の配列をそのまま関数の引数として指定できるので便利です。このときの第一引数は追加対象の配列を指定します。