JavaScript における var と let の違い

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptのvar let constの違いは何ですか?
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JavaScript の var と ES6 仕様の let と const の違いと使い方を詳しく解説
  • JavaScript の let、var、const キーワードの違いを理解する
  • js の let と var 宣言変数の違いの詳細な説明
  • JavaScript における var、let、const の違いの簡単な分析

<<:  MySQL で重複行を見つけて削除する方法

>>:  CSS 共通スタイルで二重矢印を描画するサンプルコード

推薦する

Vue-Routerのインストールプロセスと原理の詳細

目次1. フロントエンドルーティングの実装原則2. vue-Routerの基本的な使い方2.1. イ...

CSS 完全な視差スクロール効果

1. 何ですか視差スクロールとは、複数の背景レイヤーを異なる速度で動かすことで、3次元のモーション...

Fabric.js は DIY ポストカード機能を実装します

この記事では、DIYポストカード機能を実現するためのfabricjsの具体的なコードを参考までに共有...

JavaScript スロットリングとアンチシェイクに関する簡単な説明

目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...

MySql のスロークエリ分析とスロークエリログの開き方の詳細説明

最近はMySQLのパフォーマンス最適化についても研究しているので、今日の投稿は勉強ノートとしても使え...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...

Linuxでディスクをマウントする方法

仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...

ファイルのアップロードの進行状況を示す React の例

目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...

HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...

js を使用してファイルが UTF-8 でエンコードされているかどうかを判断する方法

従来の解決策FileReader を使用して UTF-8 形式のファイルを読み取り、ファイルの内容に...

シンプルなショッピングカートの最も完全なコード分析を実装する JavaScript (ES6 オブジェクト指向)

この記事では、シンプルなショッピングカートを実装するためのJavaScriptの具体的なコードを参考...

VueはOpenLayersを使用してTiandi MapとAmapを読み込み

目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...

HTML マルチメディア アプリケーション: Web ページにフラッシュ アニメーションと音楽を挿入する

1. HTML_falshアニメーションでのマルチメディアの応用(WebページへのFlashアニメー...

img usemap 属性 中国地図リンク

HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性も...

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...