苦学楽学塾 ホームページ
最終更新日：2024年12月28日
類似の処理を何度も繰り返しコーディングしなくてよいように、関数を使います。JavaScriptでは、関数の定義の仕方が幾つかありますが、もっとも基本的なものは、
function 関数名(引数) {
処理
return 戻り値;
}
というものです。プログラム中で、関数名()とすると、この関数を呼び出し、処理が関数に移行します。呼び出し側の引数の並びと関数の引数の並びは対応します。引数の個数に制限はありません。引数には、変数や数値だけでなく、配列、オブジェクト、関数を入れることができます。関数の中で引数の値を変更しても呼び出し側の変数には影響がありません。但し、配列やオブジェクトは、配列要素やプロパティの内容を関数内で変更すると、呼び出し側でも変更されてしまいます。呼び出し側と関数側で引数の型に相違があれば当然正しく動作しません。
また、alert(関数名);とすると、関数のソース・コードを表示します。JavaScriptでは関数も1つのオブジェクトなので、変数に代入することができます。
var deal1 = func1;
function func1() {
処理
return 戻り値;
}
とすると、deal1には、関数func1()の戻り値が入るのではなく、関数func1そのものが入ります。つまり、deal();とすると、関数func1()が呼び出されます。
以下のように関数名を省略して変数に代入する、という書き方も可能です。
var data1 = function (arg1, arg2) {
処理
return 戻り値;
}
この場合は、戻り値が変数data1に代入されます(上記の関数自体の代入との違いに注意してください)。こうした関数は無名関数と呼ばれますが、代入する変数名が関数名になります。配列要素に代入されるような場合には無名のままです。
また、関数の引数並びや、配列要素、オブジェクトのプロパティとして、直接関数記述することも可能です。例えば、
var data1 = function (arg1, function (arg2) {
処理1
return 戻り値1;
}) {
処理2
retuen 戻り値2;
}
こうすると、まず、function(arg2)が呼ばれて戻り値1が、外側のfunction(arg1,･･･)の第2引数となり、この関数の戻り値2がdata1に代入されます。外側のfunctionの'('に対応する')'が、内側のfunctionの定義{･･･}の後ろについていることに注意してください。
また、以下のようにして、アロー関数式で関数を定義することが可能です。アロー関数式は、(引数) => {処理内容}という形をしています。
alert(data2("function"));
var data2 = (str1) => {
return str1 + "name";
}
こうすると、alert文で、data2を表示しようとしてアロー関数が"function"を引数として呼び出され、str1に入った引数の"function"と、"name"を連結して、ダイアログ内にfunctionnameと表示されます。なお、アロー関数定義を、1行で、
var data2 = (str1) => str1 + "name";
と書いてしまうこともできます。これでも、str1 + "name"の結果がdata2に入ります。
また、関数の再帰的呼び出しと言いますが、関数の引数にその関数自身を入れることができます。HTMLのDOMツリー全体を走査するような場合に使います。
var data3 = function rec1(s1, rec1) {
処理
if (終了条件) {
return 1;
}
if (rec1(s2, rec1)) return 1;
else return 0:
}
という具合にします。再帰的呼び出しが無限に深くならないように、終了条件を入れて、どこかで終わるようにしなければなりません。
また、色々な条件により処理内容を変える必要がある場合に、以下のように、変数名だけで事前に定義しておいて、条件により変数に入れる関数を入れ替えて処理を変える、ということもできます。
var fn1;
･･････
if (条件1) fn1 = func1;
else if (条件2) fn1 = func2;
else fn1 = func3;
data4 = fn1(s3);
function func1(arg1) {
処理1
}
function func2(arg1) {
処理2
}
function func3(arg1) {
処理3
}
これで、条件1が成立するときに処理1，条件2が成立するとき処理2，それ以外の場合に処理3が行われます。
なお、関数は、宣言だけでは実行されません。関数の呼び出し時点で実行されます。また、関数宣言はそのスコープ全体で有効なので、関数の定義を関数呼び出しの後に置くことが可能です。上記の例ではそうなっています。
また、上記では変数fn1は関数になっているので、関数オブジェクトの機能を使うことができます。関数オブジェクトのプロパティには以下のようなものがあります。
fn1.name
fn1にfunc2が入っていれば、"func2"になります。
fn1.length
fn1に入っている関数の引数の数が入っています。上記の例では1です。
関数を定義するとき、呼び出し側で関数の引数を省略したり、引数にundefinedが渡される場合に備えて、デフォルト引数を指定できます。以下のようにb=1とすると、第2引数が渡されれば渡された値をbとし、第2引数が省略されるとb=1として動作します。
function func4(a, b=1) {
return a + b;
}
alert(func4(3));
alert(func4(7,5));
最初のalertでは、3+1で4と表示され、2番目のalertでは、7+5=12で12と表示されます。
引数の数が不定の関数定義において、引数を配列として受け取る操作方法があります。引数並びの最後に、...arrayを入れて(arrayはfunc5内をスコープとする配列で、残余引数と言います)、
function func5(a, b, ...array) {
処理
}
とした関数があり、func5(1, 2, 3, 4, 5, 6);として呼び出すと、aに1，bに2が入りますが、残りの引数が、配列arrayに入り、array[0]=3, array[1]=4, array[2]=5, array[3]=6となります。これを、for(const arg of array)として取り出すことができます。また、array.lengthは4になっていて引数の数を知ることができます。関数の引数すべてを残余引数にするには、関数定義をfunc5(...array)とします。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。