VAR、letとconstの違い-例で学ぶ


ES 6以降のJavaScriptの変数の宣言は、異なる方法で行うことができます.それらの最も著名な使用しているvar , let and const .

VARの基本的な例


以下の例を考えてください.
/* Example 1 */
x = 10;
function updatex() {
  x = 20;
}
updatex();
console.log(x); //20
/* Example 2 */
x = 10;
function updatex() {
  var x = 20;
}
updatex();
console.log(x); //10;
これらの例では、varとして宣言する変数が特定の関数へのスコープを制限することを確認しますupdatex() . varとして変数を宣言しないならば、それは世界的な範囲まで上がります.

varとletの例

var and let 自然に似ていますが、同じではありません.以下の例を考えてみましょう.
console.log(x); //undefined
console.log(y); //ReferenceError

var x = 10;
let y = 15;

この例では、プログラムで宣言される前にログ変数を操作しようとします.var 変数が未定義で、let 変数はキャッチされていない参照エラーをスローします.これは、巻上げのために起こります.
According to W3schools,

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).


この例ではvar 変数はブロックの先頭に置かれ、そこで宣言されますが、初期化されませんlet 変数はブロックの先頭に巻かれます(つまり、コードのブロックは変数を認識していますが、宣言されるまで使用できません).変数が初期化されるまで変数が使用されるまでの時間を一時的なデッドゾーンと呼ぶ.

letとconstの例


ここまで直接変数の宣言を見てきましたvar と使用let . さあ、見ましょうconst . 推測したようにconst 定数を表します.定数は、いったん宣言されて、初期化された変数が同じままで、代入を通して再宣言または変更できない変数です.これはconst 不変ですか?ではなく、後でそれをチェックします.まず、行動を見ましょうlet and const . 以下の例を考えてみましょう.
/* Example 1 */
// we've seen this before
x = 10; //ReferenceError
let x;
/* Example 2 */
y = 20;
const y; //SyntaxError
/* Example 3 */
y = 20; //ReferenceError
const y = 20;
例1を見ました.参照エラーをスローします.例2ではy Aであることconst 変数は宣言後、const 変数を直ちに初期化する必要があります.例3でこのケースをカバーするconst 変数を再宣言することはできませんし、再署名することもできません.だから宣言する適切な方法const 変数は以下のようになります:
const y = 20;
両方let and const 同じスコーププロパティを持ちます.Unlike var 変数let and const 変数はhoistedされますが、宣言されるまでは使えませんconst , 初期化.JSにおけるスコープの種類と変数の種類についての良い理解があるようになりましたconst 変数.

constの不変性


jsには2種類の変数があります.
  • Primitive types: undefined , null , boolean , number , string , and symbol
  • 参照型:object , array and function
  • Aを宣言するconst プリミティブへの変数は不変です.しかし、それが非原始的であるか参照型で初期化されるならば、それはconst 変数.いくつか例を挙げましょう.
    /* Example 1 */
    let arr1 = [10, 20];
    arr2 = [30, 40]; // No error
    
    const arr2 = [50, 60];
    arr2 = [70, 80]; // SyntaxError, redeclaraion
    
    /* Example 2 */
    const arr2 = [50, 60];
    arr2[0] = 70;
    arr2[1] = 80;
    console.log(arr2); // [70, 80]
    

    ご覧のように、参照型変数に関しては、その不変性を維持することはできません.

    結論

    var 変数は関数スコープです.let and const 変数はブロックスコープです.var , let and const 巻上げられるがlet 宣言されるまで使用できませんconst 変数は初期化されて宣言されるまで使用できません.

    アウトロ


    記事を楽しんだ?
    接続してください.

    読書ありがとう!