このエントリーが役に立ったらシェアをお願いします!

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

このエントリーが役に立ったらシェアをお願いします!

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

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

javascriptでconstを使わずに値の上書きを禁止する方法
イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!