【JavaScript】truthyとfalsyについて

&& = and , || =or はちょっと違う

sample.js

const val = 0;
const result = val || "値を設定してください";
console.log(result);

「 && は and 、|| は or 」なんやな～と覚えていた私は上記ようなコードを見て、なんだこれは(なんなんだこれは)となりました。
調べてみると、 truthy 、 falsy という概念が関わってくることが分かったので個人的メモとしてまとめます。

truthyとfalsy

truthy： 条件式においてtrueとされる値
falsy： 条件式においてfalseとされる値

falsy になる場合が少ないのでこちらを覚えると良い

値	型
false	boolean
0	number
-0	number
0n	bigint
""	String
null	null
undefined	undefined
NaN	number

これ以外はすべて truthy と覚えましょう

&& , ||との併用

trthy 、falsy の概念が分かった所で、&& と || について説明すると

&&：左から順番に見て行って最初にfalsyの値を返す

truthy.js

//valがtruthyの場合
const val = 10;
const result = val && "値が入っています";
console.log(result);//コンソールに"値が入っています"が表示される

falsy.js

//valがfalsyの場合
const val = 0;
const result = val && "値が入っています";
console.log(result);//コンソールに0が表示される

これは、 &&の左側のvalが、 truthy であるとvalを通り過ぎて"値が入っています"が返却され、 falsy であるとその時点でvalが返却されます。

||：左から順番に見て行って最初にtruthyの値を返す

truthy.js

//valがtruthyの場合
const val = 10;
const result = val || "値が入っていません";
console.log(result);//コンソールに10が表示される

falsy.js

//valがfalsyの場合
const val = 0;
const result = val || "値が入っていません";
console.log(result);//コンソールに"値が入っていません"が表示される

これは、 &&の左側のvalが、 truthy であるとその時点でvalを返却して、 falsy であるとvalを通りすぎて"値が入っていません"が返却されます。

さいごに

jsのtruthy、falsy について知ることが出来ました。
React等でよく使用されるようなので、Reactを用いたアプリ開発をしようとしているこの時期に学習出来て良かったです。

参考資料