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

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の値' 
}); 

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

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

という遊びネタでした。