ES6でのvar、let、constの使い分け

JavaScriptの変数の宣言方法は３つあります。var、let、constです。
JavaScriptの変数の宣言は元々varのみでした。ES6では、letとconstが追加されました。
そこで、var、let、constの使い分けを紹介をしたいと思います。

var - 変数を宣言する（再定義可）

特徴として、再代入可能で再定義可能です。

var x = 3;
x = 4;
var x = 4;

スコープ

ブロックの中で宣言した変数をブロックの外でも使用できます。

if (true) { var y = 3 }
console.log(y); // 3 

for (var i = 0; i < 10; i++) {
  // do something
}
console.log(i); // -> 10

varはスコープの範囲が広く、挙動の予測が難しくなるため、今後varでの変数の宣言は避けるべきです。

let - 変数を宣言する（再定義不可）

再代入可能な変数を宣言する場合に使用します。varと異なる点は変数名を再定義できません。

let x = 3;
x = 4;
let x = 4; <- error

// if文
let name;
if (mode === "slack") {
  name = "youichi";
} else if (mode === "twitter") {
  name = "@wozozo";
}

スコープ

ブロックの中で宣言した変数はブロックの外では使用できません。

if (true) { let z = 4 }
console.log(z) <- error

for (let i = 0; i < 10; i++) {
  // do something
}
console.log(i); <- error

再代入可能な変数を宣言する場合では、影響範囲がvarよりも小さくなるため、varではなくletを使用するべきです。

const - 再代入不可能な変数を宣言する

constは再代入不可能で再定義不可能な変数を宣言する場合に使用します。

const x = 3;
x = 4; <- error
const x = 4; <- error

スコープ

letと同様に、ブロックの中で宣言した変数はブロックの外では使用できません。

if (true) { const z = 4 }
console.log(z); <- error

いずれの３つの宣言方法で、まず使うべきはconstです。変更が必要のないものは「もう変更がない」と宣言することで、他のコードへの影響を小さくします。

まとめ

• varは使用しない
• 基本的にconstを使用する
• 再代入が必要な場合は、letを使用する

参考

イマドキのJavaScriptの書き方2018 - Qiita
JavaScriptにおけるvar/let/constの使い分け