はじめに
コジマです。
システム開発をする中で
明示的にTRUE, FALSEのBoolean型で真偽値を定義するのではなく、
0と1を用いて真偽値を判定する設計になっているものがあったりします。
そんなシステムの開発を行う中で注意すべきポイントがあります。
それがデータ型です。
データ型を間違えると何が起こるか
結論から言うと、0と1を真偽値として使用する場合は必ずNumber型を使用してください。
データが内部的に持っている真偽値を調べるためには前に「!!」をつけます。
「!」をつけると内部的に持っている真偽値の逆をBoolean型で取得できます。
「!!」をつけると真偽値の逆の逆、すなわちそのデータが内部的に持っている真偽値そのものを取得できます。
/* Number型の真偽値 */
// 型を調べる
console.log('0 の型：' + typeof 0)
console.log('1 の型：' + typeof 1)
// 真偽値を調べる
console.log('0 の真偽値：' + !!0) // falseになる
console.log('1 の真偽値：' + !!1) // trueになる
/* String型の真偽値 */
// 型を調べる
console.log("'0' の型：" + typeof '0')
console.log("'1' の型：" + typeof '1')
// 真偽値を調べる
console.log("'0' の真偽値：" + !!'0') // trueになる！！
console.log("'1' の真偽値：" + !!'1') // trueになる
> "0 の型：number" > "1 の型：number" > "0 の真偽値：false" > "1 の真偽値：true" > "'0' の型：string" > "'1' の型：string" > "'0' の真偽値：true" > "'1' の真偽値：true"
このように見てみると
0がString型だと真偽値がTrueになってしまうんですよ。
ちなみにString型が内部的にFALSEを返すデータは空文字（”）になります。
うまく付き合っていこう
真偽値判定に使用したい0, 1がStringである場合
Numberにキャストしてあげればよいです。
// 真偽値を調べる
console.log("'0' をNumberにキャストしたときの真偽値：" + !!Number('0')) // falseになる
console.log("'1' をNumberにキャストしたときの真偽値：" + !!Number('1')) // trueになる
> "'0' をNumberにキャストしたときの真偽値：false" > "'1' をNumberにキャストしたときの真偽値：true"
if文を省略して書ける
サンプルを見てみましょう
const prices = [100, 200, 500, 800, 900]
// 1000以上のpriceを取得
const highPrices = prices.filter(e => e >= 1000)
console.log(highPrices) // 空配列
console.log(highPrices.length) // 0になる
// ① 取得した配列の長さが0の場合
if(highPrices.length === 0){
console.log('1000以上のデータがありません')
}
// ② こういう風にも書ける
if(!highPrices.length){
console.log('1000以上のデータがありません')
}
> Array [] > 0 > "1000以上のデータがありません" > "1000以上のデータがありません"
このサンプルは1000以上のpriceを取得できなかったらメッセージを表示するというサンプルです。
- 配列のfilter関数は配列を返す
- 配列のlengthはNumberを返す
- !で真偽値を取得できる
というそれぞれの性質を利用しています。
このように、型に注意してBooleanと向き合っていきましょう。
さいごに
JavaScriptのBooleanについてはこちらが参考になります。
空配列や空オブジェクトはTrueになってしまうんですね～。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean
優秀なエンジニアでも、DBから取得した値だったりすると間違えてしまうこともあります。
それに、ソース上正しそうに見えたりするので、うっかりプルリク通してしまったりもあります。
時々こうして基本に立ち返るのは大事だなと思います。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
もっと学びたい人はこちら
JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！
JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
気になった人はぜひ見てみてくださいね！
以上、コジマでした。
