著者アーカイブ 杉浦

著者:杉浦

javascriptの関数定義と巻き上げ

　javascriptの関数定義は、関数宣言を行う方法と変数に関数式を格納する方法の二種類に大別できます。

//こちらは関数宣言
function hoge(){
	console.log('hoge declare');
}
//こちらは関数の式を変数に格納
hoge = function(){
	console.log('hoge expression');
};

　関数宣言を行った場合に起きる動作が巻き上げです。巻き上げは関数宣言を行った場所に関係なくプログラムの最初で関数を定義します。このため

hoge();

function hoge(){
	console.log('hoge declare');
}

は実行したい関数の中身が実行され、

hoge();

hoge = function(){
	console.log('hoge expression');
};

は実行したい関数の中身が実行されません。
　関数を先に書いて主となる実行部分を後に書くことが必須ないし推奨の言語は少なくない（python、シェルなど）ですし、関数式による定義の使用はそうそう問題にならないでしょう。むしろES6で追加されたconstを用いれば再定義を防げるので良いくらいです。問題になるのは関数宣言と関数式による定義を混在と関数の再定義が合わさった場合です。そうそう起きない事態ですがこれが起きた場合、非常にわかりにくいソースコードができます。

function hoge(){
	console.log('hoge declare 1');
}
hoge();
hoge = function(){
	console.log('hoge expression 1');
};
hoge();
function hoge(){
	console.log('hoge declare 2');
}
hoge();
function hoge(){
	console.log('hoge declare 3');
}
hoge();
hoge = function(){
	console.log('hoge expression 2');
};
hoge();

　実行結果が一瞬でわかる人はそういないでしょう。読み解き方は最後の関数宣言を記憶して、関数式の代入の度に再定義する、というものです。実行結果は次の通りです。

著者:杉浦

javascriptの関数の扱い

　javascriptの関数は第一級オブジェクトとして扱われています。　
　wikipediaから引用した第一級オブジェクトの性質は次の通りです。

言語によって異なるが、第一級オブジェクトは概ね次のような性質をもつ。

無名のリテラルとして表現可能である。

変数に格納可能である。

データ構造に格納可能である。

それ自体が独自に存在できる（名前とは独立している）。

他のものとの等値性の比較が可能である。

プロシージャや関数のパラメータとして渡すことができる。

プロシージャや関数の戻り値として返すことができる。

実行時に構築可能である。

表示可能である。

読み込むことができる。

分散したプロセス間で転送することができる。

実行中のプロセスの外に保存することができる。

　javascriptの関数は第一級オブジェクトです。プロシージャや関数の戻り値として返すことができます。
　このためjavascriptの関数の定義は似たような二種類の書き方が出来ます。一つはただ関数の宣言を行う処理が起きる書き方、もう一つは関数を変数に格納する処理が起きる書き方です。

function a(){console.log('hoge')}//関数の宣言のみを行う。変数aの中に名前aの関数が格納される。
a = function(){console.log('hoge')}//変数aの中に名無しの関数を格納する。

　それぞれ実行すると次の様になります。

　またES6で追加されたアロー関数を使うと次の様にも書けます。関数を定義した感じがあまりしません。この書き方が浸透したような場所でない限り、本来の目的通りコールバックに使うべきでしょう。

a = () => {console.log('hoge')}//変数aの中に名無しの関数を格納する。

　本来の目的に沿った書き方は次の様な書き方です。

//イベント付与では元々コールバックとして関数式、関数オブジェクトを渡していた。引数無しならばこのように書ける
function console_log_hoge(){
    console.log('hoge')
}
$('p').on('click',console_log_hoge)

//アロー関数による引数渡しは短くわかりやすく書ける
//また$('p').on('click',console_log_innerText(e))とした場合,その場で関数が実行されてしまう
function console_log_innerText(e){
    console.log(e.target.innerText)
}
$('p').on('click',e => console_log_innerText(e))

　最後にこんなこともできるがするべきではない書き方をひとつ。

function a(){
	return function b(){
		return console.log('c');
	}
}
a()()

　関数を実行した返り値の関数を実行しました。