Truthyな値とFalsyな値 / Learch

JavaScriptのTruthyな値とFalsyな値

概要

JavaScriptでは、全ての値は真偽値のコンテキストで「truthy」または「falsy」に評価されます。この章では、どのような値がtruthyまたはfalsyとして扱われるか、またその重要性について解説します。

1. TruthyとFalsyな値とは

Falsyな値は、論理コンテキストでfalseとして扱われる値です。これらの値には、0、''(空文字列)、null、undefined、NaNが含まれます。
Truthyな値は、論理コンテキストでtrueとして扱われる値です。これは、Falsyな値以外のすべての値です。

2. 論理否定演算子 (`!`と`!!`)

!演算子は値を論理値に変換し、その逆を返します。つまり、Truthyな値はfalseに、Falsyな値はtrueになります。
!!演算子（!を二回使用）は値を論理値に変換しますが、値を逆転させることなくそのまま返します。つまり、Truthyな値はtrueに、Falsyな値はfalseになります。

3. 特定の値に対するTruthyとFalsyの評価

''（空文字列）、0、null、undefined、NaNは、!!を使用して確認するとfalseを返します。
それ以外の値（'a'、1、-1、[]、['a']、{}、{ a: 'b' }など）はtrueを返します。

4. 練習問題

下記console.logの出力を答えよ

const boolean = true
console.log('boolean=>', boolean)
console.log('!boolean=>', !boolean)
console.log('!!boolean=>', !!boolean)
console.log('!!!boolean=>', !!!boolean)

console.log("!!''=>", !!'')
console.log("!!'a'=>", !!'a')
console.log('!!0=>', !!0)
console.log('!!1=>', !!1)
console.log('!!-1=>', !!-1)
console.log('!![]=>', !![])
console.log("!!['a']=>", !!['a'])
console.log('!!{}=>', !!{})
console.log("!!{a: 'b'}=>", !!{ a: 'b' })
console.log('!!null=>', !!null)
console.log('!!undefined=>', !!undefined)
console.log('!!NaN=>', !!NaN)

練習問題の解答

以下に練習問題の各console.logステートメントの出力結果を示します。

console.log('boolean=>', boolean) => true
console.log('!boolean=>', !boolean) => false
console.log('!!boolean=>', !!boolean) => true
console.log('!!!boolean=>', !!!boolean) => false
console.log("!!''=>", !!'') => false
console.log("!!'a'=>", !!'a') => true
console.log('!!0=>', !!0) => false
console.log('!!1=>', !!1) => true
console.log('!!-1=>', !!-1) => true
console.log('!![]=>', !![]) => true
console.log("!!['a']=>", !!['a']) => true
console.log('!!{}=>', !!{}) => true
console.log("!!{a: 'b'}=>", !!{ a: 'b' }) => true
console.log('!!null=>', !!null) => false
console.log('!!undefined=>', !!undefined) => false
console.log('!!NaN=>', !!NaN) => false

Javascript値の参照

Javascriptif文、for文