はじめに
JavaScriptを学習していると、比較的初歩の段階でfor文を学びますね。
繰り返し処理をするための機能で、配列データを順番に取り出して表示したり、別の値を格納していくなどの便利な使い方が可能です。
しかし、使い方に慣れるまではつまずきやすい部分でもあります。
ここでは初心者がうっかりしてしまいがちなfor文での失敗例とその対処方法を紹介します。
for文の失敗例
例えば、主要5教科：国語・算数・英語・理科・社会の合計点を求めるプログラムを書くとしましょう。
配列scoresに各教科の点数が入っていて、これを順番に取り出して合計点totalに加算していくためのコード例は下記です。
total = 0;
var scores = [35, 90, 21, 89, 70];
for(i = 0; i <= scores.length; i++) {
total += scores[i];
}
console.log(total);
こちらを実行すると、合計点が表示されるのを期待するところですが、実際は下記の結果となってしまいます。
> NaN
NaNとは「Not-A-Number」のことで、「非数」という特別な値です。これは数字が与えられる想定の処理に対し、数字ではない値が与えられた場合に返されます。
NaNになる原因は？
なぜNaNになってしまうのでしょうか？どこで問題が起きているかわからない場合は、各所で値を表示させておかしな値が入っている箇所がないか確認するのが定石で、これをプリントデバッグと呼びます。
下記の通り、for文内にログ出力処理を追加しましょう（4行目）。
total = 0;
var scores = [35, 90, 21, 89, 70];
for(i = 0; i <= scores.length; i++) {
console.log(scores[i]);
total += scores[i];
}
console.log(total);
こうすることでscoresの配列から取り出した値をコンソールに表示させて確認できます。実行結果は下記の通りです。
> 35 > 90 > 21 > 89 > 70 > undefined > NaN
上から順番に、配列内の点数が表示されています（1〜5行目）。一番下のNaNは元から出ていたものですね（7行目）。
ここで、6行目にundefinedが表示されているのにお気付きでしょうか。
for文の中で1〜６行目の値がtotalに足し合わされていきますが、undefinedは数字ではないため、これが足し合わされた後にtotalにはNaNが入ってしまったわけです。
対処方法
なぜ5個しか要素が入っていないはずの配列から6回も値が取り出されているのでしょうか。もう一度for文の繰り返し条件を見てみましょう。
for(i = 0; i <= scores.length; i++)
scoresの要素数は5個なので、scores.lengthには5が入ります。つまり、iは0からスタートし「0、1、2、3、4、5」の合計6回繰り返されるわけです。
そして、配列の要素はsocres[0]が1番目、scores[1]が2番目というふうに対応しています。 n番目の要素を取り出すにはscores[n-1]のように、1つ減らした数字を使って取り出す必要があるのです。
そのため、要素が５個の場合はscores[4]が最後の要素となり、scores[5]は未定義なので取り出そうとするとundefinedが返ります。
実際に取り出してみた例が下記です。最後の列で、数字とundefinedを足そうとしてNaNが返っているのが分かりますね。
var scores = [35, 90, 21, 89, 70]; console.log(scores[0]); //35 console.log(scores[5]); //undefined console.log(scores[0] + scores[5]); //NaN
これに対処するには、繰り返しをi=4で止めるように修正しましょう。for文繰り返し条件を「i がscores.length以下」としていたのを「iがscores.length未満」に変更します（下記3行目）。
total = 0;
var scores = [35, 90, 21, 89, 70];
for(i = 0; i < scores.length; i++) {
console.log(scores[i]);
total += scores[i];
}
console.log(total);
実行してみると、無事総合点が表示されました。
> 305
まとめ
JavaScriptのfor文でNaNが出てしまう原因と対処方法についてご紹介しました。
実はJavaScriptに限らず、他の言語の繰り返し処理でも同様のミスをしてしまいがちです。
起っている現象としては全く同じで、繰り返し条件の間違いにより無いはずの配列要素にアクセスしてしまうことが原因なので、つまずいたら1度チェックする癖をつけましょう。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する