備忘録的プログラミングリファレンス

functionステートメント

 functionステートメントは関数を定義するために利用されるステートメントです。

 関数とは、複数の処理をひとつの手続きにしたものです。メソッドとも呼ばれています。関数を利用することで似たような処理を何度も描く必要がなくなります。

関数の定義
function example_(){
	...
}

 関数には、引数という関数内で処理するための値を渡すことができます。
 引数をパラメーターともいいます。そのために関数にパラメータを渡す、関数がパラメータを受取るといったりします。
 引数を調べるためには、arguments オブジェクトを利用します。引数の数とその値を取得することができます。

 以降では以下の項目について説明しています。

サブルーチン、プロシージャ

JavaScript において function ステートメントはサブルーチンやプロシージャが作成できます。

 値を返すものをサブルーチンといいます。値を返さないものはプロシージャと呼びます。JavaScriptでは、サブルーチンプロシージャはreturnステートメントがあるか/ないかによります。

サブルーチンとプロシージャ
// サブルーチンの例
function example_() {
	...
	return( foo )		// returnがある
}

// プロシージャの例
function example_() {
	...			// returnがない
}

引数の有無判別

 関数の引数があるか/否かはundefinedリテラルによって判別できます。値とデータタイプが等しいかを比較する比較演算子"==="を使います。

function example_(a, b) {
	if (b === undefined) {
		alert("2番目のパラメータがありません");
	}
	...
}
...
var answer_ = example_(1);

関数式(関数リテラル)

 関数はオブジェクトとして扱うこともできます。関数オブジェクトを関数式(関数リテラル)といいます。以下は、関数式(関数リテラル)として定義する方法です。

var example_ = function(){
	...
}

アロー関数で関数を定義

 例えば以下の関数定義をアロー関数で定義してみましょう。

var example_ = function( prm001 ){
	...
}

var example_ = (prm001) => {
	...
}

 { }内のコードが1行のときは{ }カッコを付ける必要がありません。

var example_ = (prm001) => ...;

 引数が1つのときは( )カッコを付けなくてもいいです。

var example_ = prm001 => { ... }

 引数がない場合は( )カッコだけを付けます。

var example_ = () => { ... }

function(関数)とthisステートメント

 thisステートメントは、JavaScriptの実行時に現在参照しているオブジェクトです。
 関数内でthisによって呼び出されるオブジェクトはその関数が参照しているオブジェクトになります。

var _obj = {
	_obj: this,  // デフォルトのグローバルオブジェクト、windowオブジェクトを参照

	_function: function() {
		return this;  // _objを参照
	}
}

console.log( _obj.obj );
console.log( _obj._function() );

*これは古い記述方法です。

*consoleはブラウザの開発ツールを利用してください。

コールバック関数

 コールバック関数とは、引数として関数を渡す方法です。引数として関数を渡すと、その関数を処理してからその処理結果を関数内で利用します。
 繰り返しや現在の状態を監視しながら処理をする場合にコールバック関数が利用されています。

 Ajaxなどサーバーとの通信などにおいて処理の遅滞による不具合を解消することもできます。

 ブラウザはネットワークを介したサーバーと通信をしながら処理を行うために待ち時間が生じます。一方の処理を待たないで実行すると不具合が生じる場合があります。
 一方の処理の待たないで実行することで不具合が生じるのを防ぐために、コールバック関数を使います。

 コールバック関数は、関数の引数に別のある関数を設定します。

 コードの編集方法は以下です。

function other_func(){
	...
}

function example( callback ) {
	...
	callback();	// 引数で指定した関数が実行される

}

...
example( other_func );

functionステートメントとオブジェクト作成

 functionステートメントは、オブジェクト定義でもできます。しかし、現在はclassステートメントでオブジェクトを定義、作成します。ちなみに、以下は過去の作成例です。

var example_ = function ( prm01, prm02,... ){
	this.prm01 = prm01;
	this.prm02 = prm02;
	...
}

example_.prototype =
{
	get_ExamplePrm : function(){
		...
	},
	...
}

function(関数)のEventからの呼び出し

 HTMLエレメント(DOM)のEventから呼び出すことができます。

<button onclick="example_()">...<button>

 詳しくは、Event インターフェイスを参照してください。