本記事では、JavaScriptの変数宣言の時に使用するvar、let、constの違いについて解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
var、let、constの4つの違い
JavaScriptの変数を宣言するにはES5まではvarの一つだけでしたが、ES6になって以降letとconstが新たに追加されました。
var、let、constにはそれぞれ明確な違いがあり、その違いに基づいて変数宣言をする際に使い分けることができます。
それぞれの違いについて下記の表にまとめました。
| ホイスティング | 再宣言 | 再代入 | スコープ | |
|---|---|---|---|---|
| var | あり | ○ | ○ | 関数スコープ |
| let | なし | × | ○ | ブロックスコープ |
| const | なし | × | × | ブロックスコープ |
現在のWeb開発ではvarは非推奨の書き方になります。変数宣言をする時にはletまたはconstのどちらかを使うようにしましょう。
ホイスティング
| ホイスティング | |
|---|---|
| var | あり |
| let | なし |
| const | なし |
1つ目の違いはホイスティングがされるか、されないかです。
ホイスティングとは、変数の宣言をコードが実行する前にメモリ上に記憶しておくことをいいます。
通常変数が宣言される前にその変数を参照しようとすると、その変数はまだ宣言されてないよ！というエラーが返ってきますが、ホイスティングでメモリ上に変数が記憶されているため参照することができてしまいます。
このことからホイスティングは、宣言の巻き上げと呼ばれています。
varはホイスティングされるため、変数を宣言する前に参照することができてしまいますが、letとconstはホイスティングされないため、変数を宣言する前に参照するとエラーを表示してくれます。
console.log(sample1); // -> undefined
console.log(sample2); // -> ReferenceError: Cannot access 'sample2' before initialization
console.log(sample3); // -> ReferenceError: Cannot access 'sample3' before initialization
var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";再宣言
| 再宣言 | |
|---|---|
| var | ◯ |
| let | × |
| const | × |
2つ目の違いは変数を再宣言することができるか、できないかです。
varは変数を再宣言することができますが、letとconstを再宣言するとコンソールにエラーが表示されます。
var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";
var sample1 = "サンプル1-1"; // -> 再宣言可能
let sample2 = "サンプル2-1"; // -> Uncaught SyntaxError: Identifier 'sample2' has already been declared
const sample3 = "サンプル3-1"; // -> Uncaught SyntaxError: Identifier 'sample3' has already been declared再代入
| 再代入 | |
|---|---|
| var | ◯ |
| let | ◯ |
| const | × |
3つ目の違いは、一度宣言された変数に対して値を代入することができるか、できないかです。
varとletは一度宣言された変数に対して値を何度も代入することができますが、constは一度代入された値を更新することができません。
var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";
sample1 = "サンプル1-1"; // -> 再代入可能
sample2 = "サンプル2-1"; // -> 再代入可能
sample3 = "サンプル3-1"; // -> Uncaught TypeError: Assignment to constant variable.スコープ
| スコープ | |
|---|---|
| var | 関数スコープ |
| let | ブロックスコープ |
| const | ブロックスコープ |
4つ目の違いは変数の参照できる範囲を表すスコープです。
varは関数スコープのため、ブロックスコープ内で変数を宣言しても外部から参照することができてしまいます。letとconstはブロックスコープのため、ブロックスコープ内で宣言された変数は外部からの参照を防ぎます。
if (true) {
var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";
}
console.log(sample1); // -> サンプル1
console.log(sample2); // -> Uncaught ReferenceError: sample2 is not defined
console.log(sample3); // -> Uncaught ReferenceError: sample3 is not defined
