【JS学習その③】truthyとfalsy、そしてAND条件・OR条件とそのテクニック

JS学習シリーズの目的

このシリーズは、私ジャックが学んだJavaScriptのメカニズムについてアウトプットも兼ねて、
皆さんと知識や理解を共有するためのものです。
(理解に間違いがあればご指摘いただけると幸いです)

truthyとfalsyの定義

• truthy・・・Booleanで真偽値に変換した場合にtrueになる値のこと
• falsy・・・Booleanで真偽値に変換した場合にfalseになる値のこと

truthyとfalsyの見分け方

truthyとfalsyの見分け方は、基本的にfalsyのものを覚えて、falsy以外のものは全てtruthyだと判断することになります。
falsyのものはそれほど多くないので覚えるのは難しくないと思います。
それでは以下で説明しますね！

falsyな値

• false
• 0 (数字)
• 0n (big int)
• "" (空文字)
• null
• undefined
• NaN (Not a Number)

※truthyはそれ以外の値

AND条件とOR条件

AND条件は&&で記述し、OR条件は||で記述します。
この条件演算子は主にif文で使用し、AND条件は左辺と右辺が両方ともtruthyならtrue、
OR条件は左辺と右辺のどちらかがtruthyならtrueを返します。

main.js

let a = 0;
let b = 1;
let c = 2;
let d = null;

console.log(a && b); /*false*/
console.log(b && c); /*true*/

console.log(a || b); /*true*/
console.log(a || d); /*false*/

AND条件とOR条件の返す値とそれを使用したテクニック

前述したAND条件とOR条件は、それぞれ
AND条件・・・左辺から見ていって、falsyなものがあれば、その値を返す
OR条件・・・左辺から見ていって、truthyなものがあればその値を返す

このことを利用して、例えば次のようなコードが書けます

main.js

function like(fruit) {
    fruit = fruit || apple;
    console.log('I like ' + fruit);
}

like(); /*'I like apple'*/
like(grape); /*'I like grape'*/

let fruit;

fruit && like(); /*何も表示されない*/

このように変数fruitがtruthyかfalsyかでlike関数の中のfruitの値を変更しています。
上記の場合、OR条件でfruitに値を指定していなければI like apple、値が指定されていればI like(fruitに指定された値)(今回はgrape)、となります。
また、AND条件で今回の場合fruitに値が指定されておらず、falsyなのでundefinedが返り、何も表示されません。

まとめ

いかがでしたでしょうか。truthyとfalsy及びAND条件とOR条件はJavaScriptにおいてとても大事なのでしっかりと理解しておきましょう！