関数

処理の共通化

数学における関数は、数と数の関係のようなものですが、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 を加えています。

演習

info

この課題への解答は任意です。時間が余った際に取り組んでみてください。

携帯電話料金を計算する関数を作ってみましょう。

function calculateCost(monthlyBandwidth) {  // ここに処理を書く}
document.write(calculateCost(3.5));

calculateCost は、引数に月間転送量 monthlyBandwidth を取り、その月の携帯電話料金を戻り値として返す関数です。携帯電話料金は、下のルールで決定されるとします。

月間転送量を monthlyBandwidth (GB) とします。

• monthlyBandwidth < 5.0 のとき、携帯電話料金は monthlyBandwidth × 600 (円)
• monthlyBandwidth >= 5.0 のとき、携帯電話料金は 3000 (円)