🤔

「nullかもしれないから、const url = gotUrl || DEFAULT_URLっと」「違うよ」

2023/11/27に公開

TypeScriptの||演算子の使い方を勘違いしてました

結論

nullundefinedの場合のみデフォルトの値を設定したければ??を使おう

const url = gotUrl ?? DEFAULT_URL

「 || 」 の何が違うのか?

  • ||ORを表している
const url = gotUrl || DEFAULT_URL

つまりこの場合
gotUrlnullundefined」ならDEFAULT_URL、ではない

そうではなく「gotUrlが falsy な値(偽と評価される値)」ならDEFAULT_URL、となる

  • falsy な値の例
    • null
    • undefined
    • false
    • ""
    • 0

なので、こんなことも起こる

// x は boolean | null
// x が false の時は flag = false 、x が null の時は flag = true にしたい
const flag = x || true // しかし flag は常に true

x = false の時は flag = false になって欲しかったが、x || trueの場合、左側が false (falsyな値)だと右側が評価されるので flag = true になる

nullundefinedの場合のみデフォルトを設定したい場合、??を使おう

const flag = x ?? true // x = false なら flag = false になる

まとめ

nullundefinedの場合のみデフォルトの値を設定したければ??を使おう(3回目)

const url = gotUrl ?? DEFAULT_URL

Discussion