JavaScript における var と let の違い

序文：

var JavaScript初めて登場したときから存在する変数宣言キーワードですが、let は ES6 で初めて登場した変数宣言キーワードです。この 2 つには間違いなく大きな違いがあります。では、具体的な違いは何でしょうか?

1. スコープはさまざまな形式で表現されます

varは関数スコープ、letはブロックスコープです

{
  var monkey = 'Xun Wukong';
  let pig='ポークチョップカバー';    
}
console.log(monkey); //出力は未定義
console.log(pig); //エラー: pig は定義されていません

上記のコードからわかるように、 letで宣言された変数は、それが配置されているコード ブロック内でのみ有効であり、コード ブロック外では無効でアクセスできません。一方、var で宣言された変数は、コード ブロックが配置されている関数スコープ内で有効です。

2. 変動昇進と非昇進の違い

var で宣言された変数はホイストされますが、let で宣言された変数はホイストされません。

console.log(monkey); //未定義
var monkey = 'Xun Wukong';

console.log(pig); //エラー: pig が定義されていません
let pig='ポークチョップカバー'; 

同じ論理に従うと、var で宣言された変数は宣言前に呼び出されると undefined として表示されるのに、let で宣言された変数は宣言前に呼び出されると例外をスローするのはなぜでしょうか。これが、変数の昇格における 2 つの違いです。var で宣言された変数は変数の昇格がありますが、let で宣言された変数は昇格しません。

では、変数の昇格とは何でしょうか? ここでは概念的な説明はしません。上記のコードは実際には次のコードと同等であるという私の個人的な理解のみを述べます。

var サル;

console.log(monkey); //未定義
猿 = 'Xun Wukong';

console.log(pig); //エラー: pig が定義されていません
let pig='ポークチョップカバー'; 

違いがわかりますか? var で宣言された変数は定義のスコープの先頭に抽出されますが、値は割り当てられません。割り当て操作はコード内に残っているため、 varで宣言された変数を呼び出すと、宣言されているが定義されていない変数であるため、呼び出しの結果はundefinedなります。これがいわゆる変数の昇格です。ただし、let によって定義された変数にはこのような変数の昇格はありません。

3. 一時的なデッドゾーンの違い

一時的なデッドゾーン: 変数がスコープ内にあり、外側のスコープ内に同じ名前の変数がある場合、その変数がスコープ内で変更されても、外側のスコープには影響しません。

具体的な性能は以下のとおりです。

(var i=0;i<5;i++){
    setTimeout(関数(){
        コンソールログ(i)
    },1000)
}
(i=0;i<5;i++とします){
  setTimeout(関数(){
     コンソールログ(i)          
  },1000)  
}

これら 2 つのコードを実行した結果は何でしょうか?

最初のコードの結果は、1 秒後に 5 が 5 つ順番に印刷されることです。2 番目のコードの結果は、1 秒後に 0、1、2、3、4 が順番に印刷されることです。

なぜこのような違いが存在するのでしょうか?

最初のコードの変数 i は var キーワードで宣言されているため、重大なデッド ゾーンはありません。つまり、1 秒後にsetTimeoutでアクセスする変数 i は、グローバル コンテキストの for ループの実行が終了した後の i であるため、印刷される結果はすべて 5 になります。

2 番目のコード内の変数 i は let キーワードで宣言されており、これが重大なデッド ゾーンを生み出しています。setTimeout setTimeoutの i 変数は、その時点で保存した i の値です。この保存間隔内の i は、同じ i 変数が外部にあり、異なる値が割り当てられているため、変更されません。以前保存した値のままです。これが一時的なデッド ゾーンの現れであり、2 番目のコードが実行後に 0、1、2、3、4 を順番に出力する理由でもあります。

4. 同じコンテキストでvarは繰り返し宣言できるが、letは繰り返し宣言できない。

let monkey='Xun Wukong';
let monkey = '逼马吻'; //エラー: 識別子 'a' はすでに宣言されています
var pig = 'ポークチョップカバー';
var pig = 'pig anal fissure'; //通常のアクセス、変数pigの値が置き換えられます

JavaScript の var と let の違いについての記事はこれで終わりです。JavaScript の var と let についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。