関数とは、、
同じ様な処理が複数回出てくる場合は全て記述していては作成効率も悪くなり、メンテナンスも難しくなってしまいます。 このようなときは 関数と呼ぶ機能を用い処理ごとにまとまった単位で独立させて記述します。
このように独立させて記述しておくので何度も同じ様な記述をする必要がなくコーディング量を減らす事も出来、バグが見つかった際もこの一箇所のみの修正で済んでしまうのでメンテナンスがとてもし易くなります。
関数を宣言する
関数の定義は次のように行います。 関数名、引数のリストを指定しますが引数のリストは無くても構いません。引数という言葉をはじめて聞いた方は引数に関する以下の説明を参照してください
 引数とは
引数と聞きなれない言葉が出てきましたがどういったものなのでしょう、、、例えば 10の 2乗を算出する関数を作成したとします。 しかし、これでは 8の 2乗を算出したい場合はまたもう一つ関数を作成して対応しなければいけません。 せっかく効率をよくするために関数を作成しているのに、これではあまりにも非効率的です。 こういった時に 2乗される値を呼出し側で指定できたらとても便利だと思いませんか！？ そうすればこの関数は全ての数の 2乗を一つの関数で算出できるようになります。
このような時は関数にいくつの 2乗を算出するのか指定してあげなければなりませんが、この指定する値を [ 引数 ] と呼びます。 引数は関数の宣言時にいくつ受け取るか、呼出し側でどの値を引数として渡すかを指定します。
引数を渡さない呼出し
function 関数名() {
処理
}
引数を渡す呼出し
function 関数名(引数リスト) {
処理
}
ある値の２乗を出力する関数
function sample(a) {
document.write( a * a );
}
関数を呼び出す
上で関数の宣言方法を説明しましたが、上のように 関数を宣言しただけでは関数は実行されません。 関数はプログラムから明示的に呼び出す事によって始めてその処理が実行されます。 関数を呼び出す場合は 関数名( 引数1, 引数2 ,,,) と記述します。 ※ ただし引数が無い場合は () のみ
// 引数を与えない呼び出し
関数名() ;
// 引数を与える呼び出し
関数名 ( 引数リスト ) ;
[ サンプル ]
function syori_A() {
// 関数の定義（この時点では実行されません）
document.write("A");
}
function syori_B(b) {
// 関数の定義（この時点では実行されません）
document.write(b);
}
// 引数を指定した呼出し
syori_B("Sample") ;
// syori_Aの呼出し
syori_A() ;
上記のように実行すると、結果は [ SampleA ] と表示されます。関数を宣言しても実行されないで呼び出した順番で処理が行われているのがわかると思います。
結果の戻し
引数が偶数であるか判定する関数
上記のような関数を考えてみましょう。 まず引数の指定と受取りは前回の説明までで作成できると思います。 また、与えられた引数が偶数か奇数であるかも条件分岐や算術演算子を使用すれば判断できそうですね。
では判断した後はどうすれば良いのでしょう、、、そのまま [ 値は偶数です ] と出力するのであれば [ document.write メソッド ] を使用すれば可能です。 しかし呼出し側で奇数か偶数か判断して処理を変更したい場合は別の方法が必要になります。
このような時は関数から呼び出し元に結果を提供してあげる必要があります。 JavaScript では次に説明する [ return 命令 ] を使う事で解決出来ます。
return
return 命令 により関数の結果として呼び出し側に関数から結果を知らせることが可能になります。 また return 命令 は実行された時点でその関数を終了して呼び出し側に制御が戻る事が出来ます。
var a = 2 ;
if(chk_even(a)){
document.write("偶数です") ;
}else{
document.write("奇数です") ;
}
function chk_even(a){
if((a % 2) == 0){
return true;
} else {
return false;
}
}
このスクリプトを実行すると [偶数です] と表示されます。 呼び出し元を見ると、関数をif文の条件に使用していますね。 これは → この関数自体が 真/偽 の値になると言う事になります。
function_A() ;
function function_A() {
document.write("This is");
return;
document.write("Sample");
}
上記の結果は [ This is ] と表示されます。 return 命令は実行された時点でその関数を終了して呼び出し側に制御が戻る事が出来ます」と前途しましたが [ This is ] と表示されて [ Sample ] が表示されていません。 これは returnによってこの関数をぬけているためです。
returnを用いない場合
関数内で [ return命令 ] を実行しなければ関数の最後まで処理を実行することになります。 この場合この関数はどういった値になるのでしょう？ Perlではこの場合、最後に評価された値が返されました。下のサンプルを見てみましょう。
document.write(function_A());
function function_A() {
var a=10,b=20,c;
c = a + b ;
}
このスクリプトを実行すると [undefined] と表示されます。 結果から言うと何も値を返しません。Perlとは少し違っていますので間違えないようにしましょう。
変数のスコープ
だいぶ前の章で説明した内容ですが、変数のスコープ(有効範囲)について再度見てみましょう。
変数のスコープとは、その変数の有効範囲 ( 変数を参照できる範囲 )がどこまでであるか、という意味になります。 つまり変数を参照できる範囲が スコープ範囲、変数を参照できない範囲を スコープ範囲外と呼びます。
このスコープの違いで、全ての場所から参照できる変数を [ グローバル変数 ] と呼び、関数内だけなど特定の場所からしか参照できない変数を [ ローカル変数 ] と呼んだりもします。
NetscapeNavigatorでは、、
現在古いバージョンの NetScapeNavigatorの利用者はだいぶ減っていますが、NetscapeNavigatorでは varを使い宣言した場合その変数は宣言された場所に限らず全てグローバル変数になります。逆に言えば NetscapeNavigatorでは関数の中で varを付けないで宣言した変数以外全てグローバル変数となります。
InternetExploreでは、、
InternetExploreでは関数の中で宣言した変数は全てその関数のみのローカル変数となります。関数の外で宣言した変数は全てグローバルな変数となります。
[ InternetExploreでの動作例 ]
// グローバル変数aの宣言、代入
var a = 10 ;
// 関数の呼び出し
func_A() ;
// 関数の呼び出し
func_B() ;
// グローバル変数aの表示→ ( 10 )
document.write(a) ;
// 変数が参照できないのでエラーになる
document.write(b) ;
function func_A() {
// ローカル変数bへの代入
var b = 10;
// ローカル変数aへの代入
var a = 100;
// ローカル変数の方が優先されるので → ( 100 )
document.write(a) ;
}
function func_B() {
// グローバル変数aの表示 → ( 10 )
document.write(a) ;
}
|
home / Knave web lecture / JavaScript / 8章 関数
