夢みるゴリラ
夢みるゴリラ
  • 作成日：

【JavaScript】論理演算子の&&と||の意味を正しく理解する

JavaScriptの論理演算子の&&と||の意味を正しく理解する

||のことを「または」と呼び、&&のことを「かつ」として覚えることが多いですが、実際にはどのように判定されているか説明していきます。

この記事の目次

|| （または）の判定について

||の場合は、左または右の値の少なくとも一つが true の場合に、全体が true となります。
以下の例を見たほうが分かりやすいです。

/*--
左がfalseなら、右の評価を開始。右がtureならtrue、もしくは右のtrueとなる値を返す。右もfalseならfalse、もしくは右のfalseとなる値を返す
左がtrueなら、右は評価せず、tureもしくは左のtrueとなる値を返す。
--*/

const num = null;
const test = num || '数値未設定です'; //左のnumがnullなのでfalseになり、右を評価を開始。右には文字列が入っているのでtrue。そのままその値を返す。
console.log(test);
// 数値未設定です

const num1 = 1;
const test2 = num1 || '数値があります'; //左のnum1は1なのでtrueになり、右の評価をせず、そのまま左のnum1を返す
console.log(test2);
// 1

const num2 = undefined;
const test3 = num2 || false; //num2がundefinedなのでfalseになり、右を評価を開始。右がfalseなので、そのままfalseを返す
console.log(test3);
// false

const x = 20;
const y = 4;
console.log(x > 100 || y > 6); //xは100よりも少ないのでfalseになり、右の評価を開始。yは6より小さいので、falseを返す
// false

const xx = '';
const yy = 'hogehogeです';
console.log(xx || yy); //xxは空文字なのでfalseになり、右の評価を開始。右は文字列が入っているのでtrue。そのまま右の値を返す。
//hogehogeです

const aa = 0;
const bb = undefined;
console.log(aa || bb); //aaは0なのでfalseになり、右の評価を開始。右はbbはundefinedでfalseになるので、そのままundefinedを返す
//undefined

||について、まとめると以下です。

  • 左がfalseなら、右の評価を開始。右がtureならtrue、もしくは右のtrueとなる値を返す。
    右もfalseならfalse、もしくは右のfalseになる値を返す。
  • 左がtrueなら、右は評価せず、trueもしくは左のtrueとなる値を返す。

&&（かつ）の判定について

&&の場合は、左と右が両方ともtrueになったときに、全体がtrueになります。
以下の例を見てみましょう。

/*--
左がfalseなら、右を評価せず、falseもしくは左のfalseとなる値を返す。
左がtrueなら、右の評価開始。右がtrueならtrue、もしくは右のtrueとなる値を返す。右がfalseならfalse、もしくは右のfalseとなる値を返す。
--*/

const num = null;
const test = num && '数値未設定です'; //左のnumがnullでfalseになるため、そのまま左の値を返す。
console.log(test);
//null

const num1 = 1;
const test2 = num1 && '数値があります'; //左のnum1が1でtrueになるため、右の評価を開始。右に文字列が入っているため、右の値を返す。
console.log(test2);
//数値があります

const num2 = 0;
const test3 = num2 && false; //左のnum2がfalseになるので、右を評価せず、そのまま左の0を返す
console.log(test3);
// 0

const x = 20;
const y = 4;
console.log(x > 10 && y > 6); //左がtrueなので、右の評価を開始。右がfalseになるので、falseを返す。
// false

const xx = 'ahoahoです';
const yy = "";
console.log(xx && yy); //左のxxに文字が入っているのでtrueになり、右の評価を開始。右のyyは空文字になるのでfalseになる値を返す。
//""（空文字）

const aa = 0;
const bb = undefined;
console.log(aa && bb); //左のaaに0が入っているのでfalseになるため、右を評価せず、左のfalseになる値を返す
//0

&&について、まとめると以下です。

  • 左がfalseなら、右を評価せず、falseもしくは左のfalseとなる値を返す。
  • 左がtrueなら、右の評価開始。右がtrueならtrue、もしくは右のtrueとなる値を返す。
    右がfalseならfalse、もしくは右のfalseとなる値を返す。

何がtrueで、何がfalseなの？

どういう値がtrueやfalseと判定されるか見てみます。以下の３点は特に間違えやすいので注意しましょう。

  • ""（空文字）… false
  • -1 … true
  • 0 … false
valuetyperesult
"ahoaho"文字列true
""文字列（空文字）false
1数値true
-1数値true
0数値false
{}オブジェクトtrue
[]配列true
true真偽値true
false真偽値false
undefinedundefinedfalse
nullnullfalse

&&と||には優先順位がある

&&は||よりも優先順位が高く、先に実行されます。
以下の例を見てみましょう。

// 最初に「null && 'こんにちは'」が評価されnullになり、次に「8 || null」が評価された結果が返る。
8 || null && 'こんにちは'; // 結果は 8

最初に「null と 'こんにちは'」が評価されnullになり、次に「8とnull」が評価された結果、８が返ってきます。

優先順位を明確に指定する場合はカッコをつけて評価します。

//最初に「8とnull」が評価され8になり、次に「8と'こんにちは'」が評価された結果が返る。
(8 || null) && 'こんにちは'; // 結果は 'こんにちは'

//最初に「8とnull」が評価され8になり、次に「8と'こんにちは'」が評価され、'こんにちは'が返る。
//次に「-1 && undefined」が評価され-1となり、次に「'こんにちは'と-1」が評価され'こんにちは'になり、
//「'こんにちは'と100」が評価され、'こんにちは'が返る
((8 || null) && 'こんにちは') || (-1 && undefined) || 100); //結果は 'こんにちは'

いくつも評価するものがある場合は優先順位を明確にするためにカッコをつけて指定します。コードを整形してくれるprettierを使えば、自動でカッコが挿入されるのでオススメです。

まとめ

論理演算子はtrueやfalseの判定が手軽にできるので便利です。ReactやVueでも頻繁に使うので覚えておきましょう。

こちらの記事も読まれています