Help us understand the problem. What is going on with this article?

【JavaScript】JavaScrpitにおけるAND条件とOR条件について

JavaScriptにおけるfalsyな値

falsyな値とは、Booleanで変換した際にfalseが返る値

  • false
  • null
  • 0
  • 0n(bigint)
  • ""
  • undefined
  • NaN
ex.js
let a = 0;
console.log(Boolean(a));

//false

JavaScriptにおけるtruthyな値

truthyな値とは、Booleanで変換した際にtrueが返る値

  • falsy以外

変数に値が設定するか確認する場合。

if (a) {
  console.log("set")
  }

この場合、変数aがnullや""の場合、setが出力されないため判定できる。
ただし、0 が格納されていた場合は、falseと判定されるので、setは出力されない。

AND条件の動き

左の式から判定していき、falsyな値が出現した場合、返す。(以後の式は実行されない)
全てtruthyな場合は最後の式を返す。

const a = 1;
const b = 2;
const c = 0;

console.log(a === 1 && b === 3);
//a === 1 => true
//b === 0 => false
//出力:false
console.log(a === 1 && b === 2);
//a === 1 => true
//b === 2 => true
//出力:true
console.log(a && b);
//a  => true
//b  => true
//出力:2
console.log(a && c && b);
//a  => true
//c  => falsyな値
//出力:0

OR条件の動き

AND条件と逆。
左の式から判定していき、truthyな値が出現した場合、返す(以後の式は実行されない)。
全てfalsyな場合は最後の式を返す。

const a = 1;
const b = 2;
const c = 0;

console.log(a === 1 || b === 3);
//a === 1 => true
//出力:true
console.log(a === 5 || b === 5);
//a === 1 => false
//b === 2 => false
//出力:false
console.log(a || b);
//a  => truthy
//出力:1
console.log(c || a || b);
//c  => falsy
//a  => truthy
//出力:1

ちなみに

let a = "a";

a && console.log("b");

//bが出力される。

let a = 0;

a && console.log("b");

//bは出力されない。(aがfalsyであるため、console.logは実行されない。)
sho_U
2020年8月からエンジニアとして働き始めます!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away