javascriptでbestScoreの出し方が理解できません

Question

前提・実現したいこと

現在progateでjavascriptを勉強しています。超初心者です。

var scores = [88, 62, 65, 21, 47, 92,  57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];

// この下にコードを書いてください
var sum = 0;
var bestScore= 0;
for (var i = 0; i < scores.length; i ++) {
  sum += scores[i];
  if (scores[i] > bestScore) {
    bestScore = scores[i]
  }
}

var age = sum / scores.length;
console.log("平均点は" + age + "点です");
console.log("最高点は" + bestScore + "点です")

なぜこれでbestscoreの値が出るのかがわかりません。
頭の悪い質問で申し訳ないのですが、教えていただければ嬉しいです。

発生している問題・エラーメッセージ

該当のソースコード

javascript

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

	if (scores[i] > bestScore) {
		bestScore = scores[i]
	}

ここでは、for文で回されているscoresの値と、bestScoreの値を比較し、scores[i]の方が大きければ、その値をbestScoreに書き換える、という処理をしています。

bestScoreは、最初は「0」になっているので、
最初は、「0」と「88」を比較します。
大きいのは、「88」なので、bestScoreを「88」に書き換えます。

次は、「62」と「88」で、bestScoreは、「88」のままです。（変わりません）
次は、「65」と「88」で、....

6回目で、「92」がきました。
次は、「92」と「88」で、「92」の方が大きいのでbestScoreを「92」に書き換えます。

この繰り返しです。
ループが終わると、いちばん大きい「98」が、bestScoreに代入されている、という事になります。

Comments

[gabugabu]

とても分かりやすい回答ありがとうございます。
理解できました！！！

Answer 2

この例題はfor文やif文の紹介も兼ねているのだろうと思いますが、
せっかくなので1行で解決するネタを付けておきます。

---

ネイティブJS編

var scores = [88, 62, 65, 21, 47, 92,  57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];
var max = Math.max.apply(null, scores);
// console.log(max); // 98

var sum = scores.reduce(function(sum, it){ return sum + it }, 0);
// console.log(sum); // 2627

var ave = Math.round(sum / scores.length);
console.log("平均点は" + ave + "点です");
console.log("最高点は" + max + "点です");

以下解説

JavaScriptにはMathという計算に特化した組み込みオブジェクトがあります。
Math - MDN

その中にMath.maxという渡した引数の最大の値を返すメソッドが存在します。

ところが、見ての通りscoresは配列なので、可変長引数を求めるMath.maxに直接流し込む事は出来ません。
そこで、配列を可変長引数に変換しながら流し込む為にFunction.prototype.apply()を利用します。

最大値を求める箇所はちょっと難解です。
リスト操作のArray.prototype.reduce()を利用しました。
まぁ、1行で書くテクニックを使ってると思って下さい。

---

ライブラリを使ってもっと楽に書いたバージョン。
JavaScriptにはこういった計算を超楽にこなすLodashというライブラリがあります。
導入も楽なんで検討してみてくださいね。

https://codepen.io/travist/full/jrBjBz/
このサイトにコピペして挙動を確認してみてください。

最大値を求める

var scores = [88, 62, 65, 21, 47, 92,  57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];
result = _.max(scores);
// 98

平均値を求める

var scores = [88, 62, 65, 21, 47, 92,  57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];
result = _.mean(scores);
// 71

通しで質問文のコードを再現

var scores = [88, 62, 65, 21, 47, 92,  57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];
console.log("平均点は" + _.mean(scores) + "点です");
console.log("最高点は" + _.max(scores) + "点です");