JavaScript入門 | 関数

Tags:

関数とは

関数とは、特定の目的を持つ作業を実行するように設計された独立したブロックを意味する。
このような関数は必要なときに呼び出して、その作業を繰り返し実行できる。

function addNum(x, y) {
    return x + y;
}
document.write(addNum(2, 3));

JavaScriptにおけるブロックとは、関数や実行文の波括弧（{}）で囲まれた部分を指す。

JavaScriptの関数

JavaScriptでは、関数も1つのデータ型である。

そのため、関数を変数に代入したり、関数にプロパティを指定したりすることもできる。
また、JavaScriptの関数は他の関数内にネストして定義することもできる。

関数の定義

JavaScriptにおける関数の定義はfunctionキーワードで始まり、次の構成要素を持つ。

  1. 関数名
  2. 丸括弧内にカンマで区切って記述する関数のパラメータ
  3. 波括弧（{}）で囲まれたJavaScriptの実行文

JavaScriptで関数を定義する構文は次のとおりである。

function 関数名(パラメータ1, パラメータ2,...) {
    関数が呼び出されたときに実行したい文;
}

関数名は、関数を識別する識別子である。
パラメータとは、関数を呼び出すときに引数として渡された値を関数内部で使用できるようにする変数である。

// addNumという名前の関数を定義する。
function addNum(x, y) {    // x、yはこの関数のパラメータである。
    document.write(x + y);
}
addNum(2, 3);              // addNum()関数に引数として2と3を渡して呼び出す。

上の例では、パラメータxには引数2が保存され、yには引数3が保存されて使用される。
このように、引数とパラメータは個数だけでなく順序も非常に重要である。

関数の引数とは、関数が呼び出されるときに関数へ値を渡す変数や定数を意味する。

return文

JavaScriptでは、関数にreturn文を含めることができる。
このreturn文により、呼び出し元は関数で実行された結果を受け取ることができる。

return文は関数の実行を中断し、returnキーワードの後に指定された式の値を呼び出し元へ返す。 return文は配列やオブジェクトを含む、すべての型の値を返すことができる。

function multiNum(x, y) {
    return x * y;         // xとyを掛けた結果を返す。
}
var num = multiNum(3, 4); // multiNum()関数が呼び出された後、その戻り値が変数numに保存される。
document.write(num);

関数の呼び出し

定義された関数は、プログラム内で呼び出されて初めて実行される。
一般的な関数の呼び出しは、関数の定義文と同じ形式で行うことができる。

関数の定義

function addNum(x, y) {
    return x + y;
}

関数の呼び出し

var sum = addNum(3, 5); // addNum()を呼び出し、引数として3と5を渡す。
                        // 関数の呼び出しが終わった後、その戻り値を変数sumに代入する。

上の例で引数として渡された数値3と5は、関数で定義されたパラメータxとyにそれぞれ代入される。
したがって、呼び出された関数の内部では、パラメータxとyにそれぞれ3と5が代入されて計算される。

値としての関数

JavaScriptにおいて関数は構文上の構造であるだけでなく、値でもある。
そのため、関数を変数に代入したり、他の関数の引数として渡したりすることもできる。

次の例は、関数を変数に保存して使用する例である。

function sqr(x) {                // 2乗の値を求める関数sqrを定義する。
    return x * x;
}
var sqrNum = sqr;                // 変数sqrNumに関数sqrを代入する。
document.write(sqr(4) + "<br>"); // 関数sqrを呼び出す。
document.write(sqrNum(4));       // 変数sqrNumを関数のように呼び出す。