本記事では、JavaScriptのOR条件とAND条件の仕組みについて解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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 | false / 0 / -0 / 0n / “” / null / undefined / NaN |
| truthy | falsy以外の値 |
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); // -> C1つ目のログでは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); // -> C1つ目のログではfalsyな値(undefined)があるのでundefinedが返され、2つ目のログでは全てtruthyの値なので最後のstrCに代入されている文字列が返されています。
