web-dev-qa-db-ja.com

「let」と「const」ECMAScript 2015（ES6）の違いは何ですか？

ES6のletとconstの違いは何なのでしょうか。次のコードの例のように、両方ともブロックスコープです。

const PI = 3.14;
console.log(PI);

PI = 3;
console.log(PI);

const PI = 4;
console.log(PI);

var PI = 5;
console.log(PI);

ES5では、出力は次のようになります。

3.14
3.14
3.14
3.14

しかし、ES6では次のようになります。

3.14
3
4
5

私はなぜES6がconst値の変更を許可するのか疑問に思っています。質問はなぜ「const」を使用する必要があるのでしょうか？代わりに「let」を使用できますか？

注： jsbin はテストに使用できます。JavaScriptES5コードを実行し、Traceurで実行しますES6機能。

javascriptecmascript-5ecmascript-6
45
Hazem Hagrass

あなたが見ているのは、単に実装の間違いです。 constのES6仕様wiki によると、constは次のとおりです。

初期化後、読み取り専用のバインディングフォームは便利であり、const宣言の形式で既存の実装の前例があります。

現在のように、読み取り専用であることを意味します。 TraceurとContinuumのconstのES6実装はバグがあります（おそらく見落とされただけです）

Traceurがconstを実装していないことに関するGithubの問題

23
Some Guy

letとconstの違いは、constを使用して値/オブジェクトを変数にバインドすると、その変数に再割り当てできないことです。例：

_const something = {};
something = 10; // Error.

let somethingElse = {};
somethingElse = 1000; // This is fine.
_

constは何かを不変にしないことに注意してください。

_const myArr = [];
myArr.Push(10); // Works fine.
_

おそらく、オブジェクトを（浅く）不変にする最善の方法は、Object.freeze()を使用することです。

55
Thomas Foster

させる

  • プログラミングでブロックスコープを使用します。
  • ブロックごとに、そのブロックの外部からアクセスできない独自の新しいスコープを作成してください。
  • 値は何度でも変更できます。

  • letは、ほとんどのコードで非常に便利です。これにより、コードの可読性が大幅に向上し、プログラミングエラーが発生する可能性が低くなります。

    let abc = 0;

if(true)
 abc = 5 //fine

if(true){
  let def = 5
}
console.log(def)

const

  • 変数を使用して不変にすることができます。

  • constは、読みやすさと保守性の両方の良い習慣であり、マジックリテラルの使用を避けます。

    // Low readability
if (x > 10) {
}

//Better!
const maxRows = 10;
if (x > maxRows) {
 }

  • const宣言は初期化する必要があります

     const foo; // ERROR: const declarations must be initialized
  • Constはlet：+で見たようにブロックスコープです。
const foo = 123;
if (true) {
    const foo = 456; // Allowed as its a new variable limited to this `if` block
}
6
Pardeep Jain

概要：

letキーワードとconstキーワードはどちらも、ブロックスコープ変数を宣言する方法です。ただし、大きな違いが1つあります。

  • letで宣言された変数は再割り当てできます。
  • constで宣言された変数は、宣言時に初期化する必要があり、再割り当てできません。

constキーワードで宣言された変数を再割り当てしようとすると、次のエラーが発生します（chrome devtools）：

const reassignment error

なぜこれを使用する必要がありますか？

変数を1回割り当てたいが、変数を再割り当てしたくないことがわかっている場合は、constキーワードを使用すると次の利点があります。

  • コードで、変数を再割り当てしたくないことを伝えます。このようにして、他のプログラマがあなたのコード（またはあなたが少し前に書いたあなた自身のコード）を見る場合、constで宣言された変数は再割り当てすべきではないことがわかります。このようにして、コードはより宣言的で扱いやすくなります。
  • 変数を再割り当てできないという原則を強制します（JSエンジンはエラーをスローします）。このように、誤って再割り当てすることを意図していない変数を再割り当てしようとした場合、（コンソールに記録されているため）早い段階でこれを検出できます。

警告：

constで宣言された変数は再割り当てできませんが、これは割り当てられたオブジェクトが可変ではないという意味ではありません。例えば：

_const obj = {prop1: 1}

// we can still mutate the object assigned to the 
// variable declared with the const keyword
obj.prop1 = 10;
obj.prop2 = 2;

console.log(obj);_

オブジェクトを変更不可にしたい場合は、Object.freeze()を使用してこれを実現できます。

3
Willem van der Veen

letおよびconst

letおよびconstで宣言された変数は、関数ではなくブロックにスコープされるため、巻き上げの特定の問題を排除します。

コードブロック内でletまたはconstを使用して変数が宣言されている場合（中括弧{}で示されます）、変数は、変数の宣言が処理されます。この動作により、変数は宣言されるまでアクセスできなくなります。

letおよびconstを使用するためのルール

letとconstには、他にも興味深いプロパティがいくつかあります。

  • letで宣言された変数は再割り当てできますが、同じスコープで再宣言することはできません。
  • constで宣言された変数には初期値を割り当てる必要がありますが、同じスコープ内で再宣言することはできず、再割り当てすることもできません。

ユースケース

大きな問題は、いつletとconstを使用すべきかということです。一般的な経験則は次のとおりです。

  • 変数に新しい値を再割り当てする場合は、letを使用します。
  • 変数に新しい値を再割り当てする予定がない場合は、constを使用します。

constは変数を宣言する最も厳密な方法であるため、常にconstを使用して変数を宣言することをお勧めします。プログラムの存続期間中に変更されます。変数を更新または変更する必要がある場合は、戻ってconstからletに切り替えます。

1
Dhairya Lakhera

ES6 letおよびconst

新しいletを使用すると、ブロックのスコープが制限されている変数（ローカル変数）を宣言できます。主な違いは、var変数のスコープが、囲む関数全体であることです。

_if (true) {
  var foo = 42; // scope globally
}

console.log(foo); // 42
_

Scopeでletを使用：

_if (true) {
  let foo = 42; // scoped in block
}

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

関数スコープでvarを使用することは、letを使用することと同じです。

_function bar() {
  var foo = 42; // scoped in function
}

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

letキーワードは、変数宣言が含まれるブロックのスコープに変数宣言を付加します。

宣言順序の違い

letとvarのもう1つの違いは、宣言/初期化の順序です。 letで宣言された変数にその宣言よりも早くアクセスすると、ReferenceErrorが発生します。

_console.log(a); // undefined
console.log(b); // ReferenceError: b is not defined

var a = 1;
let b = 2;
_

constの使用

一方、ES6のconstの使用はletの使用によく似ていますが、一度値が割り当てられると、変更できません。 constを不変値として使用して、変数が誤って再割り当てされないようにします。

_const num = 42;

try {
  num = 99;
} catch(err) {
  console.log(err);
  // TypeError: invalid assignment to const `number'

}

num; // 42
_

constを使用して、実生活で一定の変数（凍結温度など）を割り当てます。 JavaScript constは、変更できない値を作成することではなく、値とは関係ありません。constは、変数に別の値が再割り当てされないようにし、変数を読み取り専用にすることです。ただし、値はいつでも変更できます。

_const arr = [0, 1, 2];
arr[3] = 3; // [0, 1, 2, 3]
_

値が変更されないようにするには、Object.freeze()を使用します。

_let arr = Object.freeze([0, 1, 2]);
arr[0] = 5;

arr; // [0, 1, 2]
_

letとForループの使用：

letが本当に役立つ特定のケースは、forループのヘッダーです。

_for (let i = 0; i <= 5; i++) {
  console.log(i);
}

// 0 1 2 3 4 5

console.log(i); // ReferenceError, great! i is not global
_

これは、for...inやfor...ofなどの他のループにも適用できます。

0
Shakespear

このテーマで私を助けてくれたメモをいくつか紹介します。 constとletをvarと比較します。

varについては次のとおりです。

// Var
// 1. var is hoisted to the top of the function, regardless of block
// 2. var can be defined as last line and will be hoisted to top of code block
// 3. for undefined var //output error is 'undefined' and code continues executing
// 4. trying to execute function with undefined variable
// Example: // log(myName); // output: ReferenceError: myName is not defined and code stops executing

letとconstについては次のとおりです。

// Let and Const
// 1. use `const` to declare variables which won't change
// 2. `const` is used to initialize-once, read-only thereafter
// 3. use `let` to declare variables which will change
// 4. `let` or `const` are scoped to the "block", not the function
// 5. trying to change value of const and then console.logging result will give error
// const ANSWER = 42;
// ANSWER = 3.14159;
// console.log(ANSWER);
// Error statement will be "TypeError: Assignment to constant variable." and code will stop executing
// 6. `let` won't allow reference before definition
// function letTest2 () {
//   log(b);
//   let b = 3;}
// Error statement will be "ReferenceError: b is not defined." and code will stop executing
0
Kean Amaral