MENU

【初心者向け】JavaScriptのtruthyとfalsyを徹底解説|7つのfalsy値と落とし穴【ITTI】

目次

truthyとfalsyとは?JavaScriptの真偽値変換の基本

JavaScriptの真値と偽値って本からはよく出てきます。

みなさんのイメージはこれは嘘だなと思ったら偽値、これは本当やなと思ったら真値と思いますよね!?

はい、その通りです。

でも、ここからはより詳しく楽しく解説したいと思います。

JavaScriptにおける真値(truthy)と偽値(falsy)とは?

真値と偽値の定義をシンプルに説明

if文などで自動的に true/false に変換されるルール

if ("hello") {
console.log("文字があるので true");
}

“hello” → true → 実行される

if (0) {
console.log("0は falsy なので実行されない");
}

0 → falsy → 実行されない

寸劇

ユーザー「if文さん、この ‘hello’ はどう?」

if ("hello") {

if文「これは真値だから true 扱い!実行するよ!」

if ("hello") {
console.log("文字があるので true");
}

hello「うぇーい通れたぜ」

実行結果

true

ユーザー「じゃあ 0 は?」

if (0) {

0「ぐはっ!通れなかったぁぁ!」

if文「これは偽値だから false 扱い!スルーするね!」

console.log("0は falsy なので実行されない");
}

実行結果

false

ってなる

falsy値は7種類だけ

false      →文字通りの「偽」

0         →数値のゼロ

-0       →マイナスゼロ

0n       →BigInt型のゼロ

“”        →長さ0の空文字列

null        →「値が存在しない」ことを示す

undefined     →「変数に値が代入されていない」ことを示す

NaN      →「Not a Number」 = 数値計算ができない結果

コード例

0 は falsy⇩

if (0) {
console.log("実行されない");
}

空文字は falsy⇩

if ("") {
console.log("実行されない");
}

null は falsy⇩

if (null) {
console.log("実行されない");
}

文字列はtrue⇩

if ("hello") {
console.log("実行される!");
}

空配列はtrue⇩

if ([]) {
console.log("実行される!");
}

この7種類以外はすべて true(真値) として扱われます。

truthy値の具体例

JavaScript では falsy 値(7種類)以外はすべて true です。 つまり、条件式に入れると true とみなされる値 のこと。

“hello”           → 空でない文字列

42               → 0 以外の数値

[]              → 空配列

{}              → 空オブジェクト

function(){}     → 関数

Infinity / -Infinity → 無限大

直感的には「空だから偽(false)」と思いがちです。しかし、JavaScript では 配列やオブジェクトは「存在する入れ物」なので true と扱われます

if ([]) {
console.log("空配列でも実行される!");
}

実行結果 true

if ({}) {
console.log("空オブジェクトでも実行される!");
}

実行結果 true

実際に実行すると、どちらも出力されます。

寸劇

ユーザー「へい!typeof!この [] は空っぽだから偽だよね?」

JavaScript「いやいや、入れ物として存在してるから真(true)だよ!」

ユーザー「なら、{} も空だから偽でしょ?」

JavaScript「なんでやねん!オブジェクトは存在してる時点で true!」

よくある落とし穴と対策

  if (0) → 実行されない

  if (“”) → 実行されない

  if ([]) → 実行される(初心者が混乱しやすいので注意が必要)

まとめ

•  falsyは7種類だけ

  それ以外はtrue

  空配列・空オブジェクトはtrueなので注意

最後まで読んで頂きありがとうございました!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フロントエンドを基礎から学びつつ、UXデザインで“わかりやすさ”を形にしています。

コメント

コメントする

目次