Zenn
🔖

JavaScriptのtruthyとfalsyとは？ショートサーキット評価もあわせて解説

に公開
JavaScript
TypeScript
Tips
初心者向け
備忘録
tech

はじめに

JavaScriptを書いていて、こんな経験はありませんか？

「条件式やif文で、判定が意図しないものになった」

私自身、実務で
truthyやfalsyという概念に初めて触れました。

また、以下のような
ショートサーキット評価と呼ばれる書き方も学びました。

const value = A || B;

本記事では、truthy/falsyの基本とショートサーキット評価の使い方について解説します。

truthyとfalsyとは？

JavaScriptでは、
値そのものが真偽値（true/false）に変換されるルールがあります。

これを、

  • truthy（trueとみなされる値）
  • falsy（falseとみなされる値）

と呼びます。

falsyになる値一覧

以下は、JavaScriptでfalsyとみなされる代表的な値です。

値 説明
false 論理値のfalse
0 数値の0
''（空文字列） 長さ0の文字列
null 空の値
undefined 未定義
NaN 計算できない数

これ以外のものは基本的にtruthyとみなされます。

具体例

// 0 は falsy（false 相当）なので、このブロックは実行されません
if (0) {
  console.log("この行は実行されません");  
}

// "hello" は truthy（true 相当）なので、このブロックは実行されます
if ("hello") {
  console.log("この行が実行されます");  
}

書き方① 三項演算子

まず、よく見る書き方は三項演算子です。

const value = isExist ? 'a' : 'b';

この場合も、

  • isExistがtruthyなら'a'
  • isExistがfalsyなら'b'

が代入されます。

ここでポイントなのは、
「trueかfalseか」ではなく「truthyかfalsyか」で判定されているという点です。

書き方② ショートサーキット評価（OR演算子）

JavaScriptの||（OR演算子）は、左側の値がtruthyならその値を返し、falsyなら右側の値を返します。

const value = A || B;

動作の流れ

  1. まず A を評価します
  2. A が truthy（真とみなされる値）であれば、そこで処理を止めて value = A となります。
  3. A が falsy（偽とみなされる値）であれば、次に B を評価して value = B となります

具体例

A の値 B の値 value の結果
"Hello" "Guest" "Hello"
"" "Guest" "Guest"
0 100 100
null "N/A" "N/A"

具体例

// inputName が falsy（null、undefined、空文字、0、false など）の場合は 'ゲスト' を代入  
// inputName が truthy（例：'太郎'）なら、そのまま代入  
const userName = inputName || 'ゲスト';
  • inputName が null、undefined、空文字、0、false など “値がない” とみなされる場合 → userName に 'ゲスト'
  • inputName が '太郎' のような “有効な値” の場合 → userName にその値

API レスポンスで undefined が返ってくるケースでも、
この書き方ならデフォルト値を簡潔に設定でき、とても便利です。

TypeScriptでもtruthy/falsy？

ここまで、JavaScriptにおけるtruthy/falsyの考え方を紹介してきました。
では、TypeScriptではどうでしょうか？

TypeScriptでは型による安全性は高まりますが、実行時の条件式の判定はJavaScriptと同様、truthy/falsyに基づいて行われます。

つまり、

  • 三項演算子（? :）
  • if文
    などの判定は、true/falseだけではなく、truthy/falsyで動きます。

具体例① boolean型の場合

const isExist: boolean = true;
const value = isExist ? 'a' : 'b';
console.log(value);

ログの出力結果：

a

この場合は、boolean型しか許容されていないので、直感通りtrue/falseの世界になります。

具体例② 文字列やundefinedを許す場合

TypeScriptでは、型をunion（複数型許可）にすると、
truthy/falsyの挙動がそのまま現れます。

const inputName: string | undefined = getUserName();
const userName = inputName ? inputName : 'ゲスト';
  • inputNameがtruthyな文字列ならそのまま
  • inputNameがundefinedなどfalsyなら'ゲスト'を使う

ここでも、型があるかどうかに関係なく、実行時はtruthy/falsy判定されるわけです。

TypeScriptならではの注意点

型注釈があっても、次のような意図しない動きに注意が必要です。

const count: number = 0;
const result = count || 10;
console.log(result);

ログの出力結果：

10

0はfalsyなので、意図せずデフォルト値が選ばれてしまうことがあります。

このような場合は、nullish合体演算子（??）　を使うと安全です。

const count: number = 0;
const result = count ?? 10;
console.log(result);

ログの出力結果：

0

まとめ

JavaScript TypeScript
条件式での判定方法 truthy/falsy truthy/falsy（型による安全性あり）
型の違い なし（ランタイムは同じ） 型注釈で意図しない値を防ぎやすい
注意点 0や''もfalsy 型によってバグを防ぎやすいが、truthy/falsy判定は変わらない

おわりに

JavaScriptやTypeScriptの条件式では、
true/falseそのものだけではなく、truthy/falsyによる判定が行われることを意識することが大切です。

特にTypeScriptでも、型の恩恵は受けられるものの、
実行時にはtruthy/falsyに基づいて動くため、過信は禁物です。

私自身、この仕組みを初めて知ったとき、戸惑いました。
本記事が、少しでも参考になれば幸いです。

Discussion