📗

TypeScript:論理演算子「&&」「||」「??」を用いた短絡評価について

2022/09/26に公開

◆ 本内容

下記のような記述について、普段何気なく使っていましたが、きちんとまとめようと思い、ここにまとめます。

const x = a && b;
const y = a || b;
const z = a ?? b;

◆「&&」について

const x = a && b;

◇ 基本

  1. a の真偽値がtrueであれば、a && b の真偽は b に託されるため、b を返す
  2. a の真偽値がfalseであれば、a && b の真偽は a に託されるため、a を返す
    bの真偽値がtrue、falseのどちらでも、flaseを返すことに変わりはないため

◇ 真偽値がfalseとなるもの

  • false
  • 0
  • 空文字列
  • null
  • undefined

◇ 例

const x1 = true && "aa"; // aa
const x2 = 1 && "bb"; // bb
const x3 = [] && 3 // 3(空配列の真偽値はtrue)

const x4 = false && "aa" // false
const x5 = 0 && 3 // 0
const x6 = "" && "bb" // ""
const x7 = null && "cc" // null
const x8 = undefined && "dd" // undifined

◆「||」について

const y = a || b;

◇ 基本

  1. a の真偽値がtrueであれば、a || b の真偽は a に託されるため、a を返す
    bの真偽値がtrue、falseのどちらでも、trueを返すことに変わりはないため
  2. a の真偽値がfalseであれば、a || b の真偽は b に託されるため、b を返す

◇ 真偽値がfalseとなるもの

  • false
  • 0
  • 空文字列
  • null
  • undefined

◇ 例

const y1 = true || "aa"; // true
const y2 = 1 || "bb"; // 1
const y3 = [] || 3; // [](空配列の真偽値はtrue)

const y4 = false || "aa" // "aa"
const y5 = 0 || 3 // 3
const y6 = "" || "bb" // "bb"
const y7 = null || "cc" // "cc"
const y8 = undefined || "dd" // "dd"

◆「??」について

const z = a ?? b;

◇ 基本

  1. a の真偽値がtrueであれば、a ?? b の真偽は a に託されるため、a を返す
    bの真偽値がtrue、falseのどちらでも、trueを返すことに変わりはないため
  2. a の真偽値がfalseであれば、a ?? b の真偽は b に託されるため、b を返す

◇ 真偽値がfalseとなるもの

  • null
  • undefined

◇ 例

const z1 = true ?? "aa"; // true
const z2 = 1 ?? "bb"; // 1
const z3 = [] ?? 3; // [](空配列の真偽値はtrue)

const z4 = false ?? "aa" // false (falseの真偽値はtrueとなる)
const z5 = 0 ?? 3 // 0 (0の真偽値はtrueとなる)
const z6 = "" ?? "bb" // "" (""の真偽値はtrueとなる)
const z7 = null ?? "cc" // "cc"
const z8 = undefined ?? "dd" // "dd"

◆ 注意点

「??」:データがない(null, undefined)場合は代わりの値を用いる、という時に用いられる。
「||」:データがない(null, undefined)、または、空文字列の場合は代わりの値を用いる、という時に用いられる。

Discussion