JSLintとJSHintとhoisting

JavaScript

↓こんな記事を発見。(私がJSLintをフォークしてJSHintを作った理由)
http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to-jshint/

ここで話題になってるJSLintを作った人が、今読んでるJavaScript:Good Partsの著者らしいのでちょっと興味が沸いて読んでみた。

JSLint でのチェックができない！

よくあるコードだと思うんですが↓のようなコードをJSLintすると

var myfunc = function() {
	for ( var i = 0; i < 3; i++  ) {
		/* something */
	}
};

↓こんなふうに言われてそれ以降のチェックが行われない。

Error:
Problem at line 2 character 11: Move 'var' declarations to the top of the function.
for ( var i = 0; i < 3; i++ ) {

「varによる定義はfunctionの先頭に持っていくべし」とのこと。

"JSLint can NOT suck it"

ブログの著者が言うには

これを見逃すようにするなオプションはないのでコードを書き換えるかJSLint使うのやめるかしかない。
このエラー＆チェック停止はjsコミュニティでも歓迎されていないっぽい。
→ Crockford氏(JSLint作者)駆動ではなく、コミュニティ駆動開発のツールを作ろう
→ JSHint

ということになったらしい。

JSLintが "for(var ..." に文句を言う理由

ブログのコメントをみるとvarを上に持っていけというのにはちゃんと理由があるらしい。

'hoisting'というものがあって・・・
varをfunctionの一番上に持っていかないと発見しづらい問題を起こすことがある。

hoistingってなに？

var foo = 'bar';
(function(){
    if(false){
        var foo = 'BAZ';
    }
    alert(foo);    // bar でも BAZ でもなく... undefined !
})();

↑のコードを実行すると"undefined"とアラートが出る。

　　　　　　　　 ,. -‐'''''""¨¨¨ヽ
　　　　 　 　 (.＿＿_,,,... -ｧァﾌ|　　　　　　　あ…ありのまま 
　 　 　 　 　 |i i|　 　 }!　}} /／|　　　　　　今　起こった事を話すぜ！
　　　　 　 　 |l､{　 　j}　/,,ｨ//｜
　　　　　　　 i|:!ヾ､_ﾉ／ u {:}//ﾍ　　　　　『グローバル変数を参照したと
　　　　　　　 |ﾘ u' }　 ,ﾉ　_,!V,ﾊ |　　　　　思ったら消えていた』
　　 　 　 ／´fト､_{ﾙ{,ィ'ｅﾗ　, ﾀ人　
　　　　 /' 　 ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ
　　　　,ﾞ　 ／ )ヽ iLﾚ 　u' |　| ヾｌﾄﾊ〉
　　 　 |／_／　 ﾊ !ニ⊇　'／:} 　V:::::ヽ　
　　　 /／ 二二二7'T'' ／u'　__ /:::::::/｀ヽ
　　　/'´r　-―一ｧ‐ﾞＴ´　'"´ ／::::／-‐ 　＼　　
　　 / // 　 广¨´ 　/'　　 ／:::::／´￣｀ヽ ⌒ヽ　
　　ﾉ ' /　 ノ:::::`ー-､___／:::::／/ 　 　 　 ヽ　　}
_／｀丶　/::::::::::::::::::::::::::￣`ー-{:::...　　　 　　　ｲ　

これは

  • alert時のfooは一番近いスコープ(ここでは関数内)のfooを参照しようとする
    • ↑つまり var foo = 'BAZ';
  • このためグローバルにあるfoo(barのほう)は関数内では参照されない
  • でもalertの実行時にはvar foo = 'BAZ';は実行されていない
  • undefined

っていうことらしい

ぶひー。確かにこれのせいで問題が起こってもなかなか見つからなそう・・・
でも

// こういう習慣を
for(var i = 0; i < 3; i++)

// こう変えなさい
var i;
for(i = 0; i < 3; i+=1)

と、急に言われても困るというのはある。。