JavaScriptで条件によって返す内容を変えたいときのパターンメモ

JavaScriptを書いてるとき、こういうことない？

変数で「success」という文字列があったら、「green」＆「成功」という文字列を得たいなあ……

うちは、よくある。そういうときのパターンをメモっておきます。

if 文

let className = "";
let title = "";
if (variable === "success") {
  className = "green";
  title = "成功";
} else if (variable === "danger") {
  className = "red";
  title = "失敗";
} else if (variable === "warning") {
  className = "yellow";
  title = "注意";
} else {
  className = "glay";
  title = "なし";
}

一番最初に思いつくシンプルな書き方。分かりやすい。けど再代入してるのがキモいね。

switch 文

let className = "";
let title ="";
switch (variable) {
  case "success":
    className = "green";
    title = "成功";
    break;
  case "danger":
    className = "red";
    title ="失敗";
    break;
  case "warning":
    className = "yellow";
    title ="注意";
    break;
  default:
    className = "glay";
    title ="なし";
}

次によく思いつくパターン。こっちもシンプルだが、再代入している。あとswitch 文では正規表現使えないので、完全一致で頑張る感じになる。

一応、正規表現も使えるよ……

let className = "";
let title ="";
switch (true) {
  case /^success$/.test(variable):
    className = "green";
    title = "成功";
    break;
  case /^danger$/.test(variable):
    className = "red";
    title ="失敗";
    break;
  case /^warning$/.test(variable):
    className = "yellow";
    title ="注意";
    break;
  default:
    className = "glay";
    title ="なし";
}

でも少しキモいかも……

三項演算子

const className =
  (variable === "success") ? "green"
    : (variable === "danger") ? "red"
      : (variable === "warning") ? "yellow"
        : "glay";
const title =
  (variable === "success") ? "成功"
    : (variable === "danger") ? "失敗"
      : (variable === "warning") ? "注意"
        : "なし";

うちが良く使うパターン。変数が少ないし、再代入してないから個人的に好み。ただ条件追加や結果をどんどん増やすとなった場合、面倒くさくなる難点がある。

オブジェクト

const status = {
  success: { className: "green",  title: "成功" },
  danger:  { className: "red",    title: "失敗" },
  warning: { className: "yellow", title: "注意" },
};
const fallback = { className: "glay", title: "なし" };
const { className, title } = status[variable] ?? fallback;

switch 文と同様、完全一致だけど条件追加や修正がかなり簡単。頑張れば正規表現でも出来るけど、複雑だしやらない方が良い。

関数

function getStatus(variable) {
  if (variable === "success") return { className: "green", title: "成功" };
  if (variable === "danger") return { className: "red", title: "失敗" };
  if (variable === "warning") return { className: "yellow", title: "注意" };
  return { className: "glay", title: "なし" };
}
const { className, title } = getStatus(variable);

全部のいいとこ取りな感じする。正規表現もできるし、再代入しないし、変数も増えない。あと使い回したいパターンにも対応できる。

よかったらシェアしてね！