[JavaScript] 関数の書き方あれこれ

2015年12月17日

Javascript テクノロジー プログラミング

javascriptは非常に色々な書き方が存在する。 ということは、他人が書いたソースコードを読んでみても、いつも書き慣れている書き方でなければ、解読するのが非常に困難になるし、とにかく疲れる。 そもそも、書き方のパターンを知らなければストレスでしかない。 そんな訳で、javascriptの関数パターンを羅列してみました。

標準パターン

function hoge(str){ alert(str); } hoge("test"); 参考書を購入した人が勉強するのはこのパターンでしょう。 いたって普通の書き方で、他の言語と同じような書き方なので、あまり解説は不用でしょう。

無名関数パターン

(function(str){ alert(str); })("test"); 無名関数はPHPでも導入され、古いプログラマーの方はとても困惑した書き方だと思いますが、 グローバルを汚さないという点においては合理的な構造なので、僕は比較的好きなパターンです。 この無名関数の類似の書き方は下記になります。 !function(str){ alert(str); }("test"); 未だに何故「!」が付くだけで()を書かなくてもよくなるのかが、未だに分かりませんが、とりあえず覚えておくレベルでも大丈夫でしょう。

classっぽいパターン

function hoge(){ this.aa = "1.aaa"; } var hoge2 = new hoge(); alert(hoge2.aa); newで宣言しないとhoge.aaは"undefined"が返ってしまうので、オブジェクト生成するように記述するパターンですね。 少しややこしいですが、慣れると整理しやすくなりますよ。

ネストな関数

function hoge1(a){ function hoge2(b){ return a+b; } return hoge2; } alert(hoge1(2)(3)); 関数の引き渡し値を2つ繫げて書くのは初めてみましたが、これもjavascriptでは可能になります。 値を階層で受け渡す方法はなかなか斬新なのですが、これどうやって使うかあまり現実味がないかもしれませんね。 ちなみに、下記はさらにもう一階層ネストを増やしてみました。 function hoge1(a){ function hoge2(b){ function hoge3(c){ return a+b+c; } return hoge3; } return hoge2; } alert(hoge1(2)(3)(4));

他の書き方は?

とりあえず、他にも書き方があると思うが、特筆するものがあれば、この記事に追記していきたいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。