JavaScript ES2015 var, let, const 変数宣言の使い方

久しぶりにJavaScriptを使うことになって調べたら、変数宣言のバリエーションが増えていました。let, constという使い方があるらしい。

ES2015で策定されたのでもう2年も前です（執筆時点）。やばい相当遅れています。遅まきながら勉強しました。

var いままでの使い方

従来の使い方です。新しい方法が追加されても使うことができます。しかし、let, constがあるので、もう使う場面はありません。

ぼくは使うことをやめました。

let 変数のスコープを限定する

いままで、変数の有効範囲の自由さはJavaScriptの特長でしたが、じっさいはバグの温床になっていました。

これを解決したのが『let』です。

宣言したスコープ内だけ変数が有効になります。スコープとは、変数の見える範囲のことです。

いままでのvarに代わるもので、スコープを限定するので、varではなくletを使うほうがプログラムとして安全です。

if, for内で宣言すると構文内だけ有効な変数です。これまでなかった狭いスコープの変数が使えるようになりました。

var a = true
if(a) {
    var b = 'sample';
}
console.log(b); // 'sample'が表示できる。

let a = true
if(a) {
    let b = 'sample';  // ifの中でしか見れない。
}
console.log(b);  // エラーになる

また、varでは変数の二重宣言ができました。

var a = 'sample';
  .
  .
  .
var a = 'sample2';
console.log(a); // 'sample2'が表示される

letではエラーになります。これはプログラミングでは当たり前のことです。『同じことは書かない』がプログラミングの基本なので。

const 定数。値の変更はできない

定数です。一度値を設定したら変更できません。DOMオブジェクトや関数を変数に格納するときに使います。

constで宣言された変数は値が変更されないことを明示しているので、プログラムソースが読みやすくなります。

var a = 'sample';

a = 'sample2';  // 変更したくない場合でも変更できるのでバグになりやすい

var func = function() {
    console.log('sample');
}

var func = function() {
    console.log('sample2');
}

func();  // 関数が上書きされる。関数以外でも上書きできるので自由度が高い。

const a = 'sample';

a = 'sample2';  // 変数に値を格納できないのでエラーになる

const func = function() {
    console.log('sample');
}

func = function() {
    console.log('sample2');
}  // エラーになる

まとめ

2018年の現在、varを使うことはないと思っていいです。

いまは、生のJavaScriptを書くことは無くなりつつあります。最新のJavaScriptの仕様で開発して、公開する環境に合わせてトランスパイルするという流れがあるからです。

どうしても生のJavaScriptを編集しないといけなくても、『昔は、変数宣言にvarを使っていた』程度で大丈夫でしょう。

ただし、varはあまりにも自由度が高いので、バグになりやすいことには注意が必要です。