ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の `var`、`let`、および `const` の違い: 簡単な説明

JavaScript の `var`、`let`、および `const` の違い: 簡単な説明

WBOY
リリース: 2024-09-03 17:16:00
オリジナル
1008 人が閲覧しました

あなたが家を整理しているところを想像してみてください。 JavaScript の各タイプの変数 (var、let、const) は、内容を保存できるさまざまな種類のスペースのように機能します。これが日常のアイテムとどのように適合するのか、さらにわかりやすくするためにコード例を見てみましょう!

1. var – 乱雑な引き出し

var は、さまざまなものが詰め込まれ、少し整理されていない、乱雑なキッチンの引き出しのようなものだと考えてください。そこには何でも入れることができ、キッチンのどこにいてもいつでもアクセスできます。

仕組み:

  • キッチンのどこからでもアクセス可能: シンクやコンロの近くにいるかどうかは関係ありません。いつでもその引き出しを開けて、中にあるものを取り出すことができます。
  • 物が乱雑: 引き出しに何かを入れてから、同じ名前の別のものを入れようとすると、すべてが混ざって機能しますが、混乱する可能性があります。
// Example of var
var item = "Mug";
console.log(item); // Prints "Mug"

var item = "Plate"; // Allows redeclaration
console.log(item); // Now prints "Plate"
ログイン後にコピー
  • 実際の例: 靴下を引き出しに入れましたが、忘れて同じ種類の別の靴下を入れました。靴下がごちゃ混ぜになってしまい、どっちがどっちだかわかりません

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

2. let – 整理されたツールボックス

ここで、let をよく整理されたツールボックスとして考えてみましょう。ツールはそこにありますが、ツールボックスを開いたときにのみアクセスできます。これらは特定の場所に保存されているため、適切なツールボックスを開いて見つける必要があります。

仕組み:

  • ツールボックス内でのみアクセス可能: ツールはツールボックス内にきちんと保管されており、ツールボックスを開いたときにのみ使用できます。
  • 整理整頓の改善: 同じ工具箱にドライバーを入れてから、同じ種類の別のドライバーを入れようとしても、それぞれの工具には独自の場所があるため、入れられません。
// Example of let
let tool = "Screwdriver";
console.log(tool); // Prints "Screwdriver"

tool = "Hammer"; // Can reassign the value
console.log(tool); // Now prints "Hammer"

// let tool = "Hammer"; // This would cause an error, as you cannot redeclare
ログイン後にコピー
  • 実際の例: 家具を組み立てている場合、ドライバーは工具箱を開けたときにのみ現れ、閉じると元に戻ります。最初にツールボックスを開かないと、ツールにアクセスできません。

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

3. const – 鍵のかかった金庫

const を安全なものとして考えてください。中に何かを入れるとロックされたままになり、変更できません。硬貨を並べ替えるなど、金庫内の物を並べ替えることはできますが、金庫自体は最初に入れたものでロックされたままになります。

仕組み:

  • 永遠にロック: 宝物などの物を金庫に入れると、中のコインを並べ替えることはできますが、金庫にコインを入れたという事実は変更できません。
  • 変更に対する保護: 宝物を別のものに置き換えようとしても、金庫はそれを許可しません。
// Example of const
const safe = "Jewels";
console.log(safe); // Prints "Jewels"

// safe = "Money"; // This would cause an error, as you cannot reassign const

const coins = [1, 2, 3];
coins.push(4); // This is allowed
console.log(coins); // Prints [1, 2, 3, 4]
ログイン後にコピー
  • 実際の例: 金庫に宝石を入れたと想像してください。宝石を並べ替えることはできますが、金庫の目的がそれらの宝石を保管することであるという事実は変更できません。

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

すべてを一緒に比較する

  • var は乱雑な引き出しのようなものです。そこには何でも入れることができ、いつでもアクセスできますが、注意してください。物事は簡単に混同されます。
    • 例: 同じ変数をエラーなしで複数回宣言します。
  • 整理されたツールボックスのようなものです。ツールボックスを開いたときにのみツールにアクセスできるため、すべてがより整理された状態になります。
    • 例: let 変数は再割り当てできますが、再宣言はできません。
  • const は鍵のかかった金庫のようなものです。一度そこに保存したものは交換できませんが、内容を変更することはできます。
    • 例: const 変数は変更できませんが、そこに格納されている配列内の項目は変更できます。

結論

コーディングを行うときは常に、これらの変数を家を整理するためのさまざまな方法として考えてください。状況が変化する可能性がある状況には let を使用し、保護する必要がある値には const を使用します。可能な場合は var を避けてください。これは便利ですが、引き出しが乱雑になるように混乱を招く可能性があります!

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

以上がJavaScript の `var`、`let`、および `const` の違い: 簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート