定数で値を宣言すると後から変更されないように値を保持しておくことができます。
ファイルパスやフラグの管理など、他の言語でも必須となりますよね。
javascriptの実装中もフラグなどの管理に定数を使いたくなることがあると思います。
javascriptでの記述は以下
const FILE_PATH = '/image/hoge.jpg'; const SPEED = 10; FILE_PATH = 'foo.jpg'; // できない SPEED = 1000; // できない
プログラムをやっている人からすると当たり前な話ですが、
これには落とし穴がありconstはIE非対応という問題があります。
IE10まではconstが非対応
IE10でconstを使おうとすると構文エラーとなります。
これはIE10以前でも同様にエラーとなっています。
MDNによると・・・
現在の const の実装は Mozilla 特有の拡張であり、ECMAScript5 の一部ではありません。これは Firefox および Chrome (V8) でサポートされています。Safari 5.1.7 や Opera 12.00 では、const で宣言しても、後から値を変更することができます。 また、Internet Explorer 6-10 ではサポートされていません。
とのことです。ChromeとFireFoxでは使えますが、IE10は基本的に使えないようです。
ここでのサポートはIE10までと記述がありますが、IE11で確認したところ正しくconstが使えました。
const HOGE = 10; console.log(HOGE); // 10 HOGE = 999; // できない console.log(HOGE); // 10
これを実行すると
構文エラーによりスクリプトが止まります。
同様のコードをChromeでも実行してみました。
Chromeの場合は3行目を無視して10が二度出力されます。
constを使わずに定数に近い動きを実現する
紳士協定として、大文字アンダースコアで変数を宣言して「この変数は定数と思ってね!」ということも可能ですが、
今回はObject.freeze()を使います。これはIE9以上対応です。
Object.freeze()を使うことでオブジェクトを凍結することができ、変更を防ぐことができます。
以下のコードではHOGEオブジェクトをObject.freeze()で凍結し、変更不可の状態にしました。
var HOGE = { 'VALUE_1': 10, 'VALUE_2': 'foo' }; Object.freeze(HOGE); console.log(HOGE.VALUE_1); // 10 console.log(HOGE.VALUE_2); // 'foo' HOGE.VALUE_1 = 999; HOGE.VALUE_2 = 'update'; console.log(HOGE.VALUE_1); // 10 console.log(HOGE.VALUE_2); // 'foo'
これで値の変更を防ぐことができ、実装時のミスがなくなります。
ただし、Object.freeze()を使用する上で気をつけなければならないのは、
凍結した変数に対して上書きするようにオブジェクトを代入することができてしまう点です。
var HOGE = { 'VALUE_1': 10, 'VALUE_2': 'foo' }; Object.freeze(HOGE); console.log(HOGE.VALUE_1); // 10 console.log(HOGE.VALUE_2); // 'foo' HOGE = { 'VALUE_1': 999, 'VALUE_2': 'update' } console.log(HOGE.VALUE_1); // 999 console.log(HOGE.VALUE_2); // 'update'
完全にconstと同じ動きをさせることができないので気をつけて使用しましょう。
コメント