２つの条件を満たす場合、同じ処理をするときに使える三項演算子のTips

状況の説明

例えばcountryとcityという変数を用意します。それとmyFeelingLevelという変数を用意します。

let country;
let city;
let myFeelingLevel = 0;

私は東京と NY が好きなので、countryが"Japan"かつcityが"Tokyo"の場合とcountryが"USA"かつcityが"New York"の場合はmyFeelingLevelを100にしたいです。それ以外はmyFeelingLevelは0です。

プログラムに落とし込んでみる

if 文で書く

let myFeelingLevel = 0;
if (country === "Japan" && city === "Tokyo") {
  myFeelingLevel = 100;
} else if (country === "USA" && city === "New York") {
  myFeelingLevel = 100;
}

あまりletを使いたくないですよね。できる限りconstを使いたいです。
こういう時は三項演算子を使うといいです。

三項演算子で書く

const myFeelingLevel =
  country === "Japan" && city === "Tokyo"
    ? 100
    : country === "USA" && city === "New York"
    ? 100
    : 0;

なんとも分かりずらいソースになりました。三項演算子は判定するものが一つしかないときは可読性が高いですが、判定するものが複数あるときは可読性が低くなります。
条件が増えると、可読性はさらに低くなります。

新しいオブジェクトを用意し、三項演算子で書く

長くなりましたが、これが私が今回紹介する Tips です。

const locations: Record<string, string> = {
  Japan: "Tokyo",
  USA: "New York",
};

const myFeelingLevel = locations[country] === city ? 100 : 0;

countryがJapanの場合、locations[country]はTokyoになります。それがcityと一致するかどうかでmyFeelingLevelを決めることができます。

これは上記で記述した

if (country === "Japan" && city === "Tokyo")

と同じ意味になります。

Record は TypeScript で使えるオブジェクトの型です。Record<key, value>という形で使います。keyとvalueはそれぞれstring型にしています。

これで可読性と保守性が上がりました。