JavaScript

【JavaScript】OR条件とAND条件の仕組み

本記事では、JavaScriptのOR条件とAND条件の仕組みについて解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

falsyとtruthyについて

OR条件とAND条件の仕組みを理解するには、falsyとtruthyについて知る必要があります。

全ての値はfalsyとtruthyに分けられます。例えばif文はtrueとfalseで条件分岐しますが、条件式に数値や文字列が入っていても処理が実行されます。

function check(val) {
  if (val) {
    console.log("条件を満たしました");
  } else {
    console.log("条件を満たしていません");
  }
}

const num = 0;
const str = "A";

check(num); // -> 条件を満たしていません
check(str); // -> 条件を満たしました

これは値がfalsyとtruthyに分けられ、falsyに分類される値はfalseと扱われtruthyに分類される値がtrueに分類されるからです。

falsyとtruthyに分類される値は以下のとおりです。

falsyとtruthyに分類される値一覧
falsyfalse / 0 / -0 / 0n / “” / null / undefined / NaN
truthyfalsy以外の値
【JavaScript】falsyとtruthyについて本記事では、JavaScriptのfalsyとtruthyについて解説しています。...

OR条件の仕組み

OR条件の仕組みを下記の変数を用いて解説します。

const num0 = 0;
const num1 = 1;
const num2 = 2;
const num3 = 3;

まず始めに変数num0とnum1でOR条件を使った場合の返り値を確認してみましょう。

console.log(num0 || num1); // -> 1

すると、返り値は1でした。これは条件を満たしているから1を返しているのではなく、変数num1に代入されている値を返しています。

続いて、変数num1とnum2でOR条件を使った場合の返り値を確認してみましょう。

console.log(num1 || num2); // -> 1

これも先程と同様に1が返されました。これは変数num1に代入されている値を返しています。

これはどういう仕組みかと言うと、OR条件にfalsyな値がある場合は次の条件を見にいき、条件が満たされている場合はその値を返します。

console.log(num3 || num2 || num1); // -> 3 一番最初のnum3がtruthyのため、num3に代入されている値を返す
console.log(num0 || num2 || num1); // -> 2 一番最初のnum0はfalsyで、次のnum2がtruthyのためnum2に代入されている値を返す

今度は数値ではなく文字列を使って試してみましょう。

const uf = undefined;
const nl = null;
const strA = "A";
const strB = "B";
const strC = "C";

console.log(uf || strA || strB); // -> A
console.log(uf || nl || strC); // -> C

1つ目のログでは1番目にfalsyな値(undefined)があるので次の条件を見にいきます。2番目の条件はtruthyなのでstrAに代入されている文字列が返されます。

2つ目のログでは1番目と2番目がfalsyな値(undefined,null)があるので最後の条件を見にいきます。最後の条件はtruthyなのでstrCに代入されている文字列が返されます。

AND条件の仕組み

AND条件の仕組みを下記の変数を用いて解説します。

const num0 = 0;
const num1 = 1;
const num2 = 2;
const num3 = 3;

まず始めに変数num0とnum1でAND条件を使った場合の返り値を確認してみましょう。

console.log(num0 && num1); // -> 0

すると、返り値は0でした。これは条件を満たしていないから0を返しているのではなく、変数num0に代入されている値を返しています。

続いて、変数num1とnum2でAND条件を使った場合の返り値を確認してみましょう。

console.log(num1 && num2); // -> 2

すると、返り値は2でした。これはnum2に代入されている値を返しています。

これはどういう仕組みかと言うと、AND条件にfalsyな値がある場合はその値を返し、AND条件が満たされている場合は最後の変数に代入されいている値を返します。

console.log(num1 && num0 && num2); // -> 0 変数num0がfalsy
console.log(num1 && num2 && num3); // -> 3 全ての値がtruthyで最後の変数num3の値を返す

今度は数値ではなく文字列を使って試してみましょう。

const uf = undefined;
const strA = "A";
const strB = "B";
const strC = "C";

console.log(strA && uf && strB); // -> undefined
console.log(strA && strB && strC); // -> C

1つ目のログではfalsyな値(undefined)があるのでundefinedが返され、2つ目のログでは全てtruthyの値なので最後のstrCに代入されている文字列が返されています。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村