【JavaScript】0と1を真偽値として使う場合は型に注意する

【JavaScript】0と1を真偽値として使う場合は型に注意する

はじめに

コジマです。

システム開発をする中で
明示的に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カテゴリの最新記事