ビックリマーク2つの正体!! Double exclamation mark !!

結論

"!!"は直後の変数の二重否定を取り、あらゆる定数や変数を真偽値へ変換する。

!!hoge === Boolean(hoge)   // true

検証

▼ 基礎的な真偽値 (true or false)

Boolean(true) === true;
Boolean(false) === false;
Boolean(null) === false;
Boolean(undefined) === false;
Boolean("") === false;
Boolean(0) === false;
Boolean(1) === true;

▼ "!"は否定の NOT を取る（真偽値を反転させる）

!true === false;
!false === true;

!0 === true;
!1 === false;

▼ "!!"を用いた真偽値（二重否定）

!!true === true;         // true === true
!!false === false;       // false === false

!!0 === false;           // 0 == false;
!!1 === true;            // 1 == true;

!!null === false;        // Boolean(null) === false;
!!undefined === false;   // Boolean(undefined) === false;
!!"" === false;          // Boolean("") === false;

!!{} === true;           // Boolean({}) === true;
!![] === true;           // Boolean([]) === true;

つまり、、!!

!!true === true;                    // true
!!false === false;                  // true
!!null === Boolean(null);           // true
!!undefined === Boolean(undefined); // true
!!"" === Boolean("");               // true
!!0 === Boolean(0);                 // true
!!1 === Boolean(1);                 // true
!!{} === Boolean({});               // true
!![] === Boolean([]);               // true

まとめ

"!!"は直後の変数の二重否定を取り、あらゆる定数や変数を真偽値へ変換する。

!!hoge === Boolean(hoge)   // true

さいごに

この記事を書いたのは、最近アサインした開発現場にて、"!!"が多用されており「なんだこれ？」と疑問に感じたのがきっかけです。ここでは、React-Hook-Form が使われていたため、相性や何かの思惑があるのかもしれません。。それを知るのはまだ先の話。