Help us understand the problem. What is going on with this article?

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

前提

if (text) {
  return true
} return false

 
 
この書き方が

どの時が「true」で

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

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

 

 

 
*********************
前回の記事はテキスト版として掲載した。
動画で分かりづらかったらコチラ

→前回の記事 【公開】Qiitaに投稿したYoutube動画を自動再生させる!
 
 
 
 

検証環境

・フレームワーク: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.文字列

その1 中身あるやつ

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

・画面

・コンソールログ

☆ 結果 = true


その2 空欄

let text = ''

・画面

・コンソールログ

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

2.数値

その1 プラスの数値

let text = 1

・画面

・コンソールログ

☆ 結果 = true


その2 ゼロ

let text = 0

・画面

・コンソールログ

☆ 結果 = false

まあこの辺も想定内


その3 マイナスの数値

・画面

・コンソールログ

☆ 結果 = true

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

続いて行ってみる。
 
 
 

3.カッコのやつ

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

その1 空配列

let text = []

・画面

・コンソールログ

☆ 結果 = true

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


その2 空オブジェクト

let text = {}

・画面

・コンソールログ

☆ 結果 = true

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

4.真偽値

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

その1 真の値

let text = true

・画面

・コンソールログ

☆ 結果 = true

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


その2 偽の値

let text = false

・画面

・コンソールログ

☆ 結果 = false

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

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

その1 ぬる

let text = null

・画面

・コンソールログ

☆ 結果 = false


その2 未定義

let text;

・画面

・コンソールログ

☆ 結果 = false

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

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

その1

let text = 0 / 0

・画面

・コンソールログ

☆ 結果 = false

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


その2

let text = 1 / 0

・画面

・コンソールログ

☆ 結果 = true

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

怖いわー


その3

let text = 0 / 1

・画面

・コンソールログ

☆ 結果 = false

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

まとめ

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

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

「とにかく覚える」

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

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

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

なぜなら…

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

 
ということで次の記事は動画版
→【動画版】の記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away