JavaScriptのビックリマークの意味は？

JavaScriptにおける！の意味とは？

JavaScriptでコードを書いていると、よく感嘆符（！）を見かけることがあります。この一見シンプルな記号は、実はいくつかの重要な役割を担っており、コードの挙動に大きく影響を与える可能性があります。

真偽値の反転

最も一般的な感嘆符の使い方は、真偽値の反転です。JavaScriptでは、値は真（truthy）または偽（falsy）として評価されます。


console.log(!true);  // false
console.log(!false); // true

上記のように、感嘆符を前に置くことで、trueはfalseに、falseはtrueに変換されます。

2つの感嘆符(!!)を連続して使用すると、値をBoolean型に強制変換することができます。これは、元の値がtruthyであればtrueを、falsyであればfalseを返します。


console.log(!!'Hello'); // true
console.log(!!0);      // false
console.log(!!'');     // false
console.log(!!{});     // true

このテクニックは、値が真偽値に変換されたときにどのように評価されるかを明確にしたい場合に便利です。

感嘆符は、変数がundefinedまたはnullかどうかをチェックするためにも使用できます。


let myVariable;

if (!myVariable) {
  console.log('変数はundefinedまたはnullです');
} else {
  console.log('変数は定義済みです');
}

上記の場合、`myVariable`がundefinedなので、if文の条件はtrueと評価されます。

感嘆符は強力なツールですが、使いすぎるとコードが読みにくくなる可能性があります。特に、二重否定(!!)の使用は、コードの意図を理解するのが難しくなる場合があるので、注意が必要です。

* [MDN Web Docs: Logical NOT (!)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_NOT)

A1: 1つの感嘆符は真偽値を反転させます。一方、2つの感嘆符は、値をboolean型に強制変換します。

A2: 感嘆符を使うことで、undefinedやnullのチェック、真偽値の反転を簡潔に書くことができます。しかし、使いすぎるとコードが理解しにくくなる場合があるので、注意が必要です。

A3: はい、感嘆符はコードの意図が明確になる場合にのみ使用することをお勧めします。例えば、変数がundefinedまたはnullかどうかを明示的にチェックする場合や、真偽値の反転が必要な場合などです。読みやすさを優先し、コードの意味がわかりにくい場合は、他の方法を検討してください。

その他の参考記事:JavaScript 演算子