即時関数の様々な記法

#functionの先頭に！だと…？
ある日、Twitterボタンを設置しようとしていた私は、ふいにそのソースコードを見て心がざわつきました。

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>

ん？？

!function(...){
	doSomething();
}(...);

functionの前に「！」が書いてあるぞ…。
いったい何者だこやつは…！

#即時関数だった
調べてみると、JSでよく見かける即時関数

(function(...){
	doSomething();
})(...);

の別記法でした。

#他にも…
他にもこんな書き方ができるようです。

+function(...){
	doSomething();
}(...)

-function(...){
	doSomething();
}(...)

void function(...){
	doSomething();
}(...)

typeof function(...){
	doSomething();
}(...)

そもそも( )を使う必要性すらないわけですね。

#なぜこの書き方ができるの？
詳しい説明は割愛しますが、ポイントは関数を「式 Expression」として解釈させることにあります。

JSの処理系に関数を式として解釈させるには、「式文 ExpressionStatement」と呼ばれる文法にのっとる必要があります。

ECMAScriptの仕様書には

ExpressionStatement :
	[lookahead  {{, function}] Expression ;

/* 先頭が { もしくは function で始まらないこと */

とあるので、冒頭の「!」で始まるfunctionは関数式として解釈され、実行されるというわけです。

#参考リンク

• ECMAScript Documentation
• 知ってて当然?初級者のためのJavaScriptで使う即時関数
• ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由