ブロックと関数スコープでVAR、letとconstを使う方法

4186 ワード

JavaScriptでコーディングする際には、主に2つのスコープに遭遇します.

1ブロックスコープ
場合は、ほとんどの場合は、ループのIFに遭遇する
{
  // Block Scope
}
if (true) {
  // Block Scope
}

for (var i = 1; i <= 10; i++) {
  // Block Scope
}

2 .関数スコープ
JavaScript関数でこれに遭遇します.
function sum(a, b) {
  // Function Scope
  var result = a + b;
}

sum(4 + 3);

どのように、ブロックと機能範囲は異なりますか?
違いは、どのように変数が定義されるかにあります.変数の定義方法は三つあります.私たちはvar , let or const .
あなたが使うときvar ブロックスコープでは、変数はブロックスコープの外でアクセスできます.下記の画像をご覧くださいvar i の最後の値i forループ

しかし、あなたが使うときlet 試してみてくださいvar i 未定義になる

主な違いは、変数を定義するときにvar 関数スコープでは、変数は関数スコープでのみアクセス可能です.

function sum(a, b) {
  // Function Scope
  var result = a + b;
}

sum(4 + 3);

ベストプラクティス
ブロックスコープ内の変数の定義を常に使用する場合let or const これは、変数がブロックスコープから漏れないようにします.

The const 変数といつ使用する必要がありますか?
使用するconst キーワードを使用すると、変数の参照値が変更されません.しかし、これは値が不変であることを意味しません.
Objects and Arrays declared with the const キーワードは突然変異することができますstring and interger 種類
// Scalar values, This can be mutated
const answer = 42;
const greeting = 'Hello';

// Arrays and Objects, This can be mutated
const numbers = [2, 4, 6];
const person = {
  firstName: 'John',
  lastName: 'Doe',
};
Incase dontは、あなたのconst配列とオブジェクトが突然変異して欲しいです.用途Object.freeze() . これはまたlet 変数

配列の凍結例
const a = [0];
Object.freeze(a); // The array cannot be modified now.

a[0] = 1; // fails silently

// In strict mode such attempt will throw a TypeError
function fail() {
  "use strict"
  a[0] = 1;
}

fail();

// Attempted to push
a.push(2); // throws a TypeError

物体凍結
オブジェクトの呼び出しの結果.フリーズ( Object )はオブジェクト自体の即時のプロパティにのみ適用され、将来のプロパティの追加、削除、または値の再割り当て操作をオブジェクトに対してのみ防止します.これらのプロパティの値がオブジェクト自体である場合、これらのオブジェクトは凍結されず、プロパティの追加、削除または値の再割り当て操作の対象になります.
const employee = {
  name: "Mayank",
  designation: "Developer",
  address: {
    street: "Rohini",
    city: "Delhi"
  }
};

Object.freeze(employee);

employee.name = "Dummy"; // fails silently in non-strict mode
employee.address.city = "Noida"; // attributes of child object can be modified

console.log(employee.address.city) // Output: "Noida"
入れ子になったオブジェクトを凍結しようとする場合はimmutable JSライブラリー.