【JavaScript】ショートサーキット評価(短絡評価)について詳しく説明します

記事の概要

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

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

補足

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

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

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

判定説明
falsefalsy本物の false
0falsyゼロ
''falsy空の文字列
nullfalsy値がない
undefinedfalsy未定義
NaNfalsy数ではない
'hello'truthy空ではない文字列
1, -3, 100truthyゼロ以外の数
[]truthy空でも配列
{}truthy空でもオブジェクト

結果のコード

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

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


のようになります。

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

コメント

タイトルとURLをコピーしました