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

◆ 本内容

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

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となるもの」が「||」と「??」では異なります。

◇ 真偽値が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"

const z = a ?? b;において、
a が null または undefined の時のみ、b を返す、と覚える。

◆ 注意点

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