初めに
javascriptを学ぶ上で基礎的な内容ですが、とても重要なTruthy valuesとFalsy valuesについてまとめてみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
Falsy valuesとは
booleanに変換した際にfalse(偽）になる値のことをFalsy valuesと言います。具体的には「0, '', undefined, null, NaN, 0n」の６種類があります。
Truthy valuesとは
Falsy valuesでない全ての値がTruthy valuesになります。
Boolean関数を使って試してみる
まずはFalsy valuesをBoolean関数を使ってtrueかfalseかをみてみます。
//Falsy values
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(NaN));
console.log(Boolean(0n));
予想通り、全てfalseと表示されます。
次はTruthy valuesを試してみました。
// Truthy values
console.log(Boolean('田中'));
console.log(Boolean(2));
console.log(Boolean({}));
console.log(Boolean([]));
console.log(Boolean('0'));
{}や[]が空でもtrueと返してくれます。'0'も0ではないのでtrueになります。
if文などによるロジカルの問題
6種類のfalsy valuesがあることは分かりましたが、このfalsy valuesを意識しないといけない理由について考えてみます。
const money = 0;
if (money) {
console.log("お金がありません。");
} else {
console.log("お金があります。");
}
上の例で言うと、falsy valuesを知らなかった場合、money=0というのは真実？なのでコンソールには"お金がありません"と表示されると思うかもしれません。どう表示されるかコンソールで確認してみました。
結果はelseの"お金があります"が表示されます。これは0はfalsy valuesであり、戻り値がfalseになるからです。
次にcarをletを使って宣言し、if文を使って判定してみます。
let car;
if (car) {
console.log('Car is defined');
} else {
console.log('Car is Undefined');
}
結果は以下の通りです。
carは宣言されてはいるものの、値を指定していないので値はundefinedになります。undefinedはfalsy valuesになるためelseの'Car is Undefined'が実行されます。
carの値を0として定義してみたらどうでしょう。
let car = 0; //0の値を指定する
if (car) {
console.log('Car is defined');
} else {
console.log('Car is Undefined');
}
carの値はundefinedではないため、コンソールには'Car is defined'と表示されるでしょうか。
結果は先と同じように'Car is Undefined'と表示されます。これはcarに指定した0はfalsy valuesであり、if文の判定でfalseとなったためです。
終わりに
truthy valuesとfalsy valuesはshort circuituing(&&と||演算子）とnullish coalescing operator(??)日本語で言うと合体演算子を理解するために非常に重要な概念のでしっかり理解したいと思います。