プログラムを簡潔にする、関数とは？【JavaScript入門】

先日の記事から少し時間が空いてしまいましたが、今回は関数を取り上げようと思います。
関数を理解することで簡潔で再利用性の高いプログラムを書くことが可能になります。

関数とは

ある特定の処理をひとまとめにしたものを関数といいます。
まずは前回のプログラムを見てみましょう。

var price = 2000; //価格（税抜き） 
var discount = 0.3; //割引率 
var tax = 0.05; //消費税率 

var discountedPrice = price - ( price * discount); //割引後の価格 
var result = discountedPrice + ( discountedPrice * tax ); //消費税を含めた最終的な価格 

alert(result); //結果を出力

何も問題の無いプログラムですが、複数の商品の割引・消費税適用後の価格を求めたい場合はどうでしょうか？ソースコードを複製してパラメータだけ変更すれば良いかも知れませんがとても非効率的です。ここで登場するのが関数。関数を使うことで上記のプログラムを下記のように書き換えることができます。

function calculate(){

	var price = 2000; //価格（税抜き） 
	var discount = 0.3; //割引率 
	var tax = 0.05; //消費税率 

	var discountedPrice = price - ( price * discount); //割引後の価格 
	var result = discountedPrice + ( discountedPrice * tax ); //消費税を含めた最終的な価格 

	alert(result); //結果を出力
}

calculate();

上記の例ではfunction calculate(){ … }の部分で「calculate」という名前の関数を定義して、calculate();の部分で関数を実行しています。関数を定義したので以降はcalculate();と記述するだけで処理を行えます。

感の良い人ならお気づきかと思いますが「全く同じ処理をして意味があるのか？」と。意味がある場合もありますが、今回の例では部分的にパラメータを変更しないと意味を成しませんね（笑）そこで、役に立つのが引数と戻り値（返り値）です。

引数とは

引数を使うことで関数の挙動を柔軟に変更することができます。早速引数を適用した例を見てみましょう。

function calculate(price, discount, tax){

	var discountedPrice = price - ( price * discount); //割引後の価格 
	var result = discountedPrice + ( discountedPrice * tax ); //消費税を含めた最終的な価格 

	alert(result); //結果を出力
}

calculate(2000, 0.3, 0.05); //引数として価格、割引率、消費税率を渡しています

このように関数定義側には引数を受け取るための変数を指定し、関数実行側には実際利用する値を指定します。あとは下記のようにcalculate()を好きなだけ実行しちゃえばOK!

/* 関数定義部分は省略 */

calculate(2000, 0.3, 0.05);
calculate(2500, 0.5, 0.05);
calculate(1000, 0.9, 0.05);

戻り値（返り値）とは

と、今度は「アラートたくさん出てきてウザい、計算結果だけ欲しい。」と思い始めることでしょう…（笑）そこで役に立つのが戻り値です。早速、戻り値を適用した例です。

function calculate(price, discount, tax){

	var discountedPrice = price - ( price * discount); //割引後の価格 
	var result = discountedPrice + ( discountedPrice * tax ); //消費税を含めた最終的な価格 

	return result;
}

var r = calculate(2000, 0.3, 0.05);

alert(r);

ポイントはreturn result;の部分。変数resultの中身を関数の実行結果として返しているわけです。

上記例ではvar r = calculate(2000, 0.3, 0.05); alert(r);というように一旦変数に代入していますが、alert(calculate(2000, 0.3, 0.05));というように代入せず直接利用することも可能です。

次回は条件分岐を解説しようと思います。