let、const、var とは
JavaScriptでは、変数を使用するときには変数名を宣言することが推奨されており、変数名を宣言するときに、使用するキーワードが「let」「const」「var」です。
以前は var のみ使用できましたが、ES2015（ES6）より let と const が追加されました。
let と const の追加により、var を使用する理由がほとんどなくなりました（後述します。）が、現状でも var を使用している人を見かけることがあります。
let、const、var それぞれの違いをしっかりと理解し、正しく使い分けができるようになりましょう。
変数とは
JavaScript を含むプログラミング言語全般において、とある文字列や数値などのデータを繰り返し使用することは少なくありません。
同じデータを繰り返し記述するのは手間がかかるため、そのデータに名前をつけて何度も繰り返し使用できるようにする機能が「変数」です。
let、const、var の違い
let、const、var はそれぞれ以下の3点での違いがあります。
- 再代入可能か
- 再宣言可能か
- スコープの種類
| let | const | var | |
| 再代入 | ○ | × | ○ |
| 再宣言 | × | × | ○ |
| スコープ | ブロックスコープ | ブロックスコープ | 関数スコープ |
再代入
再代入とは、一度宣言した変数に再度値を設定し直すことを意味します。
再代入可能な「let」「var」では、値が再代入されます。
一方、再代入不可能な「const」では、再代入を行うとエラーとなります。
// let
let a = "0";
a = "1";
console.log(a); // 1
// const
const b = "0";
b = "1"; // エラー
// var
var c = "0";
c = "1";
console.log(c); // 1再宣言
再宣言とは、一度宣言した変数を同じ変数名で宣言することを意味します。
再宣言可能な「var」では、後に宣言された変数が適用されます。
一方、再宣言不可能な「let」「const」では、再宣言を行うとエラーとなります。
// let
let a = "0";
let a = "1"; // エラー
// const
const b = "0";
const b = "1"; // エラー
// var
var c = "0";
var c = "1";
console.log(c); // 1ブロックスコープ
スコープとは、変数の有効範囲のことを指します。
宣言された変数はスコープ内でのみ使用でき、スコープ外で使用することはできません。
「let」「const」で宣言された変数はともにブロックスコープであり、「{}（ブロック）」で囲われた中でのみ変数を使用することができます。
// let
{
let a = "0";
console.log(a); // 0
}
console.log(a); // エラー
// const
{
const b = "0";
console.log(b); // 0
}
console.log(b); // エラー関数スコープ
「var」で宣言された変数は関数スコープであり、宣言された関数内ではどこからでも使用することができます。
// var
{
var c = "0";
console.log(c); // 0
}
console.log(c); // 0var を使う必要がない理由
ES2015（ES6）での「let」と「const」の追加により、「var」を使用する理由はほとんどなくなったと言われています。
その理由は、「let」が「var」とほとんど同じ役割を果たしており、制約の多い「let」の方が自由度の高い「var」よりもコーディング上優れているためです。
制約が多いよりも、自由な方が良いのでは？という疑問が浮かびそうですが、コーディングを行う上では、一定の制約（ルール）があった方が保守性の高いコードを書けるため、ある程度の制約のある方が望ましいと言えます。（もちろん、制約がありすぎると不便なので使われません。）
const に対する誤解
「const」は定数と言われることがありますが、厳密には定数ではありません。
それは、オブジェクトや配列の値の変更（削除・追加）は再代入とは異なる扱いであり、変更が可能だからです。
また、変数宣言で「名前をつける」ということは、ほとんどの場合、値が変わる（再代入される）ことは想定されません。
ですので、基本的に関数宣言は「const」で行うことができます。
ただ、for文など、カウントとして増えていく変数を宣言する際には「let」を使用する必要があります。
let count = 0;
const elem = document.getElementById('sample');
elem.addEventListener('click', () => {
// count に 1 を足して再代入する
count ++;
console.log(count); // (id="sample"がクリックされた回数)
})
コメント