📖 var, let, const

var、let、const
今回のpostingではvarとlet,constを整理します.😊
💡 以前に使用したvarとES 6で新しく登場したキーワードletとconstの違いを主とする.
var vs let, const
既存のES 6を導入する前にvarのみが変数宣言キーワードとして存在した.ではconstとletが登場する背景は何でしょうか.varで解決しにくい問題は何ですか?
1. scope
varとlet、constの最大の違いの一つはscopeです.scopeは多くの言語に存在する概念であり、指標識別子の有効な範囲である.
var
まずvarのscopeを見てみましょう.JavaScriptでは、varはブロックレベルのscopeではなく関数レベルのscopeのみを受け入れます.すなわち,関数のコードブロックのみが領域scopeとして認定される!
したがって、関数ではないif文やfor文で宣言された変数もグローバル変数になります.次のコードを見てみましょう.

var x = 1;

if (true) {
  var x = 10 // 블록 scope가 인정되지 않는다.
}
console.log(x); // 10

for (var i = 0; i < 100; i++) {
  // do nothing
}
console.log(i); // 100

上記のコードを見ると、文ブロックで宣言されたxおよびforブロックで宣言されたiがグローバル変数として処理されている場合がわかります.
このようにvarを宣言すると、予期せぬ複数のグローバル変数が作成されます.コードが長くなり、複雑になると、予期せぬコードエラーが発生し、開発者が予期せぬエラーを発生する可能性があります.
let, const
letおよびconstキーワードは、ブロックレベルscopeを有することができる変数宣言方式である.

let x= 1;  // 전역변수
const y = 2;

if (true) {
  let x = 10 //지역변수
  const y = 20;
  console.log(x) // 10
  console.log(y) // 20
}

console.log(x); //1
console.log(y); // 2

上記のコード実行結果から,if文で宣言されたx,yは領域変数としてグローバルブロックで宣言されたx,yとは異なる.
letキーワードとして宣言された変数は、すべてのコードブロックを領域範囲と認定するブロックレベルscopeに従います.constもそうです.
2.変数加速
今回は変数反発の観点からvarとlet、constの違いを理解してみましょう.
var
varキーワードで変数を宣言すると、変数エスケープは変数宣言文をscopeのフロントエンドに昇格させます.
JavaScriptエンジンは、実行時までにコードを読み込み、メモリにvarとして宣言されたすべての変数を作成し、undefinedに初期化します.すなわち,宣言はエスケープであるが,割り当てはエスケープではない.

console.log(foo) // undefined
foo = 123
console.log(foo) /// 123
var foo;

上記のコードは、実際には変数宣言文の先頭部分であり、以下に示す.

var foo = undefined;
console.log(foo); // undefined
foo = 123;
console.log(foo) // 123

let
letも実行時までに宣言を実行し、変数反発を生成します.ただし、letはコードが変数宣言に達するまで初期化されず、変数にアクセスできません!
変数宣言に達するまでundefinedに初期化されません.

console.log(foo) 
// ReferenceError: Cannot access 'foo' before initialization
// var과 달리 선언문 전에 접근하려고 하면 error를 발생시킨다.

let foo; // 이 라인이 지나야 접근이 가능하다.
console.log(foo) // undefined

foo = 1;
console.log(foo) // 1

const
constの場合はletと同じですが、宣言と同時に初期化する必要がある点が異なります.

console.log(foo) // ReferenceError: Cannot access 'foo' before initialization

const foo = 1; // 여기에서야 변수가 초기화 됨
console.log(foo) // 1

しかし、constの最初のconsole.log(foo)行はReferenceError:Cannotaccess"foo"before初期化を生成するので、変数反発が発生すると判断できる.
++20-12-25追加!
実行コンテキストを学習すると,変数エスケープの原理をより容易に理解できる.△詳しい原理が気になる方は実行コンテキスト Postingを読んでください.
3.グローバルオブジェクト
varキーで宣言されたグローバル変数、グローバル関数、および宣言されていない変数に値を割り当てるデフォルトのグローバルは、グローバルオブジェクトウィンドウのPropertyになります.

var x = 1;
console.log(window.x); // 1
console.log(x); // 1

逆にletキーとconstキーで宣言されるグローバル変数は、グローバルオブジェクトのpropertyではありません.

let x = 1;
const y = 2;

console.log(window.x); // undefined
console.log(x); // 1

console.log(window.y); // undefined
console.log(y); //2

の最後の部分
letもconstもvarに存在する様々な問題を解決するためである以上、
ES 6はvarではなくletとconstを使います!