今回はJavaScript実践編①として真偽値の取り扱い方法を紹介します。
Aの条件であればAの処理を、Bという条件ならばBの処理を。と言った様に処理を場合分するのはプログラミングでは必須の技術です。JavaScriptのデータ型の一つにBoolean型(真偽値型)というものがあり、true(真)false(偽)で表します。
どんな場合に使う?
- 古いブラウザから閲覧しているユーザーに警告文を表示したい。
- お問い合わせフォームの必須項目に入力が無い場合に送信ボタンを無効にしたり
難易度(MAX10) | ★★★★★★☆☆☆☆ |
単純にA=AであればOK。と言った処理だけでなく下記の様に複合的に値を利用して真偽値を判別する事がほとんどです。
(AよりBが上は真。AよりBが下は偽。)
const A = 10;
const B = 30;
console.log(A < B) //true
console.log(A > B) //false
また多くの場合はif文と一緒に用いられ、条件に応じて処理を振り分ける様に使われます。
(下記に処理はiPhoneの場合にのみ処理を実行します。)
//iPhoneかどうかを判断
const ios = navigator.userAgent.includes('iPhone');
if(ios) {
//iPhoneの場合に実行する処理を書く
}
0以外の数値型、”以外の文字列型、配列型、オブジェクト型などをifの条件分式として使用した場合はtrue扱いになります。
//「こんにちは田中さん」と表示される。
const userName = '田中'
if (userName) {
alert('こんにちは${userName}さん');
}
//「''」なのでエラーになる
const userName = ''
if (userName) {
alert('こんにちは${userName}さん');
}
真偽値に「!」を追加すると真偽値が反転します。また「!!」と二つ付けるとBoolean型(真偽値型)に戻ります。
const flag = 'JavaScript'.includes('A')
console.log(!flag); //true
console.log(!!flag); //false
以上が「真偽値を取り扱いたい場合:JavaScriptの基礎12」でした。
今後JSを使っていろんな処理やページを作成していくのに必ず必要になる考え方なので、早くに覚えておきましょう。