[JS]JavaScript中級教程(feat.コード鞍馬)-変数(var、let、const)

アプリケーション起動プロジェクトと、後で学習するTypeScript,Nest.jsのためにJavaScript文法で混同されている点がいくつかありますが、youtube coding anmaの講義でまとめたいと思います.
今回のPostingでは変数の混同部分を整理してみました

(1) var vs let

varは、宣言された変数を再宣言できます.しかしletは宣言した変数を再宣言することはできません.

var name = "Mike";
console.log(name);  // Mike

var name = "Jane";
console.log(name);  // Jane

let name2 = "kanguk";
console.log(name2);  // kanguk

let name2 = "jason";
console.log(name2);  // Error!

varは、宣言前に使用できます.(エラーx)
しかしletはReferenceErrorを生成する.

console.log(name);  // undefined
var name = "Mike";

理由は、上記のコードが次のように動作しているからです.

var name;
console.log(name);  // undefined 
name = "Mike";   // 할당

コードは実際には上昇していませんが、その動作は一番上に上昇したようです.
これを護衛と言います.
Hoisting:Scopeの内部のどこでも、変数宣言は最上位に宣言されているように表現されます.
また、上記のコードはコンソールにundefinedを出力します.宣言はエスケープになりますが、割り当てはエスケープになりません.名前の変数のみがアップロードされ、Mikeという値はその場にあります.
同じ場合、letにエラーが発生します.letやconstもvarのように昇格しますが、なぜvarのように動作しないのでしょうか.原因はTDZ!

(2)HoistingとTDZ

TDZはTemporal Dead Zoneの略です.

TDZの変数は使用できません.letとconstはTDZの影響を受ける.つまり、配るまでは使えません.

TDZは、コードを予測し、潜在的なエラーを低減することができる.

let age = 30;

function showAge() {
	console.log(age); 
}

showAge();   // 30

上のコードは問題を起こさない.次のケースを見てみましょう.

let age = 30;

function showAge() {
	console.log(age); 
  	let age = 20;
}

showAge();   

次のコードで問題が発生します.原因を見てみましょう.
存在はScope単位で発生する.

上記のコードではscopeは関数内部を指します.letで宣言された2番目のage変数は、昇格を引き起こします.吊り下げが発生していない場合、結果値は30と表示されます.

(3)変数の生成と定義

1.宣言フェーズ
2.初期化フェーズ
3.割当手順

1) var

varは宣言と初期化を同時に行う.したがって、割り当ての前に呼び出すと、エラーが発生しず、未定義のものが出力されます.
(この場合、初期化はUndefindを割り当てるステップと見なすことができます)

2) let

letは宣言と初期化によって別々に行われる.昇格すると宣言フェーズが行われますが、初期化フェーズは実際のコードに到達したときに行われるため、Reference Errorが発生します.

3) const

constは宣言と割り当てを同時に行う必要があります.したがって、次のコードにエラーが発生します.

let name;
name = 'Mike';

var age;
age = 30;

const gender;   // 에러 발생!
gender = 'male';

エラーの原因は、宣言時に割り当てられなかったためです.
したがって、上のコードは「const性別=男性」です.に変更する必要があります.

(4)スキャン(scope)

スコフは韓国語で「範囲」と訳した.すなわち,スタンダードは「変数に近い範囲」といえる.
var:関数スキャン(function-scoped)
let,const:ブロックスキャン(block-scoped)(関数,if文,for/while文try/catch文)

const age = 30;
if (age > 19) {
	var txt = "성인"; 
}
console.log(txt);  // 성인

例をあげましょう上記のコードでif文内で宣言されたvar変数はif文の外でも使用できます.しかしletとconstはvarのように使用できません.letとconstはブロック内でしか使用できません.これをblock-scopeと呼びます.

function add(num1, num2) {
	var result = num1 + num2;  
}
add(2,3);
console.log(result);

varが関数内で宣言されている場合は、関数外では使用できません.つまり、唯一抜け出すことができないスコフは関数だと考えることができます.
Scopeの詳細については、以下のリンクを参照してください.
https://velog.io/@mgm-dev/%EC%8A%A4%EC%BD%94%ED%94%84%EB%9E%80-%EB%AD%98%EA%B9%8C
これらの変数を混同する概念を整理した.後でvarは使わないで、constとletを使ったほうがいいです.予測可能な結果を生み出すことができるので、エラーを減らすことができます!
(このポスターの内容はyoutube coding anmaのビデオを参考にしています)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4