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

functionステートメント(サブルーチン、プロシージャ)

 functionステートメントは関数と呼ばれ、JavaScriptにおいてサブルーチンやプロシージャも作成できるステートメントです。関数は繰り返し利用するような処理をひとつの手続きにしたものです。

function example_(){
	...
} 

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

function example_() {	// サブルーチンの例
	...
	return( foo )		// returnがある
}

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

 関数では引数を定義できます。関数を呼び出すときには引数をパラメーターと言ったりします。そのために関数にパラメータを渡す、関数がパラメータを受取ると言ったりします。
 引数を調べるためには、argumentsオブジェクトを利用します。引数の数とその値を取得することができます。

引数の有無判別

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

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

function(関数)の定義方法

関数

 関数として定義する方法です。

function example_(){
	...
}

関数式(関数リテラル)

 関数式(関数リテラル)として定義する方法です。

var example_ = function(){
	...
} 

アロー関数で関数を定義

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

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

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

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

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

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

var example_ = prm001 => { ... }

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

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

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

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

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

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

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

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

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

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

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

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

引数とargumentsオブジェクト

 argumentsオブジェクトは、引数をオブジェクト化したものです。function(関数)内でのみargumentsオブジェクトが利用できます。

    function city( text ) {
        console.log( arguments );  // argumentsオブジェクトを出力   
    }
     
    city( 'San Francisco', 'New York', 'Tokyo' );

*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(){
		...
	},
	...
}