JavaScriptにおける「真偽値」の使い方とよくある使用例

「Aという条件であればAの処理を行い、Bという条件であればB」という様に、処理の場合わけをするのはプログラミングでまず最初に学習する項目です。

javaScriptではデータ型の1つにBoolean型(真偽値)があり、trueがfalseで処理を振り分けます。

値の比較に利用する

下記のサンプルコードをご覧ください。

JavaScript
const number1 = 10;
const numner2 = 20;

console.log(number1 < number2);   //true
console.log(number1 > number2);   //false

この様に値を比較して、真偽値を判定するのに使います。

if文で出し分けのために利用する

また、if文の中で、コンテンツを出しわける際にも多様します。下記のサンプルコードをご覧ください。

JavaScript
//ブラウザ判定
const isViewdByMac = navigator.userAgent.includes('Mac');

if ( isViewdByMac ) {
  //Macを利用していた時の処理
} else {
  //Mac以外を利用していた時の処理
}

このサンプルコードは現在使用しているデバイスの種類によって処理を変更するコードです。

デバイス判定部分はnavigator.userAgentから取得できます。console.log(navigator.userAgent);をブラウザ開発環境ツールで実行すると、下記の様な値が返ってきます。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

この機能を利用して、navigator.userAgent.includes('Mac');を使ってMacの文字列がユーザーエージェントに含まれているかを確認しているわけです。

コラム

ちなみに、0以外の数値型、文字列型、配列型、オブジェクト型などをifの条件式として使用した場合はtrue扱いになります。

JavaScript
//Hello Kazuki とアラート表示される
const userName = 'Kazuki';
if ( userName ) {
  alert( `こんにちは${userName}さん`);
}

// addressが’'なのでアラートは表示されない'
const address = '';
if ( address ) {
  alert( `私は${address}に住んでいます`);
}

「!」で真偽値を反転する

真偽値の前に「!」をつけることで、真偽値を反転させることができます。(論理否定演算子)

いつかサンプルコードを紹介します。

JavaScript
JavaScript
// JavaScriptに「a]が含まれているかを判定
const incA = 'JavaScript'.includes('a');
console.log( !incA ); //false

このコードでは「const incA = 'JavaScript'.includes('a');」の部分はtrueですが、出力する際に「!」を実行するのでfalseが返ってきます。

「!!」で値をBoolean型に変換

また、あまり知られていませんが、「!!」とすることで、データをBoolean型に変換することができます。

いくつかサンプルコードを紹介します。

JavaScript
console.log( 'Kazuki' );
console.log( !!'Kazuki' ); //true

console.log( 24 );
console.log( !!24 ); //true

console.log( [1,2,3.4,4.5] );
console.log( !![1,2,3.4,4.5] ); //true

この様に、本来ならその値自体が返ってくるはずですが、「ii」を付与することでBooleanとして処理し、trueまたはfalseが返ってきます。

こちらは値検証の際に利用することがあります。

インストラクター
コメント

コメントを残す