はじめに
React,TypeScriptを学習する上で、どの値がtrueでどの値がfalseになるかは
かなり重要な概念になってきますし実務上でも頻出となります。
というわけで,今回は簡単に題目の判定についてまとめていきます。
Javascriptにおけるtruthyな値とfalsyな値
基本的にはfalsyな値だけ、覚えてそれ以外はtruthyの値と考えるのが良いかなと自分は考えています。
| 値 | 型 |
|---|---|
| false | boolean |
| 0(数字) | number |
| -0(数字) | number |
| 0n | bigint |
| ""(空文字列) | string |
| null | null |
| undefined | undefined |
| NaN(Not A Number) | number |
つまり上記の図で表記されていない値はtruthyです！
言語によってtruthyな値とfalsyな値は変わってくるので気をつけてください。
注意するべきパターン
文字列 "0"の真偽値
const hoge = "0"
const result = hoge ? "true" : "false"
console.log(result)
//console.logではtrueが出力される
文字列 "0"は空の文字列ではないのでtrueが返却されます
空の配列の真偽値
const hoge = []
const result = hoge ? "true" : "false"
console.log(result)
// console.logではtrueが出力される
自分もプログラミングを始めた当初は空の配列はfalseの判定かなと思ってましたがjavascriptの場合はfalseが返却されます(因みにPHPでは空の配列はfalse😵💫)。
この場合は下記のようにすることで、falseと判定させることが出来ます。
const hoge = []
const result = hoge.length > 0 ? "true" : "false"
console.log(result)
// console.logではfalseが出力される
因みに、空のオブジェクトもfalsyな値となっております。
最後に
今回の記事はいかがでしたでしょうか。
truthyとfalsyの概念は論理積(&&)と論理和(||)と併用される場合多いです。
実務においても、多用される概念なので個人開発も仕事をする際も意識しておきましょう💪