Array(3).mapが一度も動かない？空きのある配列とArray.fromの生成を比べよう

3件分のカードを作るつもりでArray(3).mapを書いたのに、処理が一度も動かない。配列のlengthが3でも、値を持つ要素が3個あるとは限らないよ。

このページは、配列とmapを使ったことがある人向け。生成の段階でできる「空き」と、値として入っているundefinedを分けて確認する。作例は固定の3件だけを使い、DOMへ大量の要素を作ったり外部へ送信したりしないよ。

Array(3)は、数値3を入れる書き方ではない

const empty = Array(3);
console.log(empty.length); // 3
console.log(Object.keys(empty)); // []
console.log(0 in empty); // false

数値を一つだけ渡したArrayコンストラクターは、その数を長さとして扱う。この例には0・1・2という添字の要素がなく、空きのある配列になるんだ。要素が飛び飛びの配列は、疎配列と呼ばれるよ。

一方、[3]は数値3という要素を一つ持つ配列。長さも1になる。値を三つ並べた[0, 0, 0]とも、Array(3)は違うんだ。

mapは、空きの位置では関数を呼ばない

let calls = 0;
const result = Array(3).map((value, index) => {
  calls += 1;
  return index + 1;
});
console.log(calls); // 0
console.log(result.length); // 3
console.log(Object.keys(result)); // []

結果の長さが3でも、番号1・2・3を入れた配列にはならない。mapはこの空きの位置でコールバックを実行しないため、callsは0のままになるよ。

JSON.stringifyだけで見ると、空きもundefinedもnullとして表示される場合がある。今回の作例では、長さに加えてObject.keysと、各添字が存在するかも示している。

件数から作るならArray.fromを使える

let calls = 0;
const result = Array.from({ length: 3 }, (_, index) => {
  calls += 1;
  return index + 1;
});
console.log(result); // [1, 2, 3]
console.log(calls); // 3

Array.fromは、配列のようにlengthを持つオブジェクトなどから配列を作る。この例では、生成時の関数が各位置で呼ばれるので、indexを使って番号を作れる。

引数を二つ目まで渡さずArray.from({ length: 3 })とすれば、三つの位置に値としてundefinedが入る。空きのままにはならないので、その後のmapは三回呼ばれるよ。

fillで値を埋める方法もある

const result = Array(3).fill(0).map((value, index) => index + 1);
console.log(result); // [1, 2, 3]

先に0で三つの位置を埋めると、その後のmapも実行される。今回の0は数値なので問題にならないけれど、fill({})で入れると各位置が同じオブジェクトへの参照になる。別々のオブジェクトを作りたい場合は、生成用の関数で一つずつ作る条件を考えよう。

作例で、関数の回数と要素を比べる

1. Array(3).mapを選び、長さ3・呼び出し0回・存在する添字なしを見る。
2. Array.fromへ切り替え、1・2・3と呼び出し3回を確認する。
3. fill後のmapでも同じ番号ができることを見る。
4. 「最初から試す」で空きのある例へ戻す。

編集部では2026年10月29日にMDNと照合し、上のコード、回数、添字、リセットをNodeとChromiumで検証した。mapとforEachの返り値、flatの深さは、生成後の配列を処理する別の疑問として読めるよ。