コアJavaScript(ECMAScript)の図書室 24冊目【JavaScript】[ECMAScript] 関数の定義

トップページ
特集PC技術
コアJavaScript(ECMAScript)の図書室
24冊目【JavaScript】[ECMAScript] 関数の定義

コアJavaScript(ECMAScript)の図書室

24冊目【JavaScript】[ECMAScript] 関数の定義

ここでは、関数の説明をします。
関数は引数というデータを受け取り、処理をし、戻り値として処理結果を渡してくれます。
関数はまとまった処理を何度も繰り返したいときに使用します。
JavaScriptの関数を理解するのは大変重要です。今後様々な場面において使われます。
ここでは、実際に関数の定義について説明をします。定義方法は３種類あります

[1] functionで定義する

functionで定義する方法が一般的で、他のプログラム言語でも似たような方法があります。
他の言語を学んだことがあればわかりやすい方法だと思います。

function 関数名(引数...){
関数内で実行される処理
}


// 関数は定義前でも実行できる
document.writeln(sum1(10,20));

// 関数の定義1
function sum1(num1, num2){
	return num1+num2;
}

// 関数を定義後でも実行できる
document.writeln(sum1(10,20));

関数はfunctionを用いて定義します。このプログラムでは、sum関数を作成しました。
二つの数字を引数として渡すとその合計を返してくれる関数です。
これで重要なのは、関数を定義前でも実行できる点にあります。
これは、function定義で作成する方法はコードを解析する時点で関数が実行可能状態になっているわけです。
また、定義前に関数を実行できるのはこの方法だけです。下で説明する２つはこの方法ができませんので注意しましょう

[2] Functionコンストラクタで定義する

次はFunctionコンストラクタを使用する方法です。
関数の引数は自由にいくつでも設定ができ、最後の引数が関数の本体になります。
この方法は引数や関数の本体を文字列として定義できるところにあります。

変数名 = new Function(引数....., 関数の本体);

var sum = new Function("num1", "num2", "return num1+num2");

document.writeln(sum(10,20));

このような方法もありますが、あまり実用的でないため、いい方法ではありません。

[3] 関数リテラルで定義する

JavaScriptにおいて、関数もデータ型の１つですので、変数に代入することができます。
この関数がデータ型であるという概念がJavaScriptの関数において重要な働きをします

変数名 = function(引数....){
関数内の処理
}

// 関数を変数に代入
var sum = function(num1, num2){
	return num1 + num2;
}

// sumは変数だが関数を持っているので()を使ってあげると実行できる
document.writeln(sum(10,20));

// sumは変数だから()をつけないと関数の定義情報が見れる
document.writeln(sum);

この方法は関数の名前をつけずに定義するので無名関数又は匿名関数と呼ばれます。
この無名関数という方法は知っておかなければなりません。様々な場面において利用されているからです。
変数のsumというものはデータなので表示をしてみると関数の定義情報を見ることができます。
私から見てこのあたりからJavaScriptが厄介に感じています。