Gizanbeak

この記事ではTypeScriptの「&&」「||」「??」を使った短絡評価について解説します。

この記事を読むことで、これらの演算子の基本的な評価方法から具体的な使用例まで、TypeScriptでの短絡評価に関する知識がしっかり身につきます。
それでは早速、みていきましょう！

基本的な評価

まず、短絡評価とは 条件式の真偽を判定する際に用いられるテクニック です。
以下に短絡評価の基本的な動作を紹介します。

const result = true && 'Hello, world!';
console.log(result); // 出力: Hello, world!

このコードは true という真偽値と文字列 Hello, world! を && で結んでいます。
結果、true が真なので、常に Hello, world! が result に代入されて出力されます。

このように if 文を用いなくとも短くコードを書けるのがメリットですね。

&& 演算子

&& 演算子は 全ての式が真であれば最後の式の評価結果 を返し、一つでも偽があればその偽の値 を返します。

const example1 = true && 'First' && 'Second';
const example2 = true && false && 'Third';
console.log(example1); // 出力: Second
console.log(example2); // 出力: false

上記の例では、example1 が全ての条件が真の値となるため最後の値である Second が出力されていますね。
逆に example2 は2つ目の値として false が存在しているため、最終的に返却される値は false となっています。

ちなみに、文字列は空文字（''）以外の値は真の値として判断されます。

|| 演算子

|| 演算子は 一つでも真があればその真の値 を返し、全て偽であれば最後の式の評価結果 を返します。

const example3 = false || null || 'Third';
const example4 = false || 'Fourth';
console.log(example3); // 出力: Third
console.log(example4); // 出力: Fourth

このコード例では example3 には false と null が存在していますが、最後の値が Third となっているため、最終的な出力では Third が出力されています。

?? 演算子

?? 演算子は左側が null または undefined の場合に右側の値を返します。

const example5 = null ?? 'Fifth';
const example6 = 'Sixth' ?? 'Seventh';
console.log(example5); // 出力: Fifth
console.log(example6); // 出力: Sixth

上記の例の場合は example5 の左側が null のため Fifth を返しています。
また、example6 は左側が Sixth で真の値のため、そのまま Sixth を返しています。

TypeScriptのハテナマークとオプショナルチェーンの使い方

TypeScriptのハテナマークの意味とオプショナルチェーンの活用法を解説！コードの安全性と読みやすさを向上させましょう。

gizanbeak.com

短絡評価のメリット・デメリット・注意点

ここまで紹介してきた短絡評価にもメリットとデメリットが存在します。

以下にそのメリットとデメリットを簡単にまとめています。

メリット

• コードが簡潔になり、可読性が向上する
• 条件式の評価が早く終わる可能性がある

デメリット

• 過度に使用するとコードの理解が難しくなる可能性がある

注意点

• && と || の組み合わせには注意。予想外の結果になる可能性がある

TypeScriptの学習におすすめしたい書籍5選！

TypeScriptを学ぶ際に初心者から上級者まで幅広くおすすめできる書籍5選を紹介します！TypeScriptを効果的に学習するのに役立つこと間違いなしです。

gizanbeak.com

まとめ

今回はTypeScriptの短絡評価について、&&、||、?? の演算子を使って具体的に解説しました。

これらの演算子をうまく使いこなせば、コードがすっきりとして可読性も上がります。
ぜひ日々のコーディングに活用してみてください！