JavaScirptのif文の真偽値まとめ。if(value)やif(value == null)などについて具体例で理解する

JavaScriptの真偽値に関する基礎知識

JavaScriptにおけるif文の評価方法を説明する前に、JavaScriptの真偽値に関する基礎知識についておさらいします。

JavaScriptにおけるfalsyな値について

falsyな値（偽値、falseyな値）とはfalseと評価される値のことを指します。
JavaScriptにおけるfalsyな値は以下の8つです。¹

JavaScriptにおけるtruthyな値について

truthyな値とはtrueと評価される値のことを指します。falsyな値以外は全てtruthyな値となります。²

厳密等価演算子と等価演算子について

厳密等価演算子(===)とはイコール3つで表現される比較演算子です。
2つのオペランド（被演算子, 演算対象の変数のこと）が等しければtrue、等しくなければfalseを返します。
厳密等価演算子はオペランドの値だけでなく型も等しいかチェックします。
ですので、型が異なるオペランドを厳密等価演算子で比較した場合、結果は常にfalseになります。

等価演算子(==)とはイコール2つで表現される比較演算子です。
厳密等価演算子とは異なり、オペランドの型が異なる場合は型の変換を試みてから比較をします。
ですので、厳密等価演算子でfalseだったものが等価演算子でtrueになるケースも存在します。

以下は厳密等価演算子と等価演算子による結果の違いをまとめた例です。

// 厳密等価演算子でtrue、等価演算子でtrueの例
console.log('hello' == 'hello')
console.log(undefined == undefined)
console.log(null == null)

// 厳密等価演算子でfalse、等価演算子でtrueの例
console.log(1 == '1')
console.log(1 == true)
console.log(0 == false)
console.log(0 == '')
console.log(null == undefined) // 等価演算子ではnullとundefinedは同じものとして扱われる）

// 厳密等価演算子でfalse、等価演算子でfalseの例
console.log(10 == true)
console.log(0 == null)
console.log(false == null)
console.log('' == null)
console.log(0 == undefined)
console.log(false == undefined)
console.log('' == undefined)

厳密等価演算子と等価演算子の詳細解説は【JavaScript】厳密等価演算子（===, イコール3つ）と等価演算子（==, イコール2つ）の違いで紹介しています。

JavaScriptのif文の具体例

JavaScriptのif文の挙動について具体例をもとに紹介します。

if(value)

if(value)はtruthyな値ならtrue、falsyな値ならfalseになります。if(!value)はその逆です。

以下はif(value)の具体例です。

// trueになる例
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

// falseになる例
if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")

if(value == true)

等価演算におけて2つのオペランドの型が一致しない場合、trueは1に変換されます。³
ですので、型変換した結果1と一致するものがtrueとなります。if(value != true)はその逆です。

以下はif(value == true)の具体例です。

// trueになる例
console.log("1" == true)
console.log(1 == true)
console.log([1] == true)
console.log([10].length == true)

// falseになる例
console.log(0 == true)
console.log(10 == true)
console.log([] == true)
console.log([10] == true)
console.log({} == true)
console.log("" == true)
console.log("a" == true)

if(value == false)

等価演算におけて2つのオペランドの型が一致しない場合、falseは+0に変換されます。³
ですので、型変換した結果0と一致するものがtrueとなります。if(value != false)はその逆です。

if(value == true)と同様に、等価演算におけるBooleanの型変換を正しく理解していないとバグをうむ可能性があるので注意が必要な評価方法です。

以下はif(value == false)の具体例です。

// trueになる例
console.log(0 == false)
console.log("0" == false)
console.log([0] == false)
console.log("" == false)
console.log([] == false)

// falseになる例
console.log(1 == false)
console.log([1] == false)
console.log([10].length == false)
console.log(10 == false)
console.log([10] == false)
console.log({} == false)
console.log("a" == false)

なお、『if(value == false)』と『if(value != true)』は同じ結果にならないので注意が必要です。
例えば[10]はif(value == false)ではfalse、if(value != true)ではtrueとなります。

if(value == null)

等価演算においてundefinedとnullは等価ですので、valueがundefinedもしくはnullならtrue、それ以外ならfalseとなります。if(value != null)はその逆です。

undefinedは『値が未定義』を表現する値、nullは『値がない』を表現する値です。
undefinedとnullの詳細解説は【JavaScript】undefinedとnullの違い・判別方法を具体例で理解するで紹介しています。

if(!value)はfalsyな値が全てがtrueになりますが、if(value == null)はfalsyな値のうちundefinedとnullのみがtrueになります。
ですので、値が未定義もしくは値がない場合のみを区別したい場合は『if(value == null)』を利用します。

一般的にundefinedとnullを区別する必要はないので、if(value == null)を使ってnullとundefinedをまとめてチェックするとよいです。⁴

以下はif (value == null)を利用してundefinedもしくはnullを識別する例です。

const undefinedOrNullChecker = (value) => {
  if (value == null) {
    console.log('This is undefined or null')
  } else {
    console.log('This is not undefined nor null')
  };
};

let undefinedValue;
undefinedOrNullChecker(undefinedValue); // This is undefined or null

const nullValue = null;
undefinedOrNullChecker(nullValue); // This is undefined or null

const str = 'hoge'
undefinedOrNullChecker(str); // This is not undefined nor null

if(value === null)

厳密等価においてundefinedとnullは不等価ですので、valueがnullならtrue、それ以外ならfalseとなります。if(value !== null)はその逆です。
以下はif (value === null)を利用してnullを識別する例です。

const distinguishNull = (value) => {
  if (value === null) {
    console.log('This is null')
  } else {
    console.log('This is not null')
  };
};

let undefinedValue;
distinguishNull(undefinedValue); // This is not null

const nullValue = null;
distinguishNull(nullValue); // This is null

const str = 'hoge'
distinguishNull(str); // This is not undefined nor null

if(value === undefined)

valueがundefinedならtrue、それ以外ならfalseとなります。if(value !== undefined)はその逆です。
以下はif (value === undefined)を利用してundefinedを識別する例です。

const distinguishUndefined = (value) => {
  if (value === undefined) {
    console.log('This is undefined')
  } else {
    console.log('This is not undefined')
  };
};

let undefinedValue;
distinguishUndefined(undefinedValue); // This is undefined

const nullValue = null;
distinguishUndefined(nullValue); // This is not undefined

const str = 'hoge'
distinguishUndefined(str); // This is not undefined

まとめ

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

• MDN Web Docs『Falsy (偽値)』
• MDN Web Docs『Truthy』
• TypeScript Deep Dive 日本語版『nullとundefined』