JavaScript の「let」と「var」の違いを理解する

Arthur Petit
2024年6月5日水曜日 23:54:41
JavaScript

JavaScript での変数宣言の把握

JavaScript の世界では、クリーンで効率的なコードを作成するには、let と var の違いを理解することが重要です。 ECMAScript 6 で導入された let ステートメントは、変数宣言に新しい次元を追加し、変数のスコープをより詳細に制御できるようになるとよく説明されています。

両方とも させて そして 変数 は変数の宣言に使用されますが、コードに大きな影響を与える可能性のある異なる動作を示します。この記事では、これらの違いを検討し、いつ使用するかについてのガイダンスを提供します。 させて の代わりに 変数。

指示 説明
var 変数を宣言し、オプションで変数を値に初期化します。これは関数スコープまたはグローバルスコープであり、再宣言および更新できます。
let ブロックスコープのローカル変数を宣言し、オプションで値に初期化します。同じスコープ内で再宣言することはできません。
const ブロックスコープの読み取り専用定数を宣言します。これは宣言時に初期化する必要があり、再割り当てすることはできません。
writeHead Node.js で HTTP 応答のステータス コードとヘッダーを設定します。
createServer リクエストをリッスンして応答できる HTTP サーバーを Node.js に作成します。
listen 指定されたポートで受信接続の待機を開始するようにサーバーを設定します。
console.log メッセージをコンソールに出力します。デバッグの目的に役立ちます。

実際の「let」と「var」の違い

フロントエンド スクリプトの例は、次のフロントエンド スクリプトの主な違いを示しています。 そして 。の中に 関数、変数 var x if ブロック内で宣言され、関数スコープ全体で同じ変数を再割り当てします。これにより、両方のコンソール ログに 2 が出力され、どのように行われるかを示します。 ブロックのスコープを考慮しません。対照的に、 関数が宣言する if ブロックの内側と外側の両方。の let ブロック内の宣言は別の変数であるため、ブロックのスコープに応じて、最初のコンソール ログは 2 を出力し、2 番目のコンソール ログは 1 を出力します。

バックエンド Node.js の例では、これらの違いをさらに示すために、単純な HTTP サーバーをセットアップします。使用する if ブロック内で、次のことがわかります。 外側を上書きします 関数スコープによる変数。の let message ブロック内はそのブロックに対してローカルのままで、ブロックごとに異なるメッセージを出力することでブロックのスコープを示します。の用法 そして コマンドはサーバーを確立し、サーバーはクライアントに応答を書き込み、実際のアプリケーションを示します。 そして let 現実世界のシナリオでは。

JavaScript の「let」と「var」の区別

フロントエンド JavaScript の例

// Example demonstrating the difference between 'var' and 'let'
function varTest() {
    var x = 1;
    if (true) {
        var x = 2;  // same variable
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let y = 1;
    if (true) {
        let y = 2;  // different variable
        console.log(y);  // 2
    }
    console.log(y);  // 1
}

varTest();
letTest();

「let」と「var」によるスコープを理解する

バックエンド Node.js の例

// Backend example using Node.js to demonstrate 'let' and 'var'
const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    var count = 10;
    let message = "The count is: ";

    if (true) {
        var count = 20;  // 'count' is hoisted and overwritten
        let message = "New count is: ";  // block-scoped
        res.write(message + count);  // New count is: 20
    }
    res.write(message + count);  // The count is: 20
    res.end();
}).listen(8080);

console.log('Server running at http://127.0.0.1:8080/');

範囲とホイストの詳細

比較する際に考慮すべきもう 1 つの重要な側面 そして 吊り上げています。ホイスティングは、宣言を現在のスコープの先頭に移動する JavaScript の動作です。と 、変数はホイストされ、次のように初期化されます。 undefined変数が宣言前に使用されると、予期しない結果が生じる可能性があります。対照的に、 も巻き上げられますが、初期化されません。これは、にアクセスすることを意味します。 変数を宣言する前に実行すると、 。

さらに、 ループ内のクロージャーに関する問題を防ぐのに役立ちます。使用するとき ループでは、すべての反復が同じ変数を参照するため、バグが発生する可能性があります。しかし、 反復ごとに新しいバインディングを作成し、各ループ反復が独自のスコープを持つようにします。この動作により、 let ループ内で変数を宣言するための、より安全で予測可能な選択肢です。

  1. JavaScript におけるホイスティングとは何ですか?
  2. ホイスティングは、宣言を現在のスコープの先頭に移動する JavaScript のデフォルトの動作です。 宣言はホイストされ、次のように初期化されます。 、 その間 宣言は巻き上げられますが、初期化されません。
  3. を使用するとどうなりますか 変数を宣言する前に?
  4. にアクセスする 変数の宣言が結果を返す前に、 。
  5. できる そして 同じスコープ内で再宣言されますか?
  6. いいえ、 同じスコープ内で再宣言することはできませんが、 同じスコープ内で再宣言できます。
  7. なぜですか ループ内での方が望ましいですか？
  8. ループの反復ごとに新しいバインディングを作成し、各ループ反復が独自のスコープを持つようにします。これにより、クロージャに関連する一般的なバグが防止されます。
  9. する ブロックスコープを尊重しますか？
  10. いいえ、 ブロックのスコープを考慮しません。それは関数スコープまたはグローバルスコープです。
  11. 時間的デッドゾーンとは何ですか?
  12. 一時的デッド ゾーンは、スコープに入ってから変数が実際に宣言されるまでの時間であり、この間に変数にアクセスします。 変数は 。
  13. できる ～と同様に使用される ?
  14. はい、 のようなブロックスコープです ですが、再割り当てすべきではない変数を宣言するために使用されます。
  15. いつ行うべきか 使い古される ?
  16. 以上に使用する必要があります ブロックスコープが必要な場合、および変数のホイスティングとクロージャーの問題を回避するために。

変数宣言に関する最終的な考え方

結論としては、 ECMAScript 6 では、JavaScript での変数宣言のためのより堅牢なツールが開発者に提供されました。の違いを理解する そして これは、よりクリーンで保守しやすいコードを作成するために不可欠です。その間 var 特定の状況ではまだ役立つかもしれませんが、 スコープとホイスティングの制御が向上し、バグの可能性が減ります。

選択することで 以上 適切なシナリオでは、開発者はブロック スコープを利用して、変数の宣言と巻き上げに関連する一般的な落とし穴を回避できます。この知識は、最新の JavaScript 開発を習得したい人にとって基礎となります。