記事の概要

ショートサーキット評価とは、「もう答えが決まったら、それ以上は調べずに終わる」仕組みのことです。

JavaScriptでは&& （AND, かつ）や||（OR, または）を使う時によく使われます。

補足

この記事で「truthy（トゥルーシー）」と「falsy（フォルシー）」という言葉が出てきますので、念の為補足しておきます。

簡単にまとめると、truthyとはtrueとして扱われる値で、falsyとはfalseとして扱われる値です。

まとめ表を載せておきます。

結果のコード

では改めてコードから見てみましょう。（説明しやすいように行の初めに番号を振っています）

1 const hello = undefined || null || 0 || NaN || '' || 'Hello';
2 const bye = ' ' && 100 && [] && {} && 'Bye';

3 true && console.log('1.', hello);  // 1. Hello
4 false && console.log('2.', hello); // 出力なし
5 true || console.log('3.', bye);    // 出力なし
6 false || console.log('4.', bye);   // 4. Bye

解説

1. const hello = undefined || null || 0 || NaN || '' || 'Hello';

• || は「最初に truthy な値を返す」演算子です。
• 順に評価します：
  • undefined → falsy
  • null → falsy
  • 0 → falsy
  • NaN → falsy
  • ''（空文字）→ falsy
  • 'Hello' → truthy

⇒ 結果：hello には 'Hello' が代入されます。

2. const bye = ' ' && 100 && [] && {} && 'Bye';

• && は「最初に falsy な値を返す」、または「すべて truthy なら最後の値を返す」演算子です。
• 順に評価します：
  • ' '（空白文字）→ truthy
  • 100 → truthy
  • [] → truthy
  • {} → truthy
  • 'Bye' → truthy

⇒ 結果：bye には 'Bye' が代入されます。

3. true && console.log('1.', hello);

• true && 式 → 最初が true のため、後ろが評価される
• console.log('1.', hello) が実行される

⇒ 出力：1. Hello

4. false && console.log('2.', hello);

• false && 式 → 最初が false のため、後ろは評価されない

⇒ 出力なし

5. true || console.log('3.', bye);

• true || 式 → 最初が true のため、後ろは評価されない

⇒ 出力なし

6. false || console.log('4.', bye);

• false || 式 → 前が false のため、後ろが評価される
• → console.log('4.', 'Bye') が実行される

⇒ 出力：4. Bye

のようになります。

記載内容に誤りなどありましたらご指摘いただけますと幸いです。