問題1 : 平均値を計算してください。
国語:80点 数学:85点 英語:75点
3教科の平均点をif文とfor文を使用して計算してください。(割り算に固定値は使用しない)
解答例
let nationallanguageScore = 80;
let mathScore = 85;
let englishScore = 75;
let subjects = [nationallanguageScore, mathScore, englishScore];
let average = 0;
for (i=0; i<subjects.length; i++) {
average += subjects[i] / subjects.length;
}
console.log(average);
subjects.lengthで配列の要素数(教科の数)を取得できるため、割り算の数値が可変です。
もし、教科が増えたら変数定義と配列を変更すれば式は変更する必要がありません。
問題2 : 平均値を求める関数を作成してください
せっかくなので、問題1の平均値を求める式を関数化して汎用的にしてみましょう。
引数に各教科の点数を渡せば、関数が自動で平均値を返してくれるようにしてみましょう。
解答例
let nationallanguageScore = 80;
let mathScore = 85;
let englishScore = 75;
let subjects = [nationallanguageScore, mathScore, englishScore];
console.log(average(subjects));//average関数の返り値の平均値が出力される
function average(subjects) {
let average = 0;
for (i=0; i<subjects.length; i++) {
average += + subjects[i] / subjects.length;
}
return average;
}
関数化したら何が嬉しいのか
ソースコードは共通化した方が良いという話は聞いたことがあるでしょうか。
例えばA画面でも平均値を求める式が必要でB画面でも平均値を求める式が必要な状況と仮定します。
A画面はa.htmlの中に<script></script>でjavascriptが記載されていて、
B画面はb.htmlの中に<script></script>でjavascriptが記載されているとしましょう。
その場合は・・・
a.htmlのjavascript
<script>
let nationallanguageScore = 80;
let mathScore = 85;
let englishScore = 75;
let subjects = [nationallanguageScore, mathScore, englishScore];
let average = 0;
for (i=0; i<subjects.length; i++) {
average += + subjects[i] / subjects.length;
}
console.log(average);
</script>
b.htmlのjavascript
<script>
let nationallanguageScore = 80;
let mathScore = 85;
let englishScore = 75;
let subjects = [nationallanguageScore, mathScore, englishScore];
let average = 0;
for (i=0; i<subjects.length; i++) {
average += + subjects[i] / subjects.length;
}
console.log(average);
</script>
このように、同じような式が作成されてしまうことになります。これが2つならまだしも、数十画面に量産されると効率が非常に悪いです。
そこで先ほどのように関数化します。またファイル構成は共通javascriptを1つ作成してそこに全ての画面に共通する関数を記載して各画面から関数を呼び出せるようにします。
common.js
function average(subjects) {
let average = 0;
for (i=0; i<subjects.length; i++) {
average += + subjects[i] / subjects.length;
}
return average;
}
そうすれば、あとはA画面の作成ファイルa.htmlとB画面の作成ファイルb.htmlから共通関数に引数を渡して呼び出すだけです。
a.html
<head>
<script src="common.js"></script>
</head>
<body>
</body>
<script>
let nationallanguageScore = 80;
let mathScore = 85;
let englishScore = 75;
let subjects = [nationallanguageScore, mathScore, englishScore];
average(subjects);
console.log(average(subjects)); //平均値が出力される
</script>
b.html
<head>
<script src="common.js"></script>
</head>
<body>
</body>
<script>
let nationallanguageScore = 80;
let mathScore = 85;
let englishScore = 75;
let subjects = [nationallanguageScore, mathScore, englishScore];
average(subjects);
console.log(average(subjects)); //平均値が出力される
</script>
仮に、平均値を求める式に何か変更を加えることになっても関数が1つなので変更箇所は1箇所で済みます。
コメント