もう「Var」は使うべきではない理由。JavaScript の「gotcha」の影響を解決する方法

（※）本稿は総合コンサルタント企業「アクセンチュア」にてシニアフロントエンジニアを勤めるMark Brouch氏のポストを翻訳したものです。

私はES2015（ES6）シンタックスを利用してJavaScriptを書いていますが、多くのコンピュータ言語が洗練され、シンプルになってきているのを嬉しく思っています。私は、varの代わりにletやconstを使うようになりました。よりいいスコープの仕組みを利用できるからです。

この記事では、varではなくletを使うべき理由を説明します。

なぜ「Var」を使うべきではないのか？

通常、変数を宣言する場合、letやvarではなくconstを使います。これは宣言後に値を変更しようとした場合にエラーを返してくれるからです。間違って変更してしまわないようにするにはいい機能と言えます。しかし、シナリオのループを防ぐには、値の変更がしばしば必要になります。ではこういう場合に、なぜvarではなくletを使うべきなのでしょうか。

それはletがvarにはないブロックスコーピング機能を提供してくれるからです。実例が必要でしょうから以下のコードを参照してください。
 

 
例の通り、callbackアレイに関数を挿入すると、5回ループしています。駆け出しのエンジニアだと結果が[0,1,2,3,4]になると考えがちです。これは確かに論理的なのですが、JavaScriptのgotchaの影響を受けますので、そうはなりません。正しくは[5,5,5,5,5]となります。
 

 
callback関数のいずれかが呼び出される前にforのループでいっぱいになるため、Javascriptが関数ブロックの初めに変数宣言を持ってきて、callback関数が実行されるまでにiの値を5に変更する仕組みを取っていることに注意します。

解決策

この問題の解決策はたくさんあります。スクリプトを使って[0,1,2,3,4,5]とコンソールに記録する方法があります。しかし、letを使えばもっとシンプルに問題を解決できます。
 

これで完了です。varをletと置き換えるだけです。実例の通り、これですべて解決です！

Varを使わない方がいい理由とはなんでしょうか？ブロックスコープではなく関数スコープを使いたいなら、varが役立つ場合もあります。しかし、スクリプトを問題なく機能させるために変数宣言をコードの冒頭に使う方法を取ると、letを使う場合よりも大きな問題が起こると思います。

追記

以下は追記です：読者からのよくある質問2つに回答します。

1.constは変更できません。例えば、以下を参照してください。
 

 
しかし、以下のようなよくある変更は防げます。
 

 
変更可能なものがいいなら、Facebook掲載の優れた変更可能ライブラリをご覧ください。

2.letは{mySuperAncientBrowser}ではサポートされていません。また、最近の新しいブラウザーもletをサポートしていません。これに対しては明白で簡単な解決法があります。Babelを使います。Babelを使うと、JavaScriptの最良で最新の機能をすべて使えますし、古いIE8ブラウザーが理解できる言語に変換してくれますよ。

（※本稿は「Why You Shouldn’t Use ‘var’ Anymore」を翻訳・再編集したものです）