IE11で三項条件演算子と判断されたコードについて疑問です

Question

先日、フラグ判定の方法について質問を投稿した際、色々な書き方ををご提案いただきました。
【js】配列の内容で処理を分岐させたい

その一つが以下です。

const operations = {
  FFFFF() { console.log('[F,F,F,F,F]の処理'); },
  FFFFT() { console.log('[F,F,F,F,T]の処理'); },
  /* ・・・ */
  TFTFT() { console.log('[T,F,T,F,T]の処理'); },
  /* ・・・ */
  TTTTT() { console.log('[T,T,T,T,T]の処理'); }, 
};

const sampleAry = ["T","F","T","F","T"];

operations[sampleAry.join('')]();　　// => "[T,F,T,F,T]の処理" と出力される。

今、その時提案いただいたコードをそれぞれ書いたりして勉強中なのですが、上のコードをie11で動かすと

':'がありません。

というエラーが出ます。
FFFFF()の行です。

詳しくエラーの説明を見ると、「三項条件演算子の2番目と3番目のオペランドの間のコロンは省略できない」と書いてあるのですが、
そもそもこれは三項条件演算子なのでしょうか？
配列ではないのでしょうか？

また、ie11でこのエラーを解決するにはどのように処理すればよいのでしょうか？

疑問に思ったので質問させていただきました。
よろしくお願いいたします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[MikiSF]

アドバイスありがとうございます！

Answer 1

これは、ES6で導入された、メソッド定義構文です（MDN）。

下の表にもありますが、もちろんIE11は非対応です。

Comments

[MikiSF]

リンクありがとうございます！
理解できました！

Answer 2

IE11はES2015の大半のコードが動作しません。
唯一の存在としてletとconstならば動作するといった感じです。
http://kangax.github.io/compat-table/es6/

const operations = {
  FFFFF() { console.log('[F,F,F,F,F]の処理'); },
  FFFFT() { console.log('[F,F,F,F,T]の処理'); },
  /* ・・・ */
  TFTFT() { console.log('[T,F,T,F,T]の処理'); },
  /* ・・・ */
  TTTTT() { console.log('[T,T,T,T,T]の処理'); }, 
};

このコードはJSの仕様書的存在であるES2015で勧告された書き方です。
ブラウザ対応のオブジェクトの書き方で新しく書けるようになった書き方の中から見つけました。
shorthand methods

ES2015はIE11というブラウザの後に登場していますので、もちろんこの書き方には未対応。
何故かIE11はletとconstにのみ対応しており、当時最先端だった可能性はありますが…

ES5で書くなら、普通のオブジェクトを生成する書き方を使いましょう。
(ES5準拠の場合は変数宣言はvar、アロー関数もないのでfunction(){}を利用しています。)

var operations = {
  FFFFF: function(){ console.log('[F,F,F,F,F]の処理'); },
  FFFFT: function(){ console.log('[F,F,F,F,T]の処理'); },
  /* ・・・ */
  TFTFT: function(){ console.log('[T,F,T,F,T]の処理'); },
  /* ・・・ */
  TTTTT: function(){ console.log('[T,T,T,T,T]の処理'); }
};

Comments

[MikiSF]

ありがとうございます！
つまり、三項条件演算子がどう、というよりは、そもそもIE11が理解できない書き方ということですね。
ブラウザの対応についても毎回チェックするようにします！

Answer 3

コードが意図不明です。
おそらく、

const operations = {
  FFFFF: function() { console.log('[F,F,F,F,F]の処理'); },
  FFFFT: function() { console.log('[F,F,F,F,T]の処理'); },
  /* ・・・ */
  TFTFT: function() { console.log('[T,F,T,F,T]の処理'); },
  /* ・・・ */
  TTTTT: function() { console.log('[T,T,T,T,T]の処理'); }, 
};

Comments

[miyabi-sun]

この1行は私も駄目じゃね？と思ったのですが、
前の質問のBAの方が書いて動かしてるんですよね。
なのでES6のクラス構文か分割代入あたりを使った書き方じゃないかと思います。
もしかすると、ES7以降の書き方かも…調べる必要ありそうですね。

[MikiSF]

回答ありがとうございます！
確かに教えていただいた書き方ですと意図した動きになりました。
勉強になります！

[miyabi-sun]

探した所、shorthand methodsというオブジェクトの新しい書き方でした。

[otn]

知りませんでした。
特殊構文と言うことですね。
失礼しました。