この記事を書いた経緯

普段このような認識で開発していたのですが、ふと気になって、何で変数・定数宣言の時の論理演算子 && と || って何であの挙動になるのかについて調べてみました。

を読んでみてもピンと来なかったのですが、読んだ内容を整理して自分で色々実験してみたら、どうしてその挙動になるのかが分かりました。
同じ道を辿る方は多くいらっしゃると思うので、内容をまとめて投稿しました。

筆者のこれまでの状況

普段 && と || は完全に AND と OR のつもりで使っている。
「&& は左側が true の時に右側のものが返される、 || は左側が false の時に右側のものが返される」ということ自体は知っていたけど、前述の AND や OR とは全く別の使い方だと思っていた。

結論 → 別の使い方ではありませんでした。
（むしろ、本来の用法は後者で、前者の使い方はその応用でした）

true && true // 左側が true なので、右側の true が返される

結果： true

true && false // 左側が true なので、右側の false が返される

結果 : false

false && true // 左側が false なので、左側の false が返される

結果 : false

false && false // 左側が false なので、左側の false が返される

結果 : false

true || true // 左側が true なので、左側の true が返される

結果： true

true || false // 左側が true なので、左側の true が返される

結果 : true

false || true // 左側が false なので、右側の true が返される

結果 : true

false || false // 左側が false なので、右側の false が返される

結果 : false

たしかに、 AND と OR と同じ動き方しとる！！ Σ ( ゜゜)

ちなみに…

false

0

-0

0n

"" // 空の文字列。 '' や `` も当てはまる。

null

undefined

NaN

これらが false とみなされ、それ以外のものは true とみなされます。
なので、あまり見ない記法なのですが

const name = 0 || 'Tomoki';
console.log(name); // Tomoki

const age = 'aiueo' && 25;
console.log(age); // 25

一応こんな感じにも書けます。（わざわざこう書くべき状況は思いつかないのですが）

勉強している時は何でもそうですが、ただ暗記するよりも、しつこいくらい丁寧に確かめてみて腑に落ちる状態にする & 有機的に意味や用法を結びつける事が大事だなと改めて思いました。