if (hoge) {~ 比較演算子を使わないIF文がどこまでを「true」とするのかを徹底的に検証してみた *JavaScript

前提

if (text) {
  return true
} return false

　
　
この書き方が

どの時が「true」で

どの時に「false」を返すのか

を検証。
　
　
そして、動画にしてみた記事である。

検証環境

・フレームワーク：React.js

※少なくともJavaScript系の言語は同じ結果だと思う。
　
　
・コード

// この変数にいろんな物を入れてみることで検証
let text = 'hoge'

const result = () => {
  // ↓ここの判定具合を検証する
  if (text) {
    console.log('text:', text, true) // 条件一致
    return text + '　←textの中身'
  }
  console.log('text:', text, false) // 条件不一致
  return 'textになんも入ってないで'
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{result()}</p> {/* ←ここで画面に表示 */}
      </header>
      <div></div>
    </div>
  );
}

export default App;

　　
　
・表示
見づらいかも知れんが、
画面とコンソールにこのように表示される。

では検証開始！！！！！！！！

1.文字列

その１ 中身あるやつ

let text = 'あなたはだんだん「いいね」したくなる'

・画面

・コンソールログ

☆ 結果 = true

---

その２　空欄

let text = ''

・画面

・コンソールログ

☆ 結果 = false
　
この辺は当然そうでしょう。
　
　

2.数値

その１　プラスの数値

let text = 1

・画面

・コンソールログ

☆ 結果 = true

---

その２　ゼロ

let text = 0

・画面

・コンソールログ

☆ 結果 = false

まあこの辺も想定内

---

その３　マイナスの数値

・画面

・コンソールログ

☆ 結果 = true

この辺りから私の心が叫び始める。
「あれぇーゼロより少ないのにtrueなの？　なんで？」
どうやらゼロは「無」だけどマイナスは「有」であると判定するようだ。

続いて行ってみる。
　
　
　

3.カッコのやつ

エンジニアが「カッコのやつ」とか言ってると怒られるかも知れんが、
ここではあえてこの呼び方で行こうと思う。

その１　空配列

let text = []

・画面

・コンソールログ

☆ 結果 = true

これはtrue？
とりあえず目には見えない「何か」が存在する
ということで納得するとする。

---

その２　空オブジェクト

let text = {}

・画面

・コンソールログ

☆ 結果 = true

今度は何か見えた！？どゆこと？
あるの？ないの？
2つ目の「O（オー）」は大文字だし…わけわからんが、
つぎ行ってみよう。
　
　
　

4.真偽値

もうこうなったらまんま入れてみようと思う。

その１　真の値

let text = true

・画面

・コンソールログ

☆ 結果 = true

おっ！trueが画面に表示されてるってことは
文字列になってるってことか！？

---

その２　偽の値

let text = false

・画面

・コンソールログ

☆ 結果 = false

まーそれはそうですよね。
　
　
　

5.「無いよ」みたいなやつ

その１　ぬる

let text = null

・画面

・コンソールログ

☆ 結果 = false

---

その２　未定義

let text;

・画面

・コンソールログ

☆ 結果 = false

んーーーーーーundefined…
より分からんくなってきたねーー
　
　
　

6.ちょっとなんて表現していいか分からないやつ

その１

let text = 0 / 0

・画面

・コンソールログ

☆ 結果 = false

falseは何となく分かるけどゼロじゃないの！？
NaNって何？

---

その２

let text = 1 / 0

・画面

・コンソールログ

☆ 結果 = true

うわぁーまた何か出てきた！
何？Infinityって？
私の世代はDo as Infinityがバッと出てきちゃうのよ。
電卓も「数値じゃありません」って言ってるよ？

怖いわー

---

その3

let text = 0 / 1

・画面

・コンソールログ

☆ 結果 = false

これはゼロなんかい！
もう寝る！！！
　
　
　

まとめ

そんなこんなで検証した日はいつもよりも深い眠りについた訳だが、
お陰で覚えることができた。

そういうことなので、
「if (hoge) {~ 比較演算子を使わないIF文がどこまでを「true」とするのか」
結論…

「とにかく覚える」

これに限る。
こういう判定になる理由を言語化できるならいいが、
そうでないならベタで覚えるしかないのかな。

無理してこの書き方にする必要はないんだろうが、
もし使うときは、
特に配列とオブジェクトは気をつけたいところ。

そんな気難しいこの書き方、
私は使い続けていこうと思う。

なぜなら…

「なんかカッコええやん」