JavaScriptの三項演算子が読みにくいらしいので、if式ならぬ if関数を作りました。そしてもっと読みにくい感。

三項演算子がよみにくい！

という噂を聞きました。

なので、VB6とかVBAのIIF関数ならぬ、if関数を考えてみました。

誰でも考えるっぽい関数ですかね。

名前、ifExpression とか ifFunc とか、iff とか、名前考えたのですが、しっくりこなかったので、if_ にしました。

こんな感じです。

if関数の実装です

const isFunction = (value) => {
  return (typeof value === 'function');
};

const functionValue = (value) => {
  if (isFunction(value)) {
    return value();
  } else {
    return value;
  }
};

const if_ = (condition) => {
  if (condition) {
    return (args) => {
      return functionValue(args.then);
    };
  } else {
    return (args) => {
      return functionValue(args.else);
    }
  }
};

//----------
// 使い方

const thenValue = 'THEN';
const elseValue = 'ELSE';

// [1]
var value1 = true;
console.log( if_(value1)({ then: thenValue, else: elseValue }) );   // THEN と表示される

// [2]
var value1 = false;
console.log( if_(value1)({ then: thenValue, else: elseValue }) );   // ELSE と表示される

// [3]
var value1 = true;
console.log( if_(value1)({ then: _=>thenValue, else: _=>elseValue }) );   // THEN と表示される

// [4]
var value1 = false;
console.log( if_(value1)({ then: _=>thenValue, else: _=>elseValue }) );   // ELSE と表示される

[1][2]の使い方は、引数として渡した then/elseプロパティの値が取得できます。
[3][4]の使い方は、then/elseプロパティにわたす値はアロー関数なので、その戻り値が取得されています。

関数渡しの場合は、if_(true/false)の値によって、呼び出されるかどうかが制御されるので、三項演算子的に使えるでしょう。

他段階の場合、三項演算子より、明らかに読みやすい！

const value2 = if_(true)({
  then: 'trueの値',
  else: 'falseの値'
});

const value3 = if_(true)({
  then: 
    if_(true)({
      then: 'true-trueの時の値',
      else: 'true-falseの時の値'
    }),
  else: 'falseの値'
});

読みやすい！...か？？

こんなの作るくらいなら、三項演算子になれる方が読みやすくないか？

という遊びネタでした。

追記

2019/03/21(木)

if_関数 を組み込んだライブラリを npm で配信しています。TypeScriptコードです。

standard-software/copipejs: simple code parts
https://github.com/standard-software/copipejs

https://github.com/standard-software/copipejs/blob/master/build/tsc/node/copipe_core.js
このあたりのソースをみると実装がわかり、
https://github.com/standard-software/copipejs/blob/master/source/test/node/test_copipe_core.js
こちらのテストコードをみると使い方がわかります。

追記の追記

こちらのコメントで書きました。
https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1#comment-d69a71e5cd6e2f9f4a5b

if(true/false){ then: value, else: value }
if(true/false){ then: function, else: function }
if(true/false)(value, value)
if(true/false)(function, function)
if(true/false).then(value).else(value)
if(true/false).then(function).else(function)
if(true/false).else(value).then(value)
if(true/false).else(function).then(function)

上記書式に対応した、if_ 関数作ってみました。
https://github.com/standard-software/partsjs/blob/v5.5.0/source_code/syntax/syntax.js#L135

テストコードです。
https://github.com/standard-software/partsjs/blob/v5.5.0/source_code/syntax/syntax.test.js#L312