4.2 function
それでは、最も基本的な関数の書き方を確認しましょう。
JavaScript では function キーワードを使って関数を定義します。
Java の「メソッド」に似ていますが、JavaScript ではクラスに属さない単独の関数として定義できるのが特徴です。
4.2.1 引数と戻り値を使った関数のプログラム
ソースフォルダ：public/ch04
ファイル名：function.js
➢ function.html
前の章で作った ch03/strict-equality.html をコピーし、ch04 にペーストしてください。
その際に、ファイル名を function.html に変更します。
ファイル内の strict-equality.html や strict-equality.js の記述も、function.html や function.js に修正します。
➢ function.js
// function.js
// 2つの数値を加算する関数を定義します
function add(a, b) {
return a + b; // 足し算の結果を返します
}
// 関数を呼び出し、結果を変数に代入します
let result = add(3, 5);
// 結果を表示します
alert("3 + 5 の結果は: " + result);
実行結果
解説
まず 4 行目の「function add(a, b) {」からの部分は、a と b という２つの引数を持つ add という名前の function を新規に定義しています。return は戻り値として a + b を足した結果を返すようにしています。
4: function add(a, b) {
5: return a + b;
6: }
9 行目は、前章で学んだ let を使い、function の結果を result という変数に代入しています。
9: let result = add(3, 5);
12 行目では、alert を使用して、result を表示しています。
12: alert("3 + 5 の結果は: " + result);
JavaScript で関数を定義する際、function の基本構文は下記のようになります。
書式：function
function 関数名(引数….) {
//ここに処理を記述します
return 結果;
}
function は、引数や戻り値を持たない場合もあります。戻り値がない場合は、そのまま return; で終了させてもかまいません。
注意すべきなのは、function という関数には、Java などの言語と違って引数や戻り値に明示的な型指定がありません。また、スペルミスなどの構文エラーが起こっても、コンパイラが事前に警告することはありません。ブラウザの見かけ上は何も起こらないため、エラーが発生したことに気付きづらいです。
関数が思ったように動作しないなど、エラーが疑われる時は、これまでも何度か紹介した Google Chrome などのデベロッパーツールで、常に Console を確認するようにしてください。