JavaScript における var、let、const の違いの詳細な説明

JavaScriptで変数を宣言する方法としては、 var 、 let 、 constがあります。 letとconst es6で追加された新しいコマンドです。では、それらの違いは何でしょうか?

まずは、3つの違いについて全体的に見ていきましょう。詳しく紹介する前に、var、let、constの違いを主に以下の点から分析します。

• グローバル変数として使用した場合の違い
• 可変巻上げ
• 一時的なデッドゾーン
• ブロックスコープ
• 重複したステートメント
• 宣言された変数を変更する

グローバル変数として

ES5では、トップレベルオブジェクトのプロパティはグローバル変数と同等です。var var宣言された変数は、グローバル変数であると同時にトップレベル変数のプロパティでもあります。

ただし、 ES6でletで宣言された変数はグローバルにアクセス可能ですが、トップレベル変数のプロパティとしてはアクセスできません。また、 constで宣言された定数もトップレベル変数では使用できません。

可変ホイスト

varで宣言された変数は昇格され、宣言される前に変数を呼び出すことができ、値は未定義です。

letとconstには変数の昇格はありません。つまり、宣言した変数は宣言後に使用する必要があります。そうでない場合はエラーが報告されます。

 console.log(a) // undefinedvar a = 1console.log(b) // 初期化前に 'b' にアクセスできませんlet b = 2console.log(c) // 初期化前に 'c' にアクセスできませんconst c = 3console.log(a) // undefined
変数a = 1

console.log(b) // 初期化前に 'b' にアクセスできません
b = 2とする

console.log(c) // 初期化前に 'c' にアクセスできません
定数c = 3

一時的なデッドゾーン

var一時的なデッドゾーンはありません

letとconstには一時的なデッドゾーンがあります。変数は、変数を宣言するコード行が実行された後にのみ取得および使用できます。

実は、これは前回の変数改善から拡張された差です。 varで宣言された変数は昇格されるため、宣言前に変数値がundefinedであってもエラーは報告されず、一時的なデッドゾーンは発生しません。スコープの開始前または開始後、変数または定数が宣言される前にletまたはconstを使用すると、エラーが報告されます。この領域は一時的なデッド ゾーンとも呼ばれます。

同上：

 console.log(a) // 未定義
変数a = 1

console.log(b) // 初期化前に 'b' にアクセスできません
b = 2とする

console.log(c) // 初期化前に 'c' にアクセスできません
定数c = 3

ブロックスコープ

varブロックスコープ内に存在しません

letとconstはブロックスコープを持つ

{ var a = 2}console.log(a) // 2{ let b = 2}console.log(b) // キャッチされない ReferenceError: b は定義されていません{ const c = 2}console.log(c) // キャッチされない ReferenceError: c は定義されていません

重複したステートメント

var同じスコープ内で繰り返し宣言することができ、後で宣言された変数は前の変数宣言を上書きします。

letとconst同じスコープ内で繰り返し宣言することはできません

変数a = 10
var a = 20 // 20

b = 10とする
let b = 20 // 識別子 'b' はすでに宣言されています

定数c = 10
const c = 20 // 識別子 'c' はすでに宣言されています

宣言された変数（定数と変数宣言）を変更する

varとlet変数を宣言し、宣言された変数は変更できる。

const読み取り専用の定数を宣言します。一度宣言すると、定数の値は変更できません。ただし、参照データ型の場合、 JavaScriptの変数または定数はデータの保存アドレスを格納することに注意してください。定数の参照が直接変更されない限り、定数が指すオブジェクトのプロパティを変更することは可能です。

変数a = 10
= 20 です
コンソールログ(a) // 20

b = 10とする
20 です
コンソール.log(b) // 20

定数c = 10
c = 20 // キャッチされない TypeError: 定数変数への代入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。