TypeScript、短絡評価(&&,||,??)について

はじめに

こんにちは！エンジニア志望の学生です。今日はTypeScriptにおける短絡評価について、「生成Aiが出してくれるけど詳しく理解してないから使えない」という状況から脱出するために、まとめたいと思います。

短絡評価とは

• 論理演算子を用いて、特定の条件下のみでの動作を指定する処理
• &&、||、??といった論理演算子が使用可能であり、それぞれで動作が違う
• JSXへの応用により、条件に応じたレンダリングの変更が可能

論理AND演算子 &&

• &&について、左辺がfalseの場合、右辺が評価されないという特性を利用する
• 左辺がfalseや0、""等のfalsyな値の場合はそのままfalsyな値を返し、それ以外の場合は右辺の値を返す
• 左辺がフラグ、右辺が処理になることが多い

const result = flag && "Hello, world!";

console.log(result);
//=>false //flag=false
//=>"Hello,World!" //flag = false

//JSXとの組み合わせも可能
const message = isLoading && <h1>読み込み中です</h1>
//=>isLadingがTrueであれば、「読み込み中です」の文字を表示

論理OR演算子 ||

• ||について、左辺がtrueの場合、右辺が評価されない という特性を利用する
• 左辺がtrueや文字列、値等のtruthyな値の場合はそのままtruthyな値を返し、それ以外の場合は右辺の値を返す
• AND演算子の逆

const result = flag || "Hello, world!";

console.log(result);
//"Hello, world!"//flag = false
//=> true // flag = true

//JSXとの組み合わせも可能
const message = isEnd || <h1>まだ終わっていません</h1>
//=>isLadingがTrueであれば、「読み込み中です」の文字を表示

null合体演算子　??

• ほとんど論理OR演算子
• 左辺がnullまたはundefinedの時に右辺を返す
• falseや0等のその他のfalsyな値については、そのまま、そのfalsyな値を返す
• プロパティの有無のチェック等に使う

const result = flag ?? "Hello world!";

console.log(result)
//=>Hello World! //flag = null/undefind
//=>true //flag = true
//=>false //flag = false

まとめ

以上になります。

うやむやに中途半端な理解で済ませていた部分をちゃんとできてよかったです。

参考