ProgrammingJavaScript講座第1章 JavaScript言語仕様
第1章 JavaScript言語仕様

関数

関数の定義と呼び出し

関数の基本的な使い方

関数とは、呼び出すことのできる処理の集まりのことです。プログラム内で何回も同じ処理をするようなときは、処理の部分を切り離して関数にしてしまうのがスマートなやり方です。そうすれば、何回も同じソースを書く必要がなくなるので、時間の節約にもなります。

例えば次のコードは、渡した数値を2倍にして返す関数を定義し、その関数を呼び出しています。

// 関数の定義
function func(V){
	return V * 2;
}

// 関数の呼び出し
var ret = func(10);

関数の宣言

関数は function で宣言します。

構文
function 関数名([引数[, 引数[, ... 引数]]]) {
	[命令文]
}
関数名
関数名を指定します。呼び出すときはこの関数名を使います。
引数
関数は呼び出す際に値を渡すことができます。関数に渡す値のことを引数と呼びます。
引数は関数のブロック内で使うことができます。このとき渡される引数は値渡しとなります。関数内でその値をどのように変更しても、元の変数には影響ありません。ただし、オブジェクトは参照渡しとなります。
命令文
実行したい命令文を記述します。
返却値
関数が返す値のことを返却値と呼びます。返却値に指定したい値は、return キーワードを使って指定します。
関数は必ず値を返し、値の指定がない場合は undefined が返されます。

下記の例では引数を2倍にした値を返します。

// 関数の定義
function func(V){
	return V * 2;
}

関数の呼び出し

関数を呼び出すには、関数名とかっこを使って、以下のようにします。

func();

呼び出す際に引数を渡すことができます。

func(100);

関数の呼び出しは関数定義の前に行えます。

// 関数の呼び出しと、返却値の出力
console.log( func(100) );

// 関数の定義
function func(V){
	return V * 2;
}
200

クロージャ・無名関数と即時関数

無名関数の概要（関数リテラル）

関数名を付けず、関数式によって作成することができます。このような関数名がない関数を無名関数と呼びます。

var func= function(V) { return V * 2; };
console.log( func(10) );
20

ライブラリの作成時などに力を発揮しますが、簡単なところでは引数に関数を渡したいときなどに便利です。

var str = "test";
// replaceの第2引数に無名関数を渡しています
var ret = str.replace(/[a-z]/g, function(v) {
	return v.toUpperCase();
}); 

console.log(ret);
TEST

無名関数を定義と同時に実行する

無名関数は次の構文で定義と同時に実行することができます。

構文
( function( ){...} )( );

たとえば次の無名関数は定義と同時に実行されます。

(  function(){
console.log("hello"); 
}  )();

hello

クロージャの概要

関数は自身のブロックの中に関数を内包することができます。

function outerFunc() {
	function func() {
	}
}

内包された関数は親関数の変数にアクセスすることができます。内部の関数が外側の関数の変数にアクセスできる仕組みのことを、クロージャと呼びます。

function outerFunc() {
	var x = 2;
	return function (){
		return x++;
	}
}

var func = outerFunc();
func();

2

func();

3

上記では、outerFunc()の内部にある無名関数が外側の関数の変数 x をインクリメントしています。
外側の関数の変数 x は永続化されて呼び出された後も値を保持しています。変数を永続化や隠蔽をするのがクロージャの利点です。

再帰関数

自分自身を呼び出す関数のことを再帰関数と呼びます。無限に関数が呼び出されないように、通常は終了条件を設定します。

function loop(x) {
	// 再帰関数の終了条件
	if ( x >= 50 ) return;
	console.log( x );

	// 再帰呼出し
	loop(x + 1); 
}

loop(0);

関連記事