連想配列のValue要素を取り出したいがエラーになる

Javascriptで　連想配列から特定の要素をランダムに取り出したいのですが
エラーになってしまいます。以下のコードは一部です。

Jacascript
1const words = {
2    0: { word: "white", isDone: false },
3    1: { word: "book", isDone: false },
4    2: { word: "car", isDone: false },
5    3: { word: "pencil", isDone: false },
6    4: { word: "watch", isDone: false }
7  };
8
9let wordNow;
10
11    wordNow = words[Math.floor(Math.random() * words.length)].word;

エラー内容は

main.js:60 Uncaught TypeError: Cannot read property 'word' of undefined
at HTMLParagraphElement.<anonymous> (main.js:60)

おそらく文法エラーなのですが全くわかりません。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは

ご質問に挙げられているコードのどこが拙いかというと、words は配列ではないので、words.length は意図している、 5 という数値にはならず undefined になることです。

そのため、

Math.floor(Math.random() * words.length) は NaN になり、
words[Math.floor(Math.random() * words.length)] は undefined となって、
words[Math.floor(Math.random() * words.length)].word は undefined のwordプロパティを読みにいこうとして、ご質問にあるエラーメッセージ

Cannot read property 'word' of undefined

が表示されます。

最小限の修正で済ませるには、

javascript
1words.length

を以下に修正してみると、いかがでしょうか？

javascript
1Object.values(words).length

動作確認用 CodePen: https://codepen.io/jun68ykt/pen/ExxZOjB?editors=0012

または、ランダムにwordを取り出すのが目的であれば、以下のように、words のエントリの値に含まれる word の値を集めた配列wordsAryを作り、そこからランダムサンプリングすることもできます。

javascript
1onst words = {
2    0: { word: "white", isDone: false },
3    1: { word: "book", isDone: false },
4    2: { word: "car", isDone: false },
5    3: { word: "pencil", isDone: false },
6    4: { word: "watch", isDone: false }
7  };
8
9const wordsAry = Object.values(words).map(e => e.word);
10      
11let wordNow = wordsAry[Math.floor(Math.random() * wordsAry.length)];
12
13console.log(wordNow);
14

なお上記で、wordsAry の内容は、オブジェクトリテラルに書いたとおりの順番に沿った
["white", "book", "car", "pencil", "watch"]
には必ずしもならないのですが、目的がランダムサンプリングなのであれば順番は関係ないので、上記でも要件は満たされると思います。