【JavaScript・TypeScript】論理演算子（||、&&）について深堀する

はじめに

この記事はぴんくうさぎと同じような疑問を持った方向けの記事です。

論理演算子の基本

まずは基本からです。

x && y・・・「xかつy」を表す。x、yが共にtrueの場合にtrueを返す。

x || y・・・「xまたはy」を表す。x、yのどちらか一方がtrueならばtrueを返す。

以下を実行すると、「どちらかはtrueよ。」と表示されます。
flg2を「true」にすると「どちらもtrueよ。」も表示されます。

const flg1 = true;
const flg2 = false;

if (flg1 || flg2) {
  console.log('どちらかはtrueよ。');
}

if (flg1 && flg2) {
  console.log('どちらもtrueよ。');
}

論理演算子の本当の意味

ここからが本題です。まずは結論から。

x || y について

以下のコードを実行するとどのような表示となるでしょうか？

答えは「何も設定されていないよ。」です。num1=10とすると、「10」が表示されます。
x || yはxを真偽値に変換した結果がtrueならxを返し、falseならyを返すことが分かります。

const num1 = undefined;
console.log(num1 || '何も設定されていないよ。');

これはデフォルト値を簡単に書く場合等に使用されます。
以下の例では名前が入力されていない場合、「こんにちは！ゲストさん」と表示します。

const i = createInterface({
  input: process.stdin,
  output: process.stdout,
});

i.question('ユーザー名を入力してください。', (user) => {
  const name = user || 'ゲスト';
  console.log(`こんにちは！${name}さん`);
});

x && y について

下のコードを実行するとどのような表示となるでしょうか？

答えは「何か設定されているよ。」です。num2=undefinedとすると、「undefined」が表示されます。
x && yはxを真偽値に変換した結果がfalseならxを返し、trueならyを返すことが分かります。

const num2 = 10;
console.log(num2 && '何か設定されているよ。');

補足

xやyを変換した際に以下の場合にfalseと判定されます。

• false
• null
• undefined
• 0
• 空文字(“”)
• NaN

終わりに

本記事はここまでとなります。

ご覧いただきありがとうございました。ご指摘等がございましたら頂けますと嬉しいです。
引き続き、プログラミングについて定期的に発信していきますのでよろしくお願いします！
また、もしよろしければtwitterもフォローしていただけると嬉しいです！🐢