javascriptでconstを使わずに値の上書きを禁止する方法

javascriptでconstを使う javascript

定数で値を宣言すると後から変更されないように値を保持しておくことができます。
ファイルパスやフラグの管理など、他の言語でも必須となりますよね。
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 ではサポートされていません。

const – MDN

とのことです。ChromeとFireFoxでは使えますが、IE10は基本的に使えないようです。
ここでのサポートはIE10までと記述がありますが、IE11で確認したところ正しくconstが使えました。

const HOGE = 10;
console.log(HOGE); // 10
HOGE = 999; // できない
console.log(HOGE); // 10

これを実行すると

IE11でのconst挙動

IE11でのconst挙動


構文エラーによりスクリプトが止まります。
同様のコードをChromeでも実行してみました。
Chromeの場合は3行目を無視して10が二度出力されます。
const Chromeでの挙動

Chromeでのconst挙動

constを使わずに定数に近い動きを実現する

紳士協定として、大文字アンダースコアで変数を宣言して「この変数は定数と思ってね!」ということも可能ですが、
今回はObject.freeze()を使います。これはIE9以上対応です。

Object.freeze()

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と同じ動きをさせることができないので気をつけて使用しましょう。

javascript
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

スパイスファクトリー株式会社 Webエンジニア。フロントエンドやWebサイトの高速化が得意です。インフラ・バックエンドも一通りやってます。
個人的なお仕事のご依頼や情報交換などはお問い合わせまたはTwitterにメンションをお願いします。

ShoheiTaiをフォローする
このエントリーが役に立ったらシェアをお願いします!
イケてないコード – Webエンジニアのブログ

コメント

タイトルとURLをコピーしました