JavaScriptのvar let constの違いは何ですか?

JavaScriptのvar let constの違いは何ですか?

1. 繰り返し宣言

var は繰り返し宣言をサポートしますが、let と const は繰り返し宣言をサポートしません。

1.1 変数

var a = 1;
var a = 2;
コンソールにログ出力します。

出力:

2

1.2 しましょう

b = 3 とします。
b = 4 とします。
コンソールログ(b);

出力:

キャッチされない構文エラー: 識別子 'b' はすでに宣言されています

1.3 定数

定数 c = 5;
定数 c = 6;
コンソールログ(c);

出力:

キャッチされない構文エラー: 識別子 'c' はすでに宣言されています

2. 可変プロモーション

var は変数の昇格をサポートしますが、宣言のみを昇格し、値は昇格しません。 let と const は変数の昇格をサポートしていません。

2.1 変数

2 = 2;
コンソールにログ出力します。
var a = 1;

出力:

2

2.2 しましょう

2 = 2;
コンソールにログ出力します。
a = 1 とします。

出力:

捕捉されない参照エラー: index.html:28 で初期化する前に 'a' にアクセスできません

2.3 定数

2 = 2;
コンソールにログ出力します。
定数a = 1;

出力:

捕捉されない参照エラー: index.html:28 で初期化する前に 'a' にアクセスできません

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

var には一時的なデッドゾーンはありませんが、let と const には一時的なデッドゾーンがあります。
let と const がスコープ内に存在する限り、それらが宣言する変数または定数は自動的にこの領域に「バインド」され、外部スコープの影響を受けなくなります。

3.1 変数

var a = 1;
関数fun() {
    コンソールにログ出力します。
    var a = 2;
}
楽しい();

出力:

未定義

3.2 しましょう

a = 1 とします。
関数fun() {
    コンソールにログ出力します。
    a = 2 とします。
}
楽しい();

出力:

捕捉されない参照エラー: 初期化前に 'a' にアクセスできません

3.3 同意

a = 1 とします。
関数fun() {
    コンソールにログ出力します。
    定数a = 2;
}
楽しい();

出力:

捕捉されない参照エラー: 初期化前に 'a' にアクセスできません

4. ウィンドウオブジェクトのプロパティとメソッド

グローバル スコープでは、var で宣言された変数と function で宣言された関数は、自動的に window オブジェクトのプロパティとメソッドになります。

var a = 1;
関数 add() { };
コンソールにログ出力します。
console.log(window.add === 追加);

出力:

真実
真実

5. ブロックスコープ

var にはブロックレベルのスコープはありませんが、let と const にはブロックレベルのスコープがあります。
varを使用して for ループ内の変数 i を定義します。

(var i = 0; i < 3; i++) の場合 {
    // コンソールログ(i);
}
コンソールにログ出力します。

出力:

3

letを使用して for ループ内の変数 i を定義します。

(i = 0; i < 3; i++ とします) {
    // コンソールログ(i);
}
コンソールにログ出力します。

出力:

キャッチされない参照エラー: i が定義されていません

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

以下もご興味があるかもしれません:
  • JavaScript における var、let、const の違いの詳細な説明
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JavaScript の var と ES6 仕様の let と const の違いと使い方を詳しく解説
  • JavaScript の let、var、const キーワードの違いを理解する
  • JavaScript ES6 構文における let、const、var の違い

<<:  Dockerコマンドの自動補完の実装

>>:  HTML テーブル マークアップ チュートリアル (14): テーブル ヘッダー

推薦する

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...

DockerでMySQLコンテナを作成する簡単な手順

序文すでに Docker をインストールしており、Docker について簡単に理解しています。ここで...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

js 日付と時刻のフォーマット方法の例

js 日付時刻形式日付と時刻を指定された形式に変換します。例: YYYY-mm-dd HH:MM は...

Centos7 構成 fastdfs および nginx 分散ファイル ストレージ システムの実装プロセス分析

1. libfastcommon-1.0.43 をインストールします。インストール パッケージは h...

LinuxのCentos7でmysql5.7.29を構築する詳細なプロセス

1. MySQLをダウンロードする1.1 ダウンロードアドレスhttps://downloads.m...

単一のdivの正多角形変換を実現する純粋なCSS

前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...

Spring Boot + jar パッケージングのデプロイメント Tomcat 404 エラーの問題を解決する

1. Spring Boot は jsp jar パッケージをサポートしていません。jsp は wa...

Dockerコンテナオーケストレーション実装プロセス分析

実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

JavaScript オブジェクトの 3 つのプロパティ

目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...

CentOS 7.x dockerはoverlay2ストレージ方式を使用する

/etc/docker/daemon.json を編集し、以下を追加します。 { "ストレ...

CSS3 ベジェ曲線の例: リンクホバーアニメーション効果の作成

CSS3 アニメーション トランジションを使用して、リンクの上にマウスを移動すると小さなポップアップ...

時刻を保存するために適切な MySQL の datetime 型を選択する方法

データベースを構築してプログラムを書くとき、日付と時刻の使用は避けられません。データベースには、ti...

ベースタグとは何ですか? また、それは何をするのですか?

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトの...