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): テーブル ヘッダー

推薦する

Linux で yum と入力した後に -bash: /usr/bin/yum: No such file or directory という問題を解決する方法

Linuxでyumを入力すると、プロンプトが表示されます: -bash: /usr/bin/yum:...

Webフロントエンド開発コース Webフロントエンド開発ツールとは

インターネット技術の発展に伴い、ユーザーはますます Web ページに依存するようになり、Web フロ...

ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を...

MySQL 分離レベルの詳細な説明と例

目次MySQL の 4 つの分離レベルデータ テーブルを作成します。分離レベルの設定物事の分離レベル...

MySQL は ACID トランザクションをどのように実装しますか?

序文最近、面接中に、MySQL の InnoDB エンジンがどのようにトランザクションを実装している...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

Vue+js 矢印をクリックして画像を切り替える

この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...

MySQL 自動インクリメント ID のオーバーサイズ問題のトラブルシューティングと解決策

導入Xiao A がコードを書いていたところ、DBA Xiao B が突然、「急いでユーザー固有情報...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

フィルターを使用して画像に透明な CSS を書く方法

フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

html+css3で実装されたログインインターフェース

成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...

Vueは、センシティブな単語フィルタリングコンポーネントを検出するためのさまざまなアイデアを実装しています。

目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...

MySQL のスロークエリの方法と例

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル

MySql データベース システムをインストールして構成します。 1. ダウンロード http://...