JavaScriptで指定した行数・列数の2次元配列を初期値つきで生成する方法

JavaScriptでは、「指定した行数・列数を持ち、各要素が特定の初期値で埋められた2次元配列」を作成したい場面がよくあります。本記事では、そのような配列を柔軟に生成できる関数の実装方法を解説します。

関数の仕様

作成する関数は、以下の3つの引数を受け取ります。

height → 配列の行数
width  → 配列の列数
val    → 各要素の初期値

そして、これらの条件に基づいて生成された新しい2次元配列を返します。

実装例

const rows = 4, cols = 5, val = 'Example';

const fillArray = (width, height, value) => {
  const arr = Array.apply(null, { length: height }).map(() => {
    return Array.apply(null, { length: width }).map(() => {
      return value;
    });
  });
  return arr;
};

console.log(fillArray(cols, rows, val));

実行結果

コンソールには次のように出力されます。

[
  [ 'Example', 'Example', 'Example', 'Example', 'Example' ],
  [ 'Example', 'Example', 'Example', 'Example', 'Example' ],
  [ 'Example', 'Example', 'Example', 'Example', 'Example' ],
  [ 'Example', 'Example', 'Example', 'Example', 'Example' ]
]

コードのポイント

このコードの鍵となるのは Array.apply(null, { length: n }) という記述です。new Array(n) で作成した配列は中身が空（ホール）のため、そのままでは map メソッドが機能しません。そこで、Array.apply(null, { length: n }) の形式で「未定義の要素を持つ配列」に変換してから map を適用しています。

構造としては、外側の map で行を生成し、内側の map で各行に列を生成する入れ子構造になっています。これにより、height × width の2次元配列が完成します。

より現代的な書き方：Array.from と fill() を使う

ES2015以降の環境では、Array.from と Array.prototype.fill() を組み合わせることで、はるかに簡潔に同じ処理を実現できます。

const fillArray = (width, height, value) =>
  Array.from({ length: height }, () => Array(width).fill(value));

console.log(fillArray(5, 4, 'Example'));

Array.from({ length: height }, ...) の第2引数に関数を渡すことで各要素を変換でき、内側では fill(value) がすべての列を初期値で満たします。可読性が高くバグも起こりにくいため、現在の開発ではこちらの書き方が推奨されます。