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 共通スタイルで二重矢印を描画するサンプルコード

推薦する

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

nginx-ingress-controller ログ永続化ソリューションのソリューション

最近、nginx-ingress-controller のアプリケーションについて説明した公開アカウ...

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

ノードを使用して静的ファイルキャッシュを実装する方法

目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...

本をめくる効果を実現するネイティブJS

この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...

反応ジャンプ後にルートが変更されてもページが更新されない場合の解決策

目次質問解決質問この問題には多くの理由があるようです。私の問題は、パラメータ付きのURLを更新できな...

koa2 サービスに SSL を設定する方法

I. はじめに1: SSL証明書私のドメイン名は Tencent Cloud にあります。第 3 レ...

nginx における proxy_pass のさまざまな使用法の詳細な説明

目次プロキシ転送ルール最初のもの: 2番目のタイプ: 3番目のタイプ: 4番目のタイプ: 5番目:プ...

nginx proxy_cache キャッシュ設定の詳細な説明

序文:私は仕事柄、オンラインライブストリーミングの分野に携わっており、ビデオの再生やダウンロードには...

CentOS に MySQL をインストールしてリモート アクセスを設定する方法

1. MySQLリポジトリソースをダウンロードする$ wget http://repo.mysql....

MySQL における in と exists の違いの詳細な説明

1. 事前に準備する便宜上、ここで 2 つのテーブルを作成し、そこにいくつかのデータを追加します。果...

MySQL 5.7.21 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

Vue のクロスドメイン問題の処理と解決策の概要

ネットワークリクエストを送信すると、次の保存情報が表示されます。おめでとうございます。ドメインを越え...