【JavaScript入門】JavaScriptの関数と引数の使い方

プログラムでは、ある動作を行ったときに同じ処理を行う場合があります。ボタンを押したときに計算を行い、その結果を表示したりする場合などがそうです。

このようにあるタイミングで決まって行われたり繰り返し行われるような処理をまとめたものを関数と呼びます。

関数は、引数とよばれる値を受け取ることができ、処理の結果を関数の呼び出し元に返します。

それでは、JavaScriptでは関数をどのように使うかを詳しく見ていきましょう。

関数の構文

function 関数名 ( 引数1, 引数2, 引数3 ){
    処理1;
    処理2;
    処理3;
    return 戻り値;
}

上記の例のように、関数を使用する際はfunctionクラスの後に関数名を記述し引数を指定します。引数は任意の数を指定することができ、省略することもできます。複数指定する場合は、カンマで区切って記述します。

{}の中には関数の中で行う処理を記述します。

最終行で呼び出し元に戻り値を返します。

関数の実行

それでは、関数を実行する(呼び出す)例を見ていきましょう。

// 数値を合計する関数(sumNum)を定義する
function sumNum (x1 , x2, x3){
    // 第1引数と第2引数と第3引数で渡された数値を合計し、結果を返す
    return x1 + x2 + x3;
}
// sumNum という関数を実行する。(第1引数に3、第2引数に5、第3引数に7を指定し、結果を得る)
var total = sumNum(3, 5, 7);

// 結果を出力する
alert(total);

上記プログラムの実行結果は次のようになります。

image9_1

特殊な関数

JavaScriptでは変数は型に関係なく何でも代入することができ、、関数自体を変数に代入することができます。

// 関数オブジェクトを、変数に格納する
var func_obj = function (num1, num1, num3){
    var ret = num1+ num1 + num3;
    return ret;
}

// 関数オブジェクトを実行して、結果を取得する
var result = func_obj(1, 2, 3);
alert(result);

上記プログラムを実行すると次のようになります。

image9_2

プログラムの1行目で、func_objという変数に関数自体を格納しています。このとき、関数名は指定する必要が無いため、匿名関数、または、無名関数と呼ばれています。

最後に特殊な関数の使い方をご説明しましたが、JavaScriptの関数は非常に自由度の高いものです。インターバルを指定するメソッドと組み合わせて使用すれば、実行タイミングを自動的にコントロールすることも可能です。

関数を理解することは、JavaScriptプログラミングの幅を無限に広げることになるかもしれません。


イベント

2017/12/05(火)
Design Thinking Square