☰

ECMAScript 2015 (ES6) の「let」と「const」の違いは何ですか? 質問する

tag-icon • tag-icon javascript ecmascript-5 ecmascript-6
ECMAScript 2015 (ES6) の「let」と「const」の違いは何ですか? 質問する

letとconstの違いは何でしょうか？ES6どちらもブロックスコープです。次のコードの例をご覧ください。

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テストに使用できる場合は、JavaScript走るES5コードとトレーサー実行するにはES6機能。

ベストアンサー1

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

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

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

質問の詳細では、これは ES5 からの変更であると主張していますが、これは実際には誤解です。ECMAScript const5 のみをサポートするブラウザーで使用すると、常にエラーが発生します。このconstステートメントは ECMAScript 5 には存在しませんでした。 の動作は、実行されている JavaScript の種類に関して JS Bin が誤解を招くか、ブラウザーのバグです。

実際には、ブラウザは ECMAScript 2015 (ECMAScript 6) のサポートを 0% から 100% に一気に移行したわけではなく、ブラウザが完全に準拠するまで機能が少しずつ追加されています。JS Bin が「JavaScript」と呼ぶものは、ブラウザが現在サポートしている ECMAScript の機能だけを意味し、「ES5」や「ES6」などを意味するものではありません。多くのブラウザは ES6 をサポートしておりconst、let以前は完全にサポートしていましたが、一部のブラウザ (Firefox など) はしばらくの間 ES6 のconstように扱っていました。質問者のブラウザはサポートしていたが正しく実装していなかったlet可能性があります。letconst

第二に、Babel や Traceur のようなツールは、古いブラウザで ES6 を「実行」させるのではなく、ES6 コードをほぼ同じことを行う ES5 に変換します。Traceur はconstステートメントをvarステートメントに変換している可能性がありますが、ステートメントのセマンティクスが ES5 で正確に複製されることを常に強制しているとは思えませんconst。JS Bin を使用して Traceur で ES6 を実行しても、ES6 仕様に完全に準拠したブラウザで ES6 を実行した場合とまったく同じ結果は得られません。

const値やオブジェクトが不変になるわけではないことに注意することが重要です。

const myArray = [];
myArray.push(1); // Works fine.
myArray[1] = 2; // Also works fine.
console.log(myArray); // [1, 2]
myArray = [1, 2, 3] // This will throw.

現時点では、オブジェクトを (浅く) 不変にする最善の方法は、 を使用することですObject.freeze()。ただし、これによってオブジェクト自体が読み取り専用になるだけで、オブジェクトのプロパティの値は変更可能です。

おすすめ記事