JavaScriptのスパース配列の謎 - インデックス0から9が消えた理由

 何が起こりましたか？

LeetCode #509 Fibonacci Number Solution & Explanation – Zyrastory を書いている間、次のJavaScriptコードセグメントに出会いました。

var fib = function(n) {
    arr = [0,1];
    
    for(let i = 2; i<=n; i++)
    {
        arr[i] = arr[i-1]+arr[i-2];
    }
    return arr[n];
};

C#やJavaとは異なり、JavaScriptの配列の長さは固定されておらず、動的に変更できます。
これにより、故意にインデックスをスキップして値を割り当てる際の配列の動作に疑問を持ちました。配列はどのように見えるでしょうか？
迷いなく、すぐに開発者コンソール（F12）を開き、次のコードスニペットを入力しました：

arr = []
arr[10] = 10

arr.forEach(function(item,index) {
  console.log("index "+index+": "+item);
})
console.log("Length of arr : "+arr.length)

空の配列 arr が最初に定義され、その後、インデックス10に値10が割り当てられます。

さて、問題は、配列の長さは何ですか？推測してみましょう！

この場合、foreach構文が使用され、ちなみに、関連記事もいくつか言及しておきましょう：Unraveling the Peculiar Pitfall in JavaScript – forEach Loop Fails to Exit with return! – Zyrastory

準備はできています！ では、答えを発表します：

なんですか！

なぜ1つのオブジェクトしか表示されないのですか？

しかし、長さが1と言うのも間違っています。はっきりと11と表示されています。

この時点で、arr[0]をチェックする以外に選択肢はありません ➡ undefinedです。

さて、インデックス0から9までを印刷してみましょう ➡ 驚くことではありませんが、すべてundefinedです。

そして、今日のトピックに移りましょう。

疎な配列 (Sparse Array)

疎な配列は、配列の長さがその要素の数と一致しない場合を指します。これは、住民のいない家があるような、家の列に似ています。一方で、通常使用される対応関係は、全てのインデックスに要素がある密な配列です。

その印刷方法は？

JavaScriptでは、forEachメソッドは配列の割り当てられたインデックスのみを反復処理し、疎な配列の未割り当てのインデックスを反復処理しません。

この場合、最も基本的な形式のforループを実際に使用できます。

arr = []
arr[10] = 10

for(let i = 0; i<arr.length;i++)
{
    console.log("indx"+i+": "+arr[i])
}
console.log("Length of arr : "+arr.length)

今では配列全体が見えますね！