関数
処理の共通化
数学における関数は、数と数の関係のようなものですが、JavaScript をはじめとしたプログラミング言語の文脈における関数は、基本的には文のまとまりに名前を付けたものです。
// 関数を定義しておけば
function greet() {
document.write("Hello World!");
}
// 後から呼び出すことができる
greet();
greet();
上のプログラムにおいて、function キーワードから始まる部分は関数を定義するための制御構文です。関数定義では、 function キーワードに続けて関数名、かっこを記述します。この後、関数内で実行したい処理を波かっこの中に記述していきます。
関数を定義すると、関数名に続けてかっこを記述することにより、その関数を実行できるようになります。
このプログラムでは、 greet 関数が 2 回呼び出されているので、ブラウザに Hello World! が 2 つ表示されます。
引数
関数の振る舞いを呼び出し時に変更するため、関数に引数を与えることができます。引数には任意の値が指定できます。
function greet(greetingType, myName) {
document.write("Good " + greetingType + ", " + myName + "!");
}
greet("morning", "佐藤");
関数定義では、関数名直後のかっこ内に引数名をコンマ区切りで設定できます。上のプログラムで greet 関数は、 greetingType や myName という名前の引数をとります。関数定義の中では、これらは変数のように振舞います。
呼び出し側では、括弧の中に関数に渡す引数を指定します。このプログラムを実行すると、ブラウザに Good morning, 佐藤! が表示されるでしょう。
戻り値
関数呼び出しは式の一種です。関数定義内で return 文を用いると、関数の実行が停止され、関数呼び出し式の評価結果が確定します。この値を戻り値と呼びます。ある値を戻り値として設定して関数の実行を終了することを、関数がその値を返すと表現します。
function add(a, b) {
return a + b;
}
document.write(add(3, 4));
上の例の 4 行目で、式 add(3, 4) が評価されると、 a = 3, b = 4 として add 関数が実行されます。add関数の中で文 return a + b; が実行されると、式 a + b が評価され、7 になります。これにより、 add 関数は 7 を返し、式 add(3, 4) の評価結果は 7 となります。
変数のスコープ
関数内で宣言された変数は、関数内でのみ有効です。変数が有効な範囲のことを、その変数のスコープと呼んでいます。
関数外で宣言された変数は関数内でも利用できます。
let guestCount = 0;
function greet() {
guestCount = guestCount + 1;
document.write("あなたは" + guestCount + "人目のお客様です。");
}
greet();
greet();
この例における、greet 関数は、呼び出されるたびに guestCount に 1 を加えています。
スコープが終わった変数は、その時点で破棄されます。
let outer = 0;
function increment() {
let inner = 0;
outer = outer + 1;
inner = inner + 1;
document.write(outer); // 1ずつ増える
document.write(inner); // 常に1
}
increment();
increment();
演習
携帯電話料金を計算する関数を作ってみましょう。
function calculateCost(monthlyBandwidth) {
// ここに処理を書く
}
document.write(calculateCost(3.5));
calculateCost は、引数に月間転送量 monthlyBandwidth を取り、その月の携帯電話料金を戻り値として返す関数です。携帯電話料金は、下のルールで決定されるとします。
月間転送量を monthlyBandwidth (GB) とします。
- monthlyBandwidth < 5.0 のとき、携帯電話料金は monthlyBandwidth × 600 (円)
- monthlyBandwidth >= 5.0 のとき、携帯電話料金は 3000 (円)