No.1 様々な関数の呼び出し方とarguments

ここからは、JavaScriptにおける関数について色々とやっていきたいと思います！！

関数

「関数ってなんぞ？」なんて方は、居ないと思いますが･･･
もし居た場合は、「No.3 論理値と関数の基本」の関数部分をもう一度お復習いしておきましょう。

まず、関数は次のような書き方でしたね

1
2
3
4
5
6
7
8
9
10
11
12

// 関数宣言をした場合
function say() {
    alert('Hello!!');
}
 
// 無名関数を変数に入れた場合
var hi = function() {
    alert('Hi!!');  
};
 
say(); // 結果: "Hello!!"
hi(); // 結果: "Hi!!"

関数宣言と変数の中に無名関数を入れるやり方は、一見同じように見えて実は、実行できるタイミングに違いがあるということも学んだと思います。

今回学んでいく「様々な関数の呼び出し方」、表題通り実は関数の呼び出し方にはいろんなやり方があるのです。

呼び出し方その1: ()による呼び出し

1
2
3
4
5

var func = function() {
    console.log('Hello World!!');
};
// 呼び出し
func();

もう見飽きちゃいましたかね？
最も利用されているであろう関数の呼び出し方法です。

記述方法

1

関数名(引数...)

呼び出し方その2: callによる呼び出し

1
2
3
4
5

var func = function() {
    console.log('Hello World!!');
};
// 呼び出し
func.call();

なんか新しいの出てきましたね！
今までは関数名()でしたが、今度は関数オブジェクトのcallメソッドを利用して指定した関数を呼び出すことが出来ます。

記述方法

1

関数名.call(スコープ対象, 引数...);

む？･･･スコープ対象？:(

なんか、関数呼び出し時に渡す引数以外に謎の引数があります。
この後ご紹介する残りの呼び出し方法もそうですが、通常の関数呼び出しと大きく違うのは、このスコープ対象を設定出来る点です。スコープについては、次回の記事で詳しくご紹介するので、ここでは複数の呼び出し方法があり、スコープ対象を引数として設定出来るということを覚えておいてください。 （この後ご紹介する呼び出し方法については、引数の設定方法にも特徴があります）

呼び出し方その3: applyによる呼び出し

1
2
3
4
5

var func = function() {
    console.log('Hello World!!');
};
// 呼び出し
func.apply();

callメソッドに続いて、今度はapplyメソッドです。
記述方法については、callメソッドと同じく関数オブジェクトのapplyメソッドを利用する形になります。

記述方法

1

関数名.apply(スコープ対象, [引数...]);

記述方法についてもほとんど同じに見えますが、引数を設定している部分をよく見てください。
applyメソッドを利用した場合、関数に渡す引数は配列で指定する必要があります。

以上が、JavaScriptにおける3種類の関数呼び出しです。

「3種類あるのは分かったけど、それぞれ何が良いの？？:(」

呼び出し方の違い、それぞれのメリットなどについては次回やっていきます。
最後に1つ、これは次回も触れるので簡単な紹介になりますが、JavaScriptにはargumentsという特別な変数が存在します。

関数内の特別な変数 – arguments

1

arguments

JavaScriptには、argumentsという特別な変数が存在します。
どんな変数なのか簡単に説明すると、

実行された関数に渡された引数すべてを配列で取得できる変数

です。

以前関数の説明をする際に「JavaScriptでの関数は、定義した引数以上の値が渡されても単純に無視します」というような説明をしましたが、実はこのargumentsを利用すると、本来無視されるはずの引数も取得することが可能になります。

1
2
3
4
5

function arg(a, b, c) {
    console.log(arguments); //結果: [10, 100, 200, 50, 30]
}
// 設定されている数以上の引数を設定
arg(10, 100, 200, 50, 30);

このように、すべての引数を配列で取得することができます。
(あ、、そういえば、先ほど紹介したapplyメソッドも引数を配列で受け取ってたような気が･･･)

それでは、次回お楽しみに。