前提
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;
・表示
見づらいかも知れんが、
画面とコンソールにこのように表示される。
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/表示.png?resize=1320%2C916&ssl=1)
では検証開始!!!!!!!!
1.文字列
その1 中身あるやつ
let text = 'あなたはだんだん「いいね」したくなる'
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/1.png?resize=1320%2C89&ssl=1)
・コンソールログ
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/1-a.png?resize=510%2C46&ssl=1)
その2 空欄
let text = ''
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/2.png?resize=694%2C74&ssl=1)
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/2-a.png?resize=204%2C36&ssl=1)
2.数値
その1 プラスの数値
let text = 1
・画面
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/3.png?resize=438%2C80&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/3-a.png?resize=216%2C42&ssl=1)
その2 ゼロ
let text = 0
・画面
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/4.png?resize=694%2C74&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/4-a.png?resize=244%2C44&ssl=1)
まあこの辺も想定内
その3 マイナスの数値
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/5.png?resize=456%2C80&ssl=1)
・コンソールログ
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/5-1.png?resize=222%2C44&ssl=1)
この辺りから私の心が叫び始める。
「あれぇーゼロより少ないのにtrueなの? なんで?」
どうやらゼロは「無」だけどマイナスは「有」であると判定するようだ。
続いて行ってみる。
3.カッコのやつ
エンジニアが「カッコのやつ」とか言ってると怒られるかも知れんが、
ここではあえてこの呼び方で行こうと思う。
その1 空配列
let text = []
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/6.png?resize=354%2C76&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/6-a.png?resize=274%2C46&ssl=1)
これはtrue?
とりあえず目には見えない「何か」が存在する
ということで納得するとする。
その2 空オブジェクト
let text = {}
・画面
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/7.png?resize=762%2C88&ssl=1)
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/7-a.png?resize=252%2C48&ssl=1)
今度は何か見えた!?どゆこと?
あるの?ないの?
2つ目の「O(オー)」は大文字だし…わけわからんが、
つぎ行ってみよう。
4.真偽値
もうこうなったらまんま入れてみようと思う。
その1 真の値
let text = true
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/8.png?resize=514%2C76&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/8-a.png?resize=240%2C42&ssl=1)
おっ!trueが画面に表示されてるってことは
文字列になってるってことか!?
その2 偽の値
let text = false
・画面
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/9.png?resize=694%2C74&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/9-a.png?resize=282%2C38&ssl=1)
まーそれはそうですよね。
5.「無いよ」みたいなやつ
その1 ぬる
let text = null
・画面
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/10.png?resize=694%2C74&ssl=1)
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/10-a.png?resize=258%2C42&ssl=1)
その2 未定義
let text;
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/11.png?resize=694%2C74&ssl=1)
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/11-a.png?resize=328%2C42&ssl=1)
んーーーーーーundefined…
より分からんくなってきたねーー
6.ちょっとなんて表現していいか分からないやつ
その1
let text = 0 / 0
・画面
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/12.png?resize=694%2C74&ssl=1)
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/12-a.png?resize=244%2C42&ssl=1)
falseは何となく分かるけどゼロじゃないの!?
NaNって何?
その2
let text = 1 / 0
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/13.png?resize=578%2C80&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/13-a.png?resize=302%2C44&ssl=1)
うわぁーまた何か出てきた!
何?Infinityって?
私の世代はDo as Infinityがバッと出てきちゃうのよ。
電卓も「数値じゃありません」って言ってるよ?
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/13-b.png?resize=458%2C638&ssl=1)
その3
let text = 0 / 1
・画面
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/14.png?resize=694%2C74&ssl=1)
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2021/10/14-a.png?resize=220%2C42&ssl=1)
これはゼロなんかい!
もう寝る!!!
まとめ
そんなこんなで検証した日はいつもよりも深い眠りについた訳だが、
お陰で覚えることができた。
そういうことなので、
「if (hoge) {~ 比較演算子を使わないIF文がどこまでを「true」とするのか」
結論…
「とにかく覚える」
これに限る。
こういう判定になる理由を言語化できるならいいが、
そうでないならベタで覚えるしかないのかな。
無理してこの書き方にする必要はないんだろうが、
もし使うときは、
特に配列とオブジェクトは気をつけたいところ。
そんな気難しいこの書き方、
私は使い続けていこうと思う。
なぜなら…
「なんかカッコええやん」