Androidの2.X系だけでJavaScriptのParseErrorが起こった時の対策

PC向けだけに作製していた画面を、
スマホ向けに修正していた時にぶち当たった問題。
解決したので共有します。

Android2.Xでだけ、JavaScriptの特定の行でParseErrorが起こって、
それ以降のスクリプトが読み込まれないという現象が。。

8/2発表の最新の統計でも、Android 2.X系のシェアは33%くらいあるし、無視できない問題。

発生した端末は、
REGZA Phone T01C(Android2.2)、Androidエミュレータ2.3.3以下など。
但し、Arrows IS12F(Android2.3.5)では発生しなかった。
なのでAndroid2.3.3以下で発生すると思われます。

エラー内容はこんな感じ。

Console: SyntaxError: Parse error http://example.com/hoge.js:210

hoge.jsの210行目で構文エラーだと怒られる。
そして、このエラーはPC版ブラウザ(IE7とかも含む)やiOS,Android2.3.5～では起こりません。

調べると、結局は
JavaScriptの予約語をプロパティとしてオブジェクトの中で使うと、
パースエラーになる(ことがある)
ということでした。

例えば、グローバルオブジェクト"APP"の中に色々と突っ込んで使う場合、
画面上のタブパネルの切り替えを実行する関数を定義するために、
APP.panels.switchなんてうっかり定義しちゃうとそこでパースエラー。
Androidのパーサが貧弱ってことなのか。。。

var APP = {};
APP.init = function(){ ... };
APP.panels = {};
APP.panels.switch = function(){ ... };//ここでパースエラー
APP.panels.close =  function(){ ...//この行以降は読み込まれない

普通予約語ってのはJS書いてりゃ覚えてくるので、
好き好んでプロパティ名に使うはずもないんですが、
文脈の中でうっかり使ってしまうとこうなります。

しかも、予約語の種類によっては発生しないこともあるのでたちが悪い。
例えば、finalやboolean等は発生せず、switch, true, whileなどでは発生します。

とはいっても、うっかり使ってしまうのってswitchくらいじゃないかな。。。
タブとかClass名を変更するからswitch、みたいな感覚で。
PCサイトだとエラーにならないからスマホで動作確認してないと気づかないし、
なるべく短い名前にしたくて使っちゃいそう。

今回の場合だと、"APP.panels.switchTo"とかすれば、文脈もあんまり変えずに解決できますね。

この問題って、既存のjQueryプラグインとかでも引っかかってるのありそう。。。
地道に気をつけていくしかない感じですね。

ということで、
Android2系で原因不明なパースエラーが起こっている時には
予約語をうっかり使ってしまってないか、確認してみてください。