varとletとconstとは何ですか?どのような地獄これらの3つの違いですか?

ES 2016は変数を宣言する2つの新しいメソッドを持っていました.let and const . その前に、開発者はvar (私は彼らに悪いことは、冗談ではない).
それで、ここでキャッチは何ですか?変数を宣言するには3つの方法がありますか?JavaScriptはすでに十分混乱していませんでした、そして、現在、彼らはそれをより混乱させています.
我々が理解する前にvar and let/const コンピュータサイエンスの概念を理解する必要があるscope .

機能範囲対ブロック範囲

JavaScriptは2種類のスコープI . E関数スコープとブロックスコープが付属しています.両者の違いを見てみましょう.

機能範囲

function myFn() {
  var foo = 'peekaboo!';

  console.log(foo); // 'peekaboo!'
}

console.log(foo); // ReferenceError: foo is not defined

変数は関数の可視性が制限されているため、varを使用するときに機能します.関数の外部で利用しようとするとエラーが発生します.

ブロックスコープ

if (true) {
  var foo = 'peekaboo!';
  let bar = 'i see u';
  const baz = 'baby blue!';

  console.log(foo); // 'peekaboo!';
  console.log(bar); // 'i see u';
  console.log(baz); // 'baby blue!';
}

console.log(foo); // 'peekaboo!';
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined

FOOの可視性がif文ブロックによって制限されないことに注意してください.しかし、両方ともbar and baz 可視化はコードのブロックに制限されます.
スコープのこの概念は、旧式の間で最も顕著な区別ですvar モダンlet/const .

ソース

var

次のコードスニペットを見てみましょう

for (var i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

以下のプログラムの出力は何でしょうか?
あなたが言うならば

//0
//1
//2
//3

それから、あなたは絶対に正しいです.
変数i はforループの外でアクセス可能です.VARで定義された変数がブロックスコープではなく関数スコープを持っているので、これは期待されます.
それがとてもクールであるならば、VARを使用することに関する問題は何ですか?なぜ我々はそれを使用していないのですか?
以下の例を使います.

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }

    console.log(greeter) // "say Hello instead"

だからtimes > 3 リターンtrue , Greeterは「代わりにhello」と再定義されます.Greeterを再定義したい場合は、問題はありませんが、変数greeterが既に定義されていることを認識しない場合は問題になります.
あなたのコードの他の部分でgreeterを使用しているなら、あなたが得るかもしれない出力に驚くかもしれません.これはおそらくあなたのコードにたくさんのバグを引き起こします.これがletとconstが必要な理由です.
素人用語で.var 再定義することができますし、値も変更することができますか?
だからShubhra、我々は何を生産コードのような失策から自分自身を保存するために行うことができます?
さて、心配しないでください、JavaScript Headquatersの人々は、あなたがこの問題を抱えているということを知っていて、すでにこれの解決をしました.
ここに来るlet 日を保存する.

レット

多くの方法でlet いとこのようだvar . それは多くの類似点を持っていますが、ES 2016をより現代の感情言語にする方法で区別します.
例を挙げましょうvar

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

今回は、出力はどうなると思いますか?よく言えば

//0
//1
//2
//ReferenceError: i is not defined

それから、あなたは運がいいです.
ヘイShubhraならばlet いとこはvar では、なぜそれが未定義ですか?
そう言わせて下さいlet はブロックされたスコープではなく、関数スコープのスコープです.

レットを更新することができますが、再宣言することはできません。

まさにvar , と宣言された変数let スコープ内で更新できます.Unlike var , エーlet 変数はスコープ内で再宣言できません.そのため、次のように動作します.

    let greeting = "say Hi";
    greeting = "say Hello instead";

エラーを返します.

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

ただし、同じ変数が異なるスコープで定義されている場合、エラーは発生しません.

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

なぜエラーがないのですか?これは、両方のインスタンスが異なるスコープを持つため、異なる変数として扱われるためです.
この事実はlet より良い選択var . 使用する場合let , 変数のスコープ内で変数が存在する前に変数の名前を使用している場合は、面倒をする必要はありません.
また、変数がスコープ内で1回以上宣言できないため、var は起こりません.

コンスト

キーワードconst 定数の省略形です.同様let , それはブロックスコープですが、それを再割り当てすることはできません.
このコードの出力は何ですか?

const myBoolean = true;

if (myBoolean) {
  const turtles = [
    'leonardo',
    'donatello',
    'michaelangelo',
    'raphael'
  ];
  // turtles = turtles.concat('Shredder');  // 🙅‍♀️ this would throw an error

  console.log(turtles);
}

console.log(turtles);

出力

// ['leonardo', 'donatello', 'michaelangelo', 'raphael']
// ReferenceError: turtles is not defined

だってconst このシナリオでは転送されませんが、項目はまだ配列やオブジェクトにリンクするconst変数に追加できます.
これは別のブログのトピックです.後で議論します.

結論

関数スコープはブロックスコープとして明白ではないので、var . ES 2016 - 2019の目的は置き換えられるように見えますvar with let/const より良いコード習慣を奨励するので.
変数を構築する必要がある場合は、通常constを使うべきです.あなたが知っているか、あなたがそれを再利用する必要があると疑うならば、代わりに、Letを使用してください.