【ITニュース解説】Beginner’s Guide #1: if (data) vs if (!!data) in JavaScript 🤔

プログラミングにおいて、特定の条件を満たした場合にのみ処理を実行することは非常に重要である。特に、ある変数に値が設定されているか、つまり「何か」が入っている場合にだけコードを動かしたいという状況は、システム開発の現場で頻繁に遭遇する。JavaScriptでは、このような条件をチェックする方法として、主に二つの書き方が存在する。一つは「if (data)」と書く方法、もう一つは「if (!!data)」と書く方法だ。どちらの書き方も、結果として同じ動作を示すため、初心者にとってはどちらを使えば良いのか迷う点かもしれない。しかし、これらの書き方にはそれぞれ異なる意図とスタイルが込められている。

まず「if (data)」という書き方について説明する。これはJavaScriptにおいて最も簡潔で、慣用的に使われる書き方の一つである。この表現では、JavaScriptの内部で自動的に「型変換（Type Coercion）」と呼ばれる処理が行われる。これは、if文の条件式の中で、dataという変数の値を自動的に真偽値（trueかfalse）に変換してから、条件を判定するという意味である。例えば、dataに数値や文字列、オブジェクトなどが入っていればtrueと評価され、何も入っていないと考えられる特定の値（後述するFalsy値）であればfalseと評価される。このように、JavaScriptがよしなに型変換を行ってくれるため、開発者は余計な記述をすることなく、シンプルかつ短く、非常に読みやすいコードを書くことができる。これはJavaScriptの柔軟性を象徴する書き方と言えるだろう。

次に「if (!!data)」という書き方について見てみよう。こちらでは、dataの前に二つの感嘆符「!!」が付いている。この「!!」は、値を明示的に真偽値に変換するための演算子である。一つ目の「!」は、その後の値が真であればfalseに、偽であればtrueに反転させる「論理否定」演算子だ。そして二つ目の「!」は、一つ目の「!」の結果を再度反転させる。つまり、真だった値はfalse→trueとなり、偽だった値はtrue→falseとなる。結果として、元の値が論理的に真であればtrueに、偽であればfalseに強制的に変換される。この書き方は、dataの値を「確実に真偽値として扱いたい」という開発者の意図を明確に表現できるため、一見すると親切に思えるかもしれない。しかし、if文の条件式の中では、JavaScriptが既に値を真偽値に自動変換してくれるため、この「!!」を使った明示的な変換は冗長である。if文自体がその役割を担ってくれるから、二重に同じ変換を行う必要はないのだ。

両者のパフォーマンスに関してだが、実用上、これらの二つの書き方で処理速度に違いが出ることはほとんどない。仮に微細な差があったとしても、それは人の目で認識できるレベルではなく、たとえループ処理の中で何千回、何万回と実行されたとしても、全体のパフォーマンスに影響を与えることはないだろう。したがって、コードの記述スタイルや意図の明確さが選択の基準となる。そして多くの場面では、より簡潔なif (data)が優雅な書き方として推奨される。

ここで、型変換とFalsy値の概念を理解することが重要になる。「!!」を使う開発者の中には、これらの概念を完全に把握していない人もいるかもしれない。Falsy値とは、JavaScriptの論理的な文脈（if文の条件式、論理AND演算子&&、論理OR演算子||、論理否定演算子!、またはBoolean()関数の中など）でfalseと評価される特定の値のことである。JavaScriptにはFalsy値がわずか8つしか存在しない。具体的には、以下の値がFalsy値である。

• false：そのままの真偽値のfalse。
• 0：数値のゼロ。
• -0：負のゼロ。
• 0n：BigInt型のゼロ。
• ""：空の文字列。
• null：値が存在しないことを示す特殊な値。
• undefined：値が未定義であることを示す特殊な値。
• NaN：Not-a-Number（非数）を意味する特殊な値。

これら8つのFalsy値以外のすべての値は「Truthy値」と呼ばれ、論理的な文脈ではtrueと評価される。例えば、以下のような値は一見するとfalseと評価されそうに見えるかもしれないが、実際にはTruthy値である。

• "0"：これは数値のゼロではなく、文字列の「ゼロ」であるため、空ではない文字列としてTruthyとなる。
• "false"：これは真偽値のfalseではなく、文字列の「false」であるため、空ではない文字列としてTruthyとなる。
• []：空の配列。オブジェクトの一種であり、Falsy値のリストには含まれないためTruthyとなる。
• {}：空のオブジェクト。これもオブジェクトの一種であり、Falsy値のリストに含まれないためTruthyとなる。
• function() {}：関数。関数もまたオブジェクトの一種であり、Falsy値ではないためTruthyとなる。

これらのFalsy値とTruthy値の挙動を一度しっかりと理解すれば、if (data)というシンプルな書き方が、いかにエレガントで適切であるかを実感できるはずだ。もし、それでも!!dataというスタイルを好むのであれば、それは混乱からではなく、その挙動を完全に理解した上で、明確な意図を持って選択していることを意味する。

ただし、!!演算子が全く無意味というわけではない。この演算子が真価を発揮する場面も存在する。それは、ある値を評価した結果の真偽値を、明示的に別の変数に格納したり、関数の戻り値として真偽値そのものを返したりする場合だ。例えば、「const isActive = !!data;」という記述は、dataが持つ値を論理的に評価し、その結果（trueかfalse）をisActiveという真偽値型の変数に代入していることを明確に示している。この場合、コードの意図が非常に明確になり、!!演算子の使用は適切であると言える。

結論として、if文の条件式内では、JavaScriptの型変換の仕組みを信頼し、より簡潔でJavaScriptらしい「if (data)」の書き方を積極的に活用することをおすすめする。Falsy値のリストとその動作を理解することで、コードはより洗練され、不必要な!!演算子の乱用を避けることができるだろう。